mirror of
https://github.com/penpot/penpot.git
synced 2025-06-06 16:01:39 +02:00
🎉 Refactor notifications and ask user for updates
This commit is contained in:
Andrés Moya
Andrey Antukh
parent
3b516aa139
commit
ae61ce05c9
6 changed files with 356 additions and 180 deletions
|
|
@ -2670,6 +2670,30 @@
|
||||||
"es" : "Texto (T)"
|
"es" : "Texto (T)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"workspace.updates.there-are-updates" : {
|
||||||
|
"translations" : {
|
||||||
|
"en" : "There are updates in shared libraries",
|
||||||
|
"fr" : "",
|
||||||
|
"ru" : "",
|
||||||
|
"es" : "Hay actualizaciones en librerías compartidas"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"workspace.updates.update" : {
|
||||||
|
"translations" : {
|
||||||
|
"en" : "Update",
|
||||||
|
"fr" : "",
|
||||||
|
"ru" : "",
|
||||||
|
"es" : "Actualizar"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"workspace.updates.dismiss" : {
|
||||||
|
"translations" : {
|
||||||
|
"en" : "Dismiss",
|
||||||
|
"fr" : "",
|
||||||
|
"ru" : "",
|
||||||
|
"es" : "Ignorar"
|
||||||
|
}
|
||||||
|
},
|
||||||
"workspace.viewport.click-to-close-path" : {
|
"workspace.viewport.click-to-close-path" : {
|
||||||
"used-in" : [ "src/app/main/ui/workspace/drawarea.cljs:59" ],
|
"used-in" : [ "src/app/main/ui/workspace/drawarea.cljs:59" ],
|
||||||
"translations" : {
|
"translations" : {
|
||||||
|
|
|
||||||
|
|
@ -1014,20 +1014,67 @@ input[type=range]:focus::-ms-fill-upper {
|
||||||
|
|
||||||
// Messages
|
// Messages
|
||||||
|
|
||||||
// Banner top
|
|
||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
top: 0;
|
position: relative;
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
z-index: 13;
|
|
||||||
|
|
||||||
display: flex;
|
&.error {
|
||||||
justify-content: center;
|
background-color: $color-danger;
|
||||||
align-items: center;
|
}
|
||||||
|
|
||||||
.btn-close {
|
&.success {
|
||||||
|
background-color: $color-success;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
background-color: $color-warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.info {
|
||||||
|
background-color: $color-info;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hide {
|
||||||
|
@include animation(0, .6s, fadeOutUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .icon {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $color-white;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .content {
|
||||||
|
&.bottom-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
& .actions {
|
||||||
|
margin-top: $medium;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.inline-actions {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
& .actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
margin-left: $medium;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .btn-close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
|
@ -1051,164 +1098,223 @@ input[type=range]:focus::-ms-fill-upper {
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.banner.fixed {
|
||||||
align-items: center;
|
position: fixed;
|
||||||
color: $color-white;
|
top: 0;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
z-index: 13;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
& .wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
|
|
||||||
.icon {
|
& .icon {
|
||||||
display: flex;
|
|
||||||
margin-right: $medium;
|
margin-right: $medium;
|
||||||
svg {
|
|
||||||
fill: $color-white;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
& .content {
|
||||||
|
color: $color-white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
font-size: $fs15;
|
font-size: $fs15;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.fixed {
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
background-color: $color-danger;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.success {
|
|
||||||
background-color: $color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.warning {
|
|
||||||
background-color: $color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.info {
|
|
||||||
background-color: $color-info;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.quick {
|
|
||||||
.btn-close {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hide {
|
|
||||||
@include animation(0, .6s, fadeOutUp);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.inline-banner {
|
.banner.floating,
|
||||||
display: flex;
|
.banner.inline {
|
||||||
margin-bottom: $big;
|
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.icon {
|
& .wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-shrink: 0;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: $small;
|
|
||||||
padding: $small;
|
|
||||||
width: 40px;
|
|
||||||
|
|
||||||
svg {
|
& .icon {
|
||||||
fill: $color-white;
|
padding: $small;
|
||||||
height: 20px;
|
width: 40px;
|
||||||
width: 20px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
& .content {
|
||||||
display: flex;
|
color: $color-black;
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
}
|
font-size: $fs14;
|
||||||
|
padding: $small;
|
||||||
.main {
|
width: 100%;
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.extra {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding: $small;
|
|
||||||
|
|
||||||
> div:not(:last-child) {
|
|
||||||
margin-right: $small;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
|
||||||
display: flex;
|
|
||||||
font-size: $fs14;
|
|
||||||
color: $color-black;
|
|
||||||
padding: $small;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.error {
|
&.error {
|
||||||
background-color: lighten($color-danger,30%);
|
& .content {
|
||||||
.icon {
|
background-color: lighten($color-danger,30%);
|
||||||
background-color: $color-danger;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.success {
|
&.success {
|
||||||
background-color: lighten($color-success,30%);
|
& .content {
|
||||||
.icon {
|
background-color: lighten($color-success,30%);
|
||||||
background-color: $color-success;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.warning {
|
&.warning {
|
||||||
background-color: lighten($color-warning,30%);
|
& .content {
|
||||||
.icon {
|
background-color: lighten($color-warning,30%);
|
||||||
background-color: $color-warning;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.info {
|
&.info {
|
||||||
background-color: lighten($color-info,30%);
|
& .content {
|
||||||
.icon {
|
background-color: lighten($color-info,30%);
|
||||||
background-color: $color-info;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-close {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: .35;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-black;
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: .8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.quick {
|
|
||||||
.btn-close {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.banner.floating {
|
||||||
|
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.18);
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 35rem;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
z-index: 20;
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
border: 1px solid $color-danger;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
border: 1px solid $color-success;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
border: 1px solid $color-warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.info {
|
||||||
|
border: 1px solid $color-info;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner.inline {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: $big;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .inline-banner {
|
||||||
|
// // display: flex;
|
||||||
|
// // margin-bottom: $big;
|
||||||
|
// // min-height: 40px;
|
||||||
|
// // width: 100%;
|
||||||
|
//
|
||||||
|
// // .icon {
|
||||||
|
// // display: flex;
|
||||||
|
// // flex-shrink: 0;
|
||||||
|
// // justify-content: center;
|
||||||
|
// // margin-right: $small;
|
||||||
|
// // padding: $small;
|
||||||
|
// // width: 40px;
|
||||||
|
// //
|
||||||
|
// // svg {
|
||||||
|
// // fill: $color-white;
|
||||||
|
// // height: 20px;
|
||||||
|
// // width: 20px;
|
||||||
|
// // }
|
||||||
|
// // }
|
||||||
|
//
|
||||||
|
// .content {
|
||||||
|
// display: flex;
|
||||||
|
// flex-direction: column;
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// .main {
|
||||||
|
// display: flex;
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// .extra {
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: flex-end;
|
||||||
|
// padding: $small;
|
||||||
|
//
|
||||||
|
// > div:not(:last-child) {
|
||||||
|
// margin-right: $small;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// .text {
|
||||||
|
// display: flex;
|
||||||
|
// font-size: $fs14;
|
||||||
|
// color: $color-black;
|
||||||
|
// padding: $small;
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// &.error {
|
||||||
|
// background-color: lighten($color-danger,30%);
|
||||||
|
// .icon {
|
||||||
|
// background-color: $color-danger;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// &.success {
|
||||||
|
// background-color: lighten($color-success,30%);
|
||||||
|
// .icon {
|
||||||
|
// background-color: $color-success;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// &.warning {
|
||||||
|
// background-color: lighten($color-warning,30%);
|
||||||
|
// .icon {
|
||||||
|
// background-color: $color-warning;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// &.info {
|
||||||
|
// background-color: lighten($color-info,30%);
|
||||||
|
// .icon {
|
||||||
|
// background-color: $color-info;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// .btn-close {
|
||||||
|
// width: 40px;
|
||||||
|
// height: 40px;
|
||||||
|
// flex-shrink: 0;
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
// align-items: center;
|
||||||
|
// cursor: pointer;
|
||||||
|
// opacity: .35;
|
||||||
|
//
|
||||||
|
// svg {
|
||||||
|
// fill: $color-black;
|
||||||
|
// height: 18px;
|
||||||
|
// width: 18px;
|
||||||
|
// transform: rotate(45deg);
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// &:hover {
|
||||||
|
// opacity: .8;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// &.quick {
|
||||||
|
// .btn-close {
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
.close-bezier {
|
.close-bezier {
|
||||||
fill: $color-danger;
|
fill: $color-danger;
|
||||||
stroke: $color-danger-dark;
|
stroke: $color-danger-dark;
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,15 @@
|
||||||
|
|
||||||
(def +animation-timeout+ 600)
|
(def +animation-timeout+ 600)
|
||||||
|
|
||||||
|
(s/def ::message-type #{:success :error :info :warning})
|
||||||
|
(s/def ::message-position #{:fixed :floating :inline})
|
||||||
|
(s/def ::message-status #{:visible :hide})
|
||||||
|
(s/def ::message-controls #{:none :close :inline-actions :bottom-actions})
|
||||||
|
(s/def ::label string?)
|
||||||
|
(s/def ::callback fn?)
|
||||||
|
(s/def ::message-action (s/keys :req-un [::label ::callback]))
|
||||||
|
(s/def ::message-actions (s/nilable (s/coll-of ::message-action :kind vector?)))
|
||||||
|
|
||||||
(defn show
|
(defn show
|
||||||
[data]
|
[data]
|
||||||
(ptk/reify ::show
|
(ptk/reify ::show
|
||||||
|
|
@ -79,3 +88,11 @@
|
||||||
(show {:content content
|
(show {:content content
|
||||||
:type :warning
|
:type :warning
|
||||||
:timeout timeout})))
|
:timeout timeout})))
|
||||||
|
|
||||||
|
(defn info-dialog
|
||||||
|
[content controls actions]
|
||||||
|
(show {:content content
|
||||||
|
:type :info
|
||||||
|
:controls controls
|
||||||
|
:actions actions}))
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@
|
||||||
[app.common.geom.point :as gpt]
|
[app.common.geom.point :as gpt]
|
||||||
[app.common.pages :as cp]
|
[app.common.pages :as cp]
|
||||||
[app.common.spec :as us]
|
[app.common.spec :as us]
|
||||||
|
[app.main.data.messages :as dm]
|
||||||
[app.main.data.workspace.common :as dwc]
|
[app.main.data.workspace.common :as dwc]
|
||||||
[app.main.data.workspace.persistence :as dwp]
|
[app.main.data.workspace.persistence :as dwp]
|
||||||
[app.main.data.workspace.libraries :as dwl]
|
[app.main.data.workspace.libraries :as dwl]
|
||||||
|
|
@ -23,6 +24,7 @@
|
||||||
[app.util.time :as dt]
|
[app.util.time :as dt]
|
||||||
[app.util.transit :as t]
|
[app.util.transit :as t]
|
||||||
[app.util.websockets :as ws]
|
[app.util.websockets :as ws]
|
||||||
|
[app.util.i18n :as i18n :refer [tr]]
|
||||||
[beicon.core :as rx]
|
[beicon.core :as rx]
|
||||||
[cljs.spec.alpha :as s]
|
[cljs.spec.alpha :as s]
|
||||||
[clojure.set :as set]
|
[clojure.set :as set]
|
||||||
|
|
@ -211,6 +213,16 @@
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
(watch [_ state stream]
|
(watch [_ state stream]
|
||||||
(when (contains? (:workspace-libraries state) file-id)
|
(when (contains? (:workspace-libraries state) file-id)
|
||||||
(rx/of (dwl/ext-library-changed file-id changes)
|
(let [do-update #(do
|
||||||
(dwl/sync-file file-id))))))
|
(st/emit! (dwl/sync-file file-id))
|
||||||
|
(st/emit! dm/hide))
|
||||||
|
do-dismiss #(st/emit! dm/hide)]
|
||||||
|
(rx/of (dwl/ext-library-changed file-id changes)
|
||||||
|
(dm/info-dialog
|
||||||
|
(tr "workspace.updates.there-are-updates")
|
||||||
|
:inline-actions
|
||||||
|
[{:label (tr "workspace.updates.update")
|
||||||
|
:callback do-update}
|
||||||
|
{:label (tr "workspace.updates.dismiss")
|
||||||
|
:callback do-dismiss}])))))))
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,9 @@
|
||||||
(ns app.main.ui.messages
|
(ns app.main.ui.messages
|
||||||
(:require
|
(:require
|
||||||
[rumext.alpha :as mf]
|
[rumext.alpha :as mf]
|
||||||
|
[clojure.spec.alpha :as s]
|
||||||
|
[app.common.uuid :as uuid]
|
||||||
|
[app.common.spec :as us]
|
||||||
[app.main.ui.icons :as i]
|
[app.main.ui.icons :as i]
|
||||||
[app.main.data.messages :as dm]
|
[app.main.data.messages :as dm]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
|
|
@ -19,57 +22,69 @@
|
||||||
[app.util.i18n :as i18n :refer [t]]
|
[app.util.i18n :as i18n :refer [t]]
|
||||||
[app.util.timers :as ts]))
|
[app.util.timers :as ts]))
|
||||||
|
|
||||||
(defn- type->icon
|
(mf/defc banner
|
||||||
[type]
|
[{:keys [type position status controls content actions on-close] :as props}]
|
||||||
(case type
|
(us/assert ::dm/message-type type)
|
||||||
:warning i/msg-warning
|
(us/assert ::dm/message-position position)
|
||||||
:error i/msg-error
|
(us/assert ::dm/message-status status)
|
||||||
:success i/msg-success
|
(us/assert ::dm/message-controls controls)
|
||||||
:info i/msg-info
|
(us/assert ::dm/message-actions actions)
|
||||||
i/msg-error))
|
(us/assert (s/nilable ::us/fn) on-close)
|
||||||
|
[:div.banner {:class (dom/classnames
|
||||||
(mf/defc notification-item
|
:warning (= type :warning)
|
||||||
[{:keys [type status on-close quick? content] :as props}]
|
:error (= type :error)
|
||||||
(let [klass (dom/classnames
|
:success (= type :success)
|
||||||
:fixed true
|
:info (= type :info)
|
||||||
:success (= type :success)
|
:fixed (= position :fixed)
|
||||||
:error (= type :error)
|
:floating (= position :floating)
|
||||||
:info (= type :info)
|
:inline (= position :inline)
|
||||||
:warning (= type :warning)
|
:hide (= status :hide))}
|
||||||
:hide (= status :hide)
|
[:div.wrapper
|
||||||
:quick quick?)]
|
[:div.icon (case type
|
||||||
[:section.banner {:class klass}
|
:warning i/msg-warning
|
||||||
[:div.content
|
:error i/msg-error
|
||||||
[:div.icon (type->icon type)]
|
:success i/msg-success
|
||||||
[:span content]]
|
:info i/msg-info
|
||||||
[:div.btn-close {:on-click on-close} i/close]]))
|
i/msg-error)]
|
||||||
|
[:div.content {:class (dom/classnames
|
||||||
|
:inline-actions (= controls :inline-actions)
|
||||||
|
:bottom-actions (= controls :bottom-actions))}
|
||||||
|
content
|
||||||
|
(when (or (= controls :bottom-actions) (= controls :inline-actions))
|
||||||
|
[:div.actions
|
||||||
|
(for [action actions]
|
||||||
|
[:div.btn-secondary.btn-small {:key (uuid/next)
|
||||||
|
:on-click (:callback action)}
|
||||||
|
(:label action)])])]
|
||||||
|
(when (= controls :close)
|
||||||
|
[:div.btn-close {:on-click on-close} i/close])]])
|
||||||
|
|
||||||
(mf/defc notifications
|
(mf/defc notifications
|
||||||
[]
|
[]
|
||||||
(let [message (mf/deref refs/message)
|
(let [message (mf/deref refs/message)
|
||||||
on-close #(st/emit! dm/hide)]
|
on-close #(st/emit! dm/hide)]
|
||||||
(when message
|
(when message
|
||||||
[:& notification-item {:type (:type message)
|
[:& banner (assoc message
|
||||||
:quick? (boolean (:timeout message))
|
:position :floating
|
||||||
:status (:status message)
|
:controls (if (some? (:controls message))
|
||||||
:content (:content message)
|
(:controls message)
|
||||||
:on-close on-close}])))
|
(if (some? (:timeout message))
|
||||||
|
:none
|
||||||
|
:close))
|
||||||
|
:on-close on-close)])))
|
||||||
|
|
||||||
(mf/defc inline-banner
|
(mf/defc inline-banner
|
||||||
{::mf/wrap [mf/memo]}
|
{::mf/wrap [mf/memo]}
|
||||||
[{:keys [type on-close content children] :as props}]
|
[{:keys [type content on-close actions] :as props}]
|
||||||
[:div.inline-banner {:class (dom/classnames
|
[:& banner {:type type
|
||||||
:warning (= type :warning)
|
:position :inline
|
||||||
:error (= type :error)
|
:status :visible
|
||||||
:success (= type :success)
|
:controls (if (some? on-close)
|
||||||
:info (= type :info)
|
:close
|
||||||
:quick (not on-close))}
|
(if (some? actions)
|
||||||
[:div.icon (type->icon type)]
|
:bottom-actions
|
||||||
[:div.content
|
:none))
|
||||||
[:div.main
|
:content content
|
||||||
[:span.text content]
|
:on-close on-close
|
||||||
[:div.btn-close {:on-click on-close} i/close]]
|
:actions actions}])
|
||||||
(when children
|
|
||||||
[:div.extra
|
|
||||||
children])]])
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -75,10 +75,12 @@
|
||||||
(not= (:pending-email prof) (:email prof))
|
(not= (:pending-email prof) (:email prof))
|
||||||
[:& msgs/inline-banner
|
[:& msgs/inline-banner
|
||||||
{:type :info
|
{:type :info
|
||||||
:content (t locale "settings.change-email-info3" (:pending-email prof))}
|
:content (t locale "settings.change-email-info3" (:pending-email prof))
|
||||||
[:div.btn-secondary.btn-small
|
:actions [{:label (t locale "settings.cancel-email-change")
|
||||||
{:on-click #(st/emit! udu/cancel-email-change)}
|
:callback #(st/emit! udu/cancel-email-change)}]}]
|
||||||
(t locale "settings.cancel-email-change")]]
|
;; [:div.btn-secondary.btn-small
|
||||||
|
;; {:on-click #(st/emit! udu/cancel-email-change)}
|
||||||
|
;; (t locale "settings.cancel-email-change")]]
|
||||||
|
|
||||||
:else
|
:else
|
||||||
[:& msgs/inline-banner
|
[:& msgs/inline-banner
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue