3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Refactor notifications and ask user for updates

Browse source
This commit is contained in:
Andrés Moya 2020-09-18 14:09:40 +02:00 • committed by Andrey Antukh
parent 3b516aa139
commit ae61ce05c9
6 changed files with 356 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

103
frontend/src/app/main/ui/messages.cljs
View file

@ -10,6 +10,9 @@
(ns app.main.ui.messages
(:require
[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.data.messages :as dm]
[app.main.refs :as refs]
@ -19,57 +22,69 @@
[app.util.i18n :as i18n :refer [t]]
[app.util.timers :as ts]))
(defn- type->icon
[type]
(case type
:warning i/msg-warning
:error i/msg-error
:success i/msg-success
:info i/msg-info
i/msg-error))
(mf/defc notification-item
[{:keys [type status on-close quick? content] :as props}]
(let [klass (dom/classnames
:fixed true
:success (= type :success)
:error (= type :error)
:info (= type :info)
:warning (= type :warning)
:hide (= status :hide)
:quick quick?)]
[:section.banner {:class klass}
[:div.content
[:div.icon (type->icon type)]
[:span content]]
[:div.btn-close {:on-click on-close} i/close]]))
(mf/defc banner
[{:keys [type position status controls content actions on-close] :as props}]
(us/assert ::dm/message-type type)
(us/assert ::dm/message-position position)
(us/assert ::dm/message-status status)
(us/assert ::dm/message-controls controls)
(us/assert ::dm/message-actions actions)
(us/assert (s/nilable ::us/fn) on-close)
[:div.banner {:class (dom/classnames
:warning (= type :warning)
:error (= type :error)
:success (= type :success)
:info (= type :info)
:fixed (= position :fixed)
:floating (= position :floating)
:inline (= position :inline)
:hide (= status :hide))}
[:div.wrapper
[:div.icon (case type
:warning i/msg-warning
:error i/msg-error
:success i/msg-success
:info i/msg-info
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
[]
(let [message (mf/deref refs/message)
on-close #(st/emit! dm/hide)]
(when message
[:& notification-item {:type (:type message)
:quick? (boolean (:timeout message))
:status (:status message)
:content (:content message)
:on-close on-close}])))
[:& banner (assoc message
:position :floating
:controls (if (some? (:controls message))
(:controls message)
(if (some? (:timeout message))
:none
:close))
:on-close on-close)])))
(mf/defc inline-banner
{::mf/wrap [mf/memo]}
[{:keys [type on-close content children] :as props}]
[:div.inline-banner {:class (dom/classnames
:warning (= type :warning)
:error (= type :error)
:success (= type :success)
:info (= type :info)
:quick (not on-close))}
[:div.icon (type->icon type)]
[:div.content
[:div.main
[:span.text content]
[:div.btn-close {:on-click on-close} i/close]]
(when children
[:div.extra
children])]])
[{:keys [type content on-close actions] :as props}]
[:& banner {:type type
:position :inline
:status :visible
:controls (if (some? on-close)
:close
(if (some? actions)
:bottom-actions
:none))
:content content
:on-close on-close
:actions actions}])