mirror of
https://github.com/penpot/penpot.git
synced 2025-03-18 10:41:29 -05:00
✨ Improvements after review
This commit is contained in:
parent
6b5c75bf6a
commit
a899d94619
17 changed files with 359 additions and 256 deletions
|
@ -217,9 +217,9 @@
|
|||
:tab-index "0"
|
||||
:on-key-down (fn [event]
|
||||
(dom/prevent-default event))}
|
||||
[:div {:class (stl/css :context-menu-action :submenu-back)
|
||||
:data-no-close true
|
||||
:on-click exit-submenu}
|
||||
[:button {:class (stl/css :context-menu-action :submenu-back)
|
||||
:data-no-close true
|
||||
:on-click exit-submenu}
|
||||
[:span {:class (stl/css :submenu-icon-back)} i/arrow-refactor]
|
||||
parent-option]]
|
||||
|
||||
|
|
|
@ -72,6 +72,9 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: $fw700;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
.submenu-icon-back svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--menu-foreground-color);
|
||||
|
|
|
@ -85,17 +85,17 @@
|
|||
}
|
||||
|
||||
.dropdown {
|
||||
@include menuShadow;
|
||||
background-color: $db-tertiary;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid transparent;
|
||||
bottom: $s-4;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
height: 40vh;
|
||||
max-height: $s-480;
|
||||
min-height: $s-200;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 12;
|
||||
z-index: $z-index-3;
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
|
|
|
@ -113,7 +113,13 @@
|
|||
(fn [items]
|
||||
(run! on-delete items))
|
||||
|
||||
problematic-fonts? (some :height-warning? (vals @fonts))]
|
||||
problematic-fonts? (some :height-warning? (vals @fonts))
|
||||
|
||||
handle-upload-all
|
||||
(mf/use-callback (mf/deps @fonts) #(on-upload-all (vals @fonts)))
|
||||
|
||||
handle-dismiss-all
|
||||
(mf/use-callback (mf/deps @fonts) #(on-dismiss-all (vals @fonts)))]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :dashboard-fonts-upload)}
|
||||
|
@ -144,20 +150,18 @@
|
|||
[:div {:class (stl/css :icon)} i/msg-warning]
|
||||
[:div {:class (stl/css :content)}
|
||||
[:& i18n/tr-html {:tag-name "span"
|
||||
:label "dashboard.fonts.warning-text"}]]])]
|
||||
|
||||
]
|
||||
:label "dashboard.fonts.warning-text"}]]])]]
|
||||
|
||||
[:*
|
||||
(when (some? (vals @fonts))
|
||||
[:div {:class (stl/css :font-item :table-row)}
|
||||
[:span (tr "dashboard.fonts.fonts-added" (i18n/c (count (vals @fonts))))]
|
||||
[:div {:class (stl/css :table-field :options)}
|
||||
[:div {:class (stl/css :btn-primary)
|
||||
:on-click #(on-upload-all (vals @fonts)) :data-test "upload-all"}
|
||||
[:button {:class (stl/css :btn-primary)
|
||||
:on-click handle-upload-all :data-test "upload-all"}
|
||||
[:span (tr "dashboard.fonts.upload-all")]]
|
||||
[:div {:class (stl/css :btn-secondary)
|
||||
:on-click #(on-dismiss-all (vals @fonts)) :data-test "dismiss-all"}
|
||||
[:button {:class (stl/css :btn-secondary)
|
||||
:on-click handle-dismiss-all :data-test "dismiss-all"}
|
||||
[:span (tr "dashboard.fonts.dismiss-all")]]]])
|
||||
|
||||
(for [item (sort-by :font-family (vals @fonts))]
|
||||
|
@ -340,19 +344,16 @@
|
|||
:on-click #(on-delete-variant (:id item))}
|
||||
i/plus]])]
|
||||
|
||||
[:div]
|
||||
|
||||
(if @edit?
|
||||
[:div {:class (stl/css :table-field :options)}
|
||||
[:button
|
||||
{
|
||||
:disabled (str/blank? @state)
|
||||
{:disabled (str/blank? @state)
|
||||
:on-click on-save
|
||||
:class (stl/css-case :btn-primary true
|
||||
:btn-disabled (str/blank? @state))}
|
||||
(tr "labels.save")]
|
||||
[:span {:class (stl/css :icon :close)
|
||||
:on-click on-cancel} i/close]]
|
||||
[:button {:class (stl/css :icon :close)
|
||||
:on-click on-cancel} i/close]]
|
||||
|
||||
[:div {:class (stl/css :table-field :options)}
|
||||
[:span {:class (stl/css :icon)
|
||||
|
@ -427,7 +428,6 @@
|
|||
[:div {:class (stl/css :installed-fonts-header)}
|
||||
[:div {:class (stl/css :table-field :family)} (tr "labels.font-family")]
|
||||
[:div {:class (stl/css :table-field :variants)} (tr "labels.font-variants")]
|
||||
[:div]
|
||||
[:div {:class (stl/css :table-field :search-input)}
|
||||
[:input {:placeholder (tr "labels.search-font")
|
||||
:default-value ""
|
||||
|
|
|
@ -14,6 +14,10 @@
|
|||
padding-left: $s-120;
|
||||
overflow-y: auto;
|
||||
padding-bottom: $s-120;
|
||||
|
||||
.btn-primary {
|
||||
font-size: $fs-11;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-installed-fonts {
|
||||
|
@ -193,6 +197,8 @@
|
|||
}
|
||||
|
||||
&.close {
|
||||
background: none;
|
||||
border: none;
|
||||
svg {
|
||||
transform: rotate(45deg);
|
||||
fill: $df-secondary;
|
||||
|
|
|
@ -431,7 +431,19 @@
|
|||
(dom/stop-propagation event)
|
||||
(swap! local assoc
|
||||
:edition true
|
||||
:menu-open false)))]
|
||||
:menu-open false)))
|
||||
|
||||
handle-key-down
|
||||
(mf/use-callback
|
||||
(mf/deps on-navigate on-select)
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(when (kbd/enter? event)
|
||||
(on-navigate event))
|
||||
(when (kbd/shift? event)
|
||||
(when (or (kbd/down-arrow? event) (kbd/left-arrow? event) (kbd/up-arrow? event) (kbd/right-arrow? event))
|
||||
(on-select event)) ;; TODO Fix this
|
||||
)))]
|
||||
|
||||
(mf/with-effect [selected? local]
|
||||
(when (and (not selected?) (:menu-open @local))
|
||||
|
@ -441,19 +453,11 @@
|
|||
[:li
|
||||
{:class (stl/css-case :grid-item true :project-th true :library library-view?)}
|
||||
[:button
|
||||
{:tab-index "0"
|
||||
:class (stl/css-case :selected selected? :library library-view?)
|
||||
{:class (stl/css-case :selected selected? :library library-view?)
|
||||
:ref node-ref
|
||||
:draggable true
|
||||
:on-click on-select
|
||||
:on-key-down (fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(when (kbd/enter? event)
|
||||
(on-navigate event))
|
||||
(when (kbd/shift? event)
|
||||
(when (or (kbd/down-arrow? event) (kbd/left-arrow? event) (kbd/up-arrow? event) (kbd/right-arrow? event))
|
||||
(on-select event)) ;; TODO Fix this
|
||||
))
|
||||
:on-key-down handle-key-down
|
||||
:on-double-click on-navigate
|
||||
:on-drag-start on-drag-start
|
||||
:on-context-menu on-menu-click}
|
||||
|
|
|
@ -170,7 +170,7 @@
|
|||
width: $s-32;
|
||||
height: $s-32;
|
||||
background-color: $da-tertiary;
|
||||
border-radius: 50%;
|
||||
border-radius: $br-circle;
|
||||
color: $db-secondary;
|
||||
font-size: $fs-16;
|
||||
display: flex;
|
||||
|
|
|
@ -257,9 +257,9 @@
|
|||
toggle-pin
|
||||
(mf/use-fn
|
||||
(mf/deps project)
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (dd/toggle-project-pin project))))
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (dd/toggle-project-pin project))))
|
||||
|
||||
on-menu-click
|
||||
(mf/use-fn
|
||||
|
@ -324,7 +324,23 @@
|
|||
(st/emit! (dd/fetch-files {:project-id project-id})
|
||||
(dd/fetch-recent-files (:id team))
|
||||
(dd/fetch-projects (:id team))
|
||||
(dd/clear-selected-files))))]
|
||||
(dd/clear-selected-files))))
|
||||
|
||||
handle-create-click
|
||||
(mf/use-callback
|
||||
(mf/deps on-create-click)
|
||||
(fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-create-click event))))
|
||||
|
||||
|
||||
handle-menu-click
|
||||
(mf/use-callback
|
||||
(mf/deps on-menu-click)
|
||||
(fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(dom/stop-propagation event)
|
||||
(on-menu-click event))))]
|
||||
|
||||
(if new-css-system
|
||||
[:article {:class (stl/css-case :dashboard-project-row true :first first?)}
|
||||
|
@ -375,10 +391,7 @@
|
|||
:alt (tr "dashboard.new-file")
|
||||
:aria-label (tr "dashboard.new-file")
|
||||
:data-test "project-new-file"
|
||||
:tab-index "0"
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-create-click event)))}
|
||||
:on-key-down handle-create-click}
|
||||
i/close]
|
||||
|
||||
[:button
|
||||
|
@ -387,11 +400,7 @@
|
|||
:alt (tr "dashboard.options")
|
||||
:aria-label (tr "dashboard.options")
|
||||
:data-test "project-options"
|
||||
:tab-index "0"
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(dom/stop-propagation event)
|
||||
(on-menu-click event)))}
|
||||
:on-key-down handle-menu-click}
|
||||
i/actions]]]]
|
||||
|
||||
[:& line-grid
|
||||
|
|
|
@ -47,12 +47,13 @@
|
|||
selected-project (:selected-project dstate)
|
||||
edit-id (:project-for-edit dstate)
|
||||
|
||||
local (mf/use-state
|
||||
local* (mf/use-state
|
||||
{:menu-open false
|
||||
:menu-pos nil
|
||||
:edition? (= (:id item) edit-id)
|
||||
:dragging? false})
|
||||
|
||||
local @local*
|
||||
on-click
|
||||
(mf/use-callback
|
||||
(mf/deps item)
|
||||
|
@ -78,15 +79,15 @@
|
|||
(fn [event]
|
||||
(let [position (dom/get-client-position event)]
|
||||
(dom/prevent-default event)
|
||||
(swap! local assoc
|
||||
(swap! local* assoc
|
||||
:menu-open true
|
||||
:menu-pos position))))
|
||||
|
||||
on-menu-close
|
||||
(mf/use-callback #(swap! local assoc :menu-open false))
|
||||
(mf/use-callback #(swap! local* assoc :menu-open false))
|
||||
|
||||
on-edit-open
|
||||
(mf/use-callback #(swap! local assoc :edition? true))
|
||||
(mf/use-callback #(swap! local* assoc :edition? true))
|
||||
|
||||
on-edit
|
||||
(mf/use-callback
|
||||
|
@ -94,7 +95,7 @@
|
|||
(fn [name]
|
||||
(st/emit! (-> (dd/rename-project (assoc item :name name))
|
||||
(with-meta {::ev/origin "dashboard:sidebar"})))
|
||||
(swap! local assoc :edition? false)))
|
||||
(swap! local* assoc :edition? false)))
|
||||
|
||||
on-drag-enter
|
||||
(mf/use-callback
|
||||
|
@ -104,7 +105,7 @@
|
|||
(dom/prevent-default e)
|
||||
(when-not (dnd/from-child? e)
|
||||
(when (not= selected-project (:id item))
|
||||
(swap! local assoc :dragging? true))))))
|
||||
(swap! local* assoc :dragging? true))))))
|
||||
|
||||
on-drag-over
|
||||
(mf/use-callback
|
||||
|
@ -116,7 +117,7 @@
|
|||
(mf/use-callback
|
||||
(fn [e]
|
||||
(when-not (dnd/from-child? e)
|
||||
(swap! local assoc :dragging? false))))
|
||||
(swap! local* assoc :dragging? false))))
|
||||
|
||||
on-drop-success
|
||||
(mf/use-callback
|
||||
|
@ -128,7 +129,7 @@
|
|||
(mf/use-callback
|
||||
(mf/deps item selected-files)
|
||||
(fn [_]
|
||||
(swap! local assoc :dragging? false)
|
||||
(swap! local* assoc :dragging? false)
|
||||
(when (not= selected-project (:id item))
|
||||
(let [data {:ids selected-files
|
||||
:project-id (:id item)}
|
||||
|
@ -139,7 +140,7 @@
|
|||
[:*
|
||||
[:li {:tab-index "0"
|
||||
:class (if selected? (stl/css :current)
|
||||
(when (:dragging? @local) (stl/css :dragging)))
|
||||
(when (:dragging? local) (stl/css :dragging)))
|
||||
:on-click on-click
|
||||
:on-key-down on-key-down
|
||||
:on-double-click on-edit-open
|
||||
|
@ -148,14 +149,14 @@
|
|||
:on-drag-over on-drag-over
|
||||
:on-drag-leave on-drag-leave
|
||||
:on-drop on-drop}
|
||||
(if (:edition? @local)
|
||||
(if (:edition? local)
|
||||
[:& inline-edition {:content (:name item)
|
||||
:on-end on-edit}]
|
||||
[:span {:class (stl/css :element-title)} (:name item)])]
|
||||
[:& project-menu {:project item
|
||||
:show? (:menu-open @local)
|
||||
:left (:x (:menu-pos @local))
|
||||
:top (:y (:menu-pos @local))
|
||||
:show? (:menu-open local)
|
||||
:left (:x (:menu-pos local))
|
||||
:top (:y (:menu-pos local))
|
||||
:on-edit on-edit-open
|
||||
:on-menu-close on-menu-close}]]
|
||||
|
||||
|
@ -163,7 +164,7 @@
|
|||
[:*
|
||||
[:li {:tab-index "0"
|
||||
:class (if selected? "current"
|
||||
(when (:dragging? @local) "dragging"))
|
||||
(when (:dragging? local) "dragging"))
|
||||
:on-click on-click
|
||||
:on-key-down on-key-down
|
||||
:on-double-click on-edit-open
|
||||
|
@ -172,14 +173,14 @@
|
|||
:on-drag-over on-drag-over
|
||||
:on-drag-leave on-drag-leave
|
||||
:on-drop on-drop}
|
||||
(if (:edition? @local)
|
||||
(if (:edition? local)
|
||||
[:& inline-edition {:content (:name item)
|
||||
:on-end on-edit}]
|
||||
[:span.element-title (:name item)])]
|
||||
[:& project-menu {:project item
|
||||
:show? (:menu-open @local)
|
||||
:left (:x (:menu-pos @local))
|
||||
:top (:y (:menu-pos @local))
|
||||
:show? (:menu-open local)
|
||||
:left (:x (:menu-pos local))
|
||||
:top (:y (:menu-pos local))
|
||||
:on-edit on-edit-open
|
||||
:on-menu-close on-menu-close}]])))
|
||||
|
||||
|
@ -225,7 +226,14 @@
|
|||
(dom/focus! search-title)
|
||||
(dom/set-attribute! search-title "tabindex" "-1")))))
|
||||
(dom/prevent-default e)
|
||||
(dom/stop-propagation e))))]
|
||||
(dom/stop-propagation e))))
|
||||
|
||||
handle-clear-search
|
||||
(mf/use-callback
|
||||
(mf/deps on-clear-click)
|
||||
(fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-clear-click event))))]
|
||||
|
||||
(if new-css-system
|
||||
[:form {:class (stl/css :sidebar-search)}
|
||||
|
@ -249,9 +257,7 @@
|
|||
{:class (stl/css :clear-search)
|
||||
:tab-index "0"
|
||||
:on-click on-clear-click
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-clear-click event)))}
|
||||
:on-key-down handle-clear-search}
|
||||
i/close]
|
||||
|
||||
[:div
|
||||
|
@ -299,14 +305,22 @@
|
|||
team-selected
|
||||
(mf/use-callback
|
||||
(fn [team-id]
|
||||
(st/emit! (dd/go-to-projects team-id))))]
|
||||
(st/emit! (dd/go-to-projects team-id))))
|
||||
|
||||
handle-select-default
|
||||
(fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(team-selected (:default-team-id profile) event)))
|
||||
|
||||
handle-select-team
|
||||
(fn [id event]
|
||||
(when (kbd/enter? event)
|
||||
(team-selected id event)))]
|
||||
|
||||
(if new-css-system
|
||||
[:*
|
||||
[:> dropdown-menu-item* {:on-click (partial team-selected (:default-team-id profile))
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(team-selected (:default-team-id profile) event)))
|
||||
:on-key-down handle-select-default
|
||||
:id "teams-selector-default-team"
|
||||
:class (stl/css :team-name)}
|
||||
[:span {:class (stl/css :team-icon)} i/logo-icon]
|
||||
|
@ -316,9 +330,7 @@
|
|||
|
||||
(for [team-item (remove :is-default (vals teams))]
|
||||
[:> dropdown-menu-item* {:on-click (partial team-selected (:id team-item))
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(team-selected (:id team-item) event)))
|
||||
:on-key-down (partial handle-select-team (:id team-item))
|
||||
:id (str "teams-selector-" (:id team-item))
|
||||
:class (stl/css :team-name)
|
||||
:key (str "teams-selector-" (:id team-item))}
|
||||
|
@ -560,7 +572,47 @@
|
|||
"teams-options-rename")
|
||||
"teams-options-leave-team"
|
||||
(when (get-in team [:permissions :is-owner])
|
||||
"teams-options-delete-team")]]
|
||||
"teams-options-delete-team")]
|
||||
|
||||
handle-show-team-click
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(swap! show-teams-ddwn? not)
|
||||
(reset! show-team-opts-ddwn? false))
|
||||
|
||||
handle-show-team-keydown
|
||||
(fn [event]
|
||||
(when (or (kbd/space? event) (kbd/enter? event))
|
||||
(dom/prevent-default event)
|
||||
(reset! show-teams-ddwn? true)
|
||||
(reset! show-team-opts-ddwn? false)
|
||||
(ts/schedule-on-idle
|
||||
(fn []
|
||||
(let [first-element (dom/get-element (first ids))]
|
||||
(when first-element
|
||||
(dom/focus! first-element)))))))
|
||||
|
||||
handle-show-opts-click
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(swap! show-team-opts-ddwn? not)
|
||||
(reset! show-teams-ddwn? false))
|
||||
|
||||
handle-show-opts-keydown
|
||||
(fn [event]
|
||||
(when (or (kbd/space? event) (kbd/enter? event))
|
||||
(dom/prevent-default event)
|
||||
(reset! show-team-opts-ddwn? true)
|
||||
(reset! show-teams-ddwn? false)
|
||||
(ts/schedule-on-idle
|
||||
(fn []
|
||||
(let [first-element (dom/get-element (first options-ids))]
|
||||
(when first-element
|
||||
(dom/focus! first-element)))))))
|
||||
|
||||
handle-close-team
|
||||
(fn []
|
||||
(reset! show-teams-ddwn? false))]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :sidebar-team-switch)}
|
||||
|
@ -568,21 +620,9 @@
|
|||
[:button
|
||||
{:class (stl/css :current-team)
|
||||
:tab-index "0"
|
||||
:on-click
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(reset! show-teams-ddwn? true))
|
||||
:on-click handle-show-team-click
|
||||
:on-key-down handle-show-team-keydown}
|
||||
|
||||
:on-key-down
|
||||
(fn [event]
|
||||
(when (or (kbd/space? event) (kbd/enter? event))
|
||||
(dom/prevent-default event)
|
||||
(reset! show-teams-ddwn? true)
|
||||
(ts/schedule-on-idle
|
||||
(fn []
|
||||
(let [first-element (dom/get-element (first ids))]
|
||||
(when first-element
|
||||
(dom/focus! first-element)))))))}
|
||||
|
||||
(if (:is-default team)
|
||||
[:div {:class (stl/css :team-name)}
|
||||
|
@ -599,24 +639,14 @@
|
|||
(when-not (:is-default team)
|
||||
[:button
|
||||
{:class (stl/css :switch-options)
|
||||
:on-click (fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(reset! show-team-opts-ddwn? true))
|
||||
:on-click handle-show-opts-click
|
||||
:tab-index "0"
|
||||
:on-key-down (fn [event]
|
||||
(when (or (kbd/space? event) (kbd/enter? event))
|
||||
(dom/prevent-default event)
|
||||
(reset! show-team-opts-ddwn? true)
|
||||
(ts/schedule-on-idle
|
||||
(fn []
|
||||
(let [first-element (dom/get-element (first options-ids))]
|
||||
(when first-element
|
||||
(dom/focus! first-element)))))))}
|
||||
:on-key-down handle-show-opts-keydown}
|
||||
i/actions])]
|
||||
|
||||
;; Teams Dropdown
|
||||
[:& dropdown-menu {:show @show-teams-ddwn?
|
||||
:on-close #(reset! show-teams-ddwn? false)
|
||||
:on-close handle-close-team
|
||||
:ids ids
|
||||
:list-class (stl/css :dropdown :teams-dropdown)}
|
||||
[:& teams-selector-dropdown-items {:ids ids
|
||||
|
@ -922,7 +952,77 @@
|
|||
handle-show-comments
|
||||
(mf/use-callback
|
||||
(fn []
|
||||
(reset! show-comments* true)))]
|
||||
(reset! show-comments* true)))
|
||||
|
||||
handle-click
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(swap! show not)))
|
||||
|
||||
handle-key-down
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(reset! show true))))
|
||||
|
||||
handle-close
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(reset! show false))
|
||||
|
||||
handle-key-down-profile
|
||||
(mf/use-callback
|
||||
(mf/deps on-click)
|
||||
(fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-click :settings-profile event))))
|
||||
|
||||
handle-click-url
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(let [url (-> (dom/get-current-target event)
|
||||
(dom/get-data "url"))]
|
||||
(dom/open-new-window url))))
|
||||
|
||||
handle-keydown-url
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(let [url (-> (dom/get-current-target event)
|
||||
(dom/get-data "url"))]
|
||||
(when (kbd/enter? event)
|
||||
(dom/open-new-window url)))))
|
||||
|
||||
handle-show-release-notes
|
||||
(mf/use-callback
|
||||
(mf/deps show-release-notes)
|
||||
(fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(show-release-notes))))
|
||||
|
||||
handle-feedback-click
|
||||
(mf/use-callback
|
||||
(mf/deps on-click)
|
||||
#(on-click :settings-feedback %))
|
||||
|
||||
handle-feedback-keydown
|
||||
(mf/use-callback
|
||||
(mf/deps on-click)
|
||||
(fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-click :settings-feedback event))))
|
||||
|
||||
handle-logout-click
|
||||
(mf/use-callback
|
||||
(mf/deps on-click)
|
||||
#(on-click (du/logout) %))
|
||||
|
||||
handle-logout-keydown
|
||||
(mf/use-callback
|
||||
(mf/deps on-click)
|
||||
(fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-click (du/logout) event))))]
|
||||
(if new-css-system
|
||||
[:*
|
||||
(when (and team profile)
|
||||
|
@ -936,99 +1036,78 @@
|
|||
[:div {:class (stl/css :profile-section)}
|
||||
[:div {:class (stl/css :profile)
|
||||
:tab-index "0"
|
||||
:on-click (fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(reset! show true))
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(reset! show true)))
|
||||
:on-click handle-click
|
||||
:on-key-down handle-key-down
|
||||
:data-test "profile-btn"}
|
||||
[:img {:src photo
|
||||
:alt (:fullname profile)}]
|
||||
[:span (:fullname profile)]]
|
||||
|
||||
[:& dropdown-menu {:on-close (fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(reset! show false))
|
||||
:show @show}
|
||||
[:& dropdown-menu {:on-close handle-close :show @show}
|
||||
[:ul {:class (stl/css :dropdown)}
|
||||
[:li {:tab-index (if show "0" "-1")
|
||||
[:li {:tab-index (if @show "0" "-1")
|
||||
:on-click (partial on-click :settings-profile)
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-click :settings-profile event)))
|
||||
:on-key-down handle-key-down-profile
|
||||
:data-test "profile-profile-opt"}
|
||||
[:span {:class (stl/css :text)} (tr "labels.your-account")]]
|
||||
|
||||
[:li {:class (stl/css :separator)
|
||||
:tab-index (if show "0" "-1")
|
||||
:on-click #(dom/open-new-window "https://help.penpot.app")
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(dom/open-new-window "https://help.penpot.app")))
|
||||
:tab-index (if @show "0" "-1")
|
||||
:data-url "https://help.penpot.app"
|
||||
:on-click handle-click-url
|
||||
:on-key-down handle-keydown-url
|
||||
:data-test "help-center-profile-opt"}
|
||||
[:span {:class (stl/css :text)} (tr "labels.help-center")]]
|
||||
|
||||
[:li {:tab-index (if show "0" "-1")
|
||||
:on-click #(dom/open-new-window "https://community.penpot.app")
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(dom/open-new-window "https://community.penpot.app")))}
|
||||
[:li {:tab-index (if @show "0" "-1")
|
||||
:data-url "https://community.penpot.app"
|
||||
:on-click handle-click-url
|
||||
:on-key-down handle-keydown-url}
|
||||
[:span {:class (stl/css :text)} (tr "labels.community")]]
|
||||
|
||||
[:li {:tab-index (if show "0" "-1")
|
||||
:on-click #(dom/open-new-window "https://www.youtube.com/c/Penpot")
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(dom/open-new-window "https://www.youtube.com/c/Penpot")))}
|
||||
[:li {:tab-index (if @show "0" "-1")
|
||||
:data-url "https://www.youtube.com/c/Penpot"
|
||||
:on-click handle-click-url
|
||||
:on-key-down handle-keydown-url}
|
||||
[:span {:class (stl/css :text)} (tr "labels.tutorials")]]
|
||||
|
||||
[:li {:tab-index (if show "0" "-1")
|
||||
[:li {:tab-index (if @show "0" "-1")
|
||||
:on-click show-release-notes
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(show-release-notes)))}
|
||||
:on-key-down handle-show-release-notes}
|
||||
[:span {:class (stl/css :text)} (tr "labels.release-notes")]]
|
||||
|
||||
[:li {:class (stl/css :separator)
|
||||
:tab-index (if show "0" "-1")
|
||||
:on-click #(dom/open-new-window "https://penpot.app/libraries-templates")
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(dom/open-new-window "https://penpot.app/libraries-templates")))
|
||||
:tab-index (if @show "0" "-1")
|
||||
:data-url "https://penpot.app/libraries-templates"
|
||||
:on-click handle-click-url
|
||||
:on-key-down handle-keydown-url
|
||||
:data-test "libraries-templates-profile-opt"}
|
||||
[:span {:class (stl/css :text)} (tr "labels.libraries-and-templates")]]
|
||||
|
||||
[:li {:tab-index (if show "0" "-1")
|
||||
:on-click #(dom/open-new-window "https://github.com/penpot/penpot")
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(dom/open-new-window "https://github.com/penpot/penpot")))}
|
||||
[:li {:tab-index (if @show "0" "-1")
|
||||
:data-url "https://github.com/penpot/penpot"
|
||||
:on-click handle-click-url
|
||||
:on-key-down handle-keydown-url}
|
||||
[:span {:class (stl/css :text)} (tr "labels.github-repo")]]
|
||||
|
||||
[:li {:tab-index (if show "0" "-1")
|
||||
:on-click #(dom/open-new-window "https://penpot.app/terms")
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(dom/open-new-window "https://penpot.app/terms")))}
|
||||
[:li {:tab-index (if @show "0" "-1")
|
||||
:data-url "https://penpot.app/terms"
|
||||
:on-click handle-click-url
|
||||
:on-key-down handle-keydown-url}
|
||||
[:span {:class (stl/css :text)} (tr "auth.terms-of-service")]]
|
||||
|
||||
(when (contains? cf/flags :user-feedback)
|
||||
[:li {:class (stl/css :separator)
|
||||
:tab-index (if show "0" "-1")
|
||||
:on-click (partial on-click :settings-feedback)
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-click :settings-feedback event)))
|
||||
:tab-index (if @show "0" "-1")
|
||||
:on-click handle-feedback-click
|
||||
:on-key-down handle-feedback-keydown
|
||||
:data-test "feedback-profile-opt"}
|
||||
[:span {:class (stl/css :text)} (tr "labels.give-feedback")]])
|
||||
|
||||
[:li {:class (stl/css :separator)
|
||||
:tab-index (if show "0" "-1")
|
||||
:on-click #(on-click (du/logout) %)
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-click (du/logout) event)))
|
||||
:tab-index (if @show "0" "-1")
|
||||
:on-click handle-logout-click
|
||||
:on-key-down handle-logout-keydown
|
||||
:data-test "logout-profile-opt"}
|
||||
[:span {:class (stl/css :icon)} i/exit]
|
||||
[:span {:class (stl/css :text)} (tr "labels.logout")]]]]
|
||||
|
@ -1176,4 +1255,3 @@
|
|||
[:& profile-section
|
||||
{:profile profile
|
||||
:team team}]])))
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
margin: 0 $s-16 0 0;
|
||||
padding: $s-16 0 0 0;
|
||||
|
||||
z-index: 1;
|
||||
z-index: $z-index-1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
@ -123,6 +123,7 @@
|
|||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
fill: $df-secondary;
|
||||
|
@ -140,12 +141,12 @@
|
|||
}
|
||||
|
||||
.dropdown {
|
||||
@include menuShadow;
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
z-index: $z-index-4;
|
||||
background-color: $db-tertiary;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border-radius: $br-8;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
|
||||
.separator {
|
||||
border-color: transparent;
|
||||
|
@ -199,7 +200,7 @@
|
|||
|
||||
left: 0;
|
||||
top: $s-52;
|
||||
z-index: 12;
|
||||
|
||||
max-height: $s-480;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
|
|
@ -102,16 +102,8 @@
|
|||
}
|
||||
}
|
||||
.btn-primary {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
font-size: $fs-12;
|
||||
text-transform: uppercase;
|
||||
background-color: $db-tertiary;
|
||||
color: $df-primary;
|
||||
&:hover {
|
||||
color: $da-primary;
|
||||
background-color: $db-cuaternary;
|
||||
}
|
||||
@extends .button-primary;
|
||||
height: $s-32;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -127,7 +119,7 @@
|
|||
position: absolute;
|
||||
top: $s-32;
|
||||
width: $s-152;
|
||||
z-index: 12;
|
||||
z-index: $z-index-4;
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
|
@ -511,7 +503,7 @@
|
|||
align-items: center;
|
||||
border-radius: 50%;
|
||||
color: $df-primary;
|
||||
z-index: 14;
|
||||
z-index: $z-index-modal;
|
||||
|
||||
background-color: $da-primary;
|
||||
height: $s-120;
|
||||
|
|
|
@ -10,8 +10,8 @@
|
|||
.dashboard {
|
||||
background-color: $db-primary;
|
||||
display: grid;
|
||||
grid-template-rows: 50px 1fr;
|
||||
grid-template-columns: 40px 256px 1fr;
|
||||
grid-template-rows: $s-48 1fr;
|
||||
grid-template-columns: $s-40 $s-256 1fr;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
@ -20,7 +20,7 @@
|
|||
flex-direction: column;
|
||||
position: relative;
|
||||
grid-row: 1 / span 2;
|
||||
padding: 1rem 1rem 0 0;
|
||||
padding: $s-16 $s-16 0 0;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
|
@ -54,24 +54,24 @@
|
|||
}
|
||||
|
||||
.form-container {
|
||||
width: 800px;
|
||||
margin: 50px auto 2rem 120px;
|
||||
width: $s-800;
|
||||
margin: $s-48 auto $s-32 $s-120;
|
||||
display: flex;
|
||||
max-width: 368px;
|
||||
max-width: $s-368;
|
||||
width: 100%;
|
||||
|
||||
&.two-columns {
|
||||
max-width: 536px;
|
||||
max-width: $s-520;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: $s-16;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 468px;
|
||||
width: $s-468;
|
||||
|
||||
.custom-input,
|
||||
.custom-select {
|
||||
|
@ -80,26 +80,26 @@
|
|||
position: relative;
|
||||
text-transform: uppercase;
|
||||
color: $df-primary;
|
||||
font-size: 11px;
|
||||
margin-bottom: 12px;
|
||||
margin-left: -4px;
|
||||
font-size: $fs-11;
|
||||
margin-bottom: $s-12;
|
||||
margin-left: calc(-1 * $s-4);
|
||||
}
|
||||
input,
|
||||
select {
|
||||
background-color: $db-tertiary;
|
||||
border-radius: 8px;
|
||||
border-radius: $s-8;
|
||||
border-color: transparent;
|
||||
color: $df-primary;
|
||||
padding: 0 15px;
|
||||
padding: 0 $s-16;
|
||||
&:focus {
|
||||
outline: 1px solid $da-primary;
|
||||
outline: $s-1 solid $da-primary;
|
||||
}
|
||||
::placeholder {
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
.help-icon {
|
||||
bottom: 12px;
|
||||
bottom: $s-12;
|
||||
top: auto;
|
||||
svg {
|
||||
fill: $df-secondary;
|
||||
|
@ -114,30 +114,30 @@
|
|||
}
|
||||
.input-container {
|
||||
background-color: $db-tertiary;
|
||||
border-radius: 8px;
|
||||
border-radius: $s-8;
|
||||
border-color: transparent;
|
||||
margin-top: 22px;
|
||||
margin-top: $s-24;
|
||||
.main-content {
|
||||
label {
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
top: calc(-1 * $s-24);
|
||||
}
|
||||
span {
|
||||
color: $df-primary;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
border: 1px solid $da-primary;
|
||||
border: $s-1 solid $da-primary;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
border-radius: $s-8;
|
||||
padding: $s-12 $s-16;
|
||||
background-color: $db-tertiary;
|
||||
color: $df-primary;
|
||||
border: none;
|
||||
&:focus {
|
||||
outline: 1px solid $da-primary;
|
||||
outline: $s-1 solid $da-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -146,7 +146,7 @@
|
|||
color: $df-primary;
|
||||
}
|
||||
.field-title:not(:first-child) {
|
||||
margin-top: 64px;
|
||||
margin-top: $s-64;
|
||||
}
|
||||
|
||||
.field-text {
|
||||
|
@ -155,7 +155,7 @@
|
|||
button,
|
||||
.btn-secondary {
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
font-size: $fs-11;
|
||||
text-transform: uppercase;
|
||||
background-color: $db-tertiary;
|
||||
color: $df-primary;
|
||||
|
@ -169,21 +169,21 @@
|
|||
}
|
||||
}
|
||||
.links {
|
||||
margin-top: 12px;
|
||||
margin-top: $s-12;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 368px;
|
||||
max-width: $s-368;
|
||||
width: 100%;
|
||||
|
||||
.newsletter-subs {
|
||||
border-bottom: 1px solid $df-secondary;
|
||||
border-top: 1px solid $df-secondary;
|
||||
padding: 30px 0;
|
||||
margin-bottom: 31px;
|
||||
border-bottom: $s-1 solid $df-secondary;
|
||||
border-top: $s-1 solid $df-secondary;
|
||||
padding: $s-32 0;
|
||||
margin-bottom: $s-32;
|
||||
|
||||
.newsletter-title {
|
||||
font-family: "worksans", sans-serif;
|
||||
|
@ -195,15 +195,15 @@
|
|||
font-family: "worksans", sans-serif;
|
||||
color: $db-primary;
|
||||
font-size: $fs-12;
|
||||
margin-right: -17px;
|
||||
margin-bottom: 13px;
|
||||
margin-right: calc(-1 * $s-16);
|
||||
margin-bottom: $s-12;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-family: "worksans", sans-serif;
|
||||
color: $df-secondary;
|
||||
font-size: $fs-12;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: $s-8;
|
||||
}
|
||||
|
||||
.input-checkbox label {
|
||||
|
@ -215,28 +215,28 @@
|
|||
.avatar-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
width: $s-120;
|
||||
min-width: $s-120;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
height: 120px;
|
||||
height: $s-120;
|
||||
margin-right: $s-16;
|
||||
width: 120px;
|
||||
width: $s-120;
|
||||
}
|
||||
|
||||
.image-change-field {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
width: $s-120;
|
||||
height: $s-120;
|
||||
|
||||
.update-overlay {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 121px;
|
||||
height: 121px;
|
||||
width: $s-120;
|
||||
height: $s-120;
|
||||
border-radius: 50%;
|
||||
font-size: $fs-24;
|
||||
color: $df-primary;
|
||||
|
@ -247,8 +247,8 @@
|
|||
}
|
||||
|
||||
input[type="file"] {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
width: $s-120;
|
||||
height: $s-120;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
@ -268,6 +268,6 @@
|
|||
.password-form {
|
||||
h2 {
|
||||
font-size: $fs-14;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $s-20;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -291,7 +291,15 @@
|
|||
(mf/use-fn
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(swap! local assoc :menu-open true)))]
|
||||
(swap! local assoc :menu-open true)))
|
||||
|
||||
on-keydown
|
||||
(mf/use-callback
|
||||
(mf/deps on-menu-click)
|
||||
(fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(dom/stop-propagation event)
|
||||
(on-menu-click event))))]
|
||||
|
||||
(if new-css-system
|
||||
[:div
|
||||
|
@ -299,10 +307,7 @@
|
|||
:tab-index "0"
|
||||
:ref menu-ref
|
||||
:on-click on-menu-click
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(dom/stop-propagation event)
|
||||
(on-menu-click event)))}
|
||||
:on-key-down on-keydown}
|
||||
i/actions
|
||||
[:& context-menu-a11y
|
||||
{:on-close on-menu-close
|
||||
|
|
|
@ -49,7 +49,15 @@
|
|||
form (fm/use-form :spec ::profile-form
|
||||
:initial profile
|
||||
:validators [(fm/validate-length :fullname fm/max-length-allowed (tr "auth.name.too-long"))
|
||||
(fm/validate-not-empty :fullname (tr "auth.name.not-all-space"))])]
|
||||
(fm/validate-not-empty :fullname (tr "auth.name.not-all-space"))])
|
||||
|
||||
handle-show-change-email
|
||||
(mf/use-callback
|
||||
#(modal/show! :change-email {}))
|
||||
|
||||
handle-show-delete-account
|
||||
(mf/use-callback
|
||||
#(modal/show! :delete-account {}))]
|
||||
|
||||
(if new-css-system
|
||||
[:& fm/form {:on-submit on-submit
|
||||
|
@ -62,7 +70,7 @@
|
|||
:label (tr "dashboard.your-name")}]]
|
||||
|
||||
[:div {:class (stl/css :fields-row)
|
||||
:on-click #(modal/show! :change-email {})}
|
||||
:on-click handle-show-change-email}
|
||||
[:& fm/input
|
||||
{:type "email"
|
||||
:name :email
|
||||
|
@ -72,7 +80,7 @@
|
|||
|
||||
[:div {:class (stl/css :options)}
|
||||
[:div.change-email
|
||||
[:a {:on-click #(modal/show! :change-email {})}
|
||||
[:a {:on-click handle-show-change-email}
|
||||
(tr "dashboard.change-email")]]]]
|
||||
|
||||
[:> fm/submit-button*
|
||||
|
@ -82,7 +90,7 @@
|
|||
|
||||
[:div {:class (stl/css :links)}
|
||||
[:div {:class (stl/css :link-item)}
|
||||
[:a {:on-click #(modal/show! :delete-account {})
|
||||
[:a {:on-click handle-show-delete-account
|
||||
:data-test "remove-acount-btn"}
|
||||
(tr "dashboard.remove-account")]]]]
|
||||
|
||||
|
|
|
@ -266,7 +266,7 @@ form.avatar-form {
|
|||
line-height: 6;
|
||||
text-align: center;
|
||||
background: $da-tertiary;
|
||||
z-index: 14;
|
||||
z-index: $z-index-modal;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
|
@ -276,7 +276,7 @@ form.avatar-form {
|
|||
opacity: 0;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
z-index: 15;
|
||||
z-index: $z-index-modal;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
height: 100%;
|
||||
margin: 0 $s-16 0 0;
|
||||
padding: $s-16 0 0 0;
|
||||
z-index: 1;
|
||||
z-index: $z-index-1;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
|
|
|
@ -57,65 +57,62 @@
|
|||
|
||||
(mf/defc bad-gateway
|
||||
[]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
handle-retry
|
||||
(mf/use-callback
|
||||
(fn [] (st/emit! (rt/assign-exception nil))))]
|
||||
(if new-css-system
|
||||
[:> static-header {}
|
||||
[:div {:class (stl/css :main-message)} (tr "labels.bad-gateway.main-message")]
|
||||
[:div {:class (stl/css :desc-message)} (tr "labels.bad-gateway.desc-message")]
|
||||
[:div {:class (stl/css :sign-info)}
|
||||
[:button
|
||||
{:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
|
||||
(tr "labels.retry")]]]
|
||||
[:button {:on-click handle-retry} (tr "labels.retry")]]]
|
||||
|
||||
[:> static-header {}
|
||||
[:div.image i/icon-empty]
|
||||
[:div.main-message (tr "labels.bad-gateway.main-message")]
|
||||
[:div.desc-message (tr "labels.bad-gateway.desc-message")]
|
||||
[:div.sign-info
|
||||
[:a.btn-primary.btn-small
|
||||
{:on-click (fn [] (st/emit! #(dissoc % :exception)))}
|
||||
(tr "labels.retry")]]])))
|
||||
[:a.btn-primary.btn-small {:on-click handle-retry} (tr "labels.retry")]]])))
|
||||
|
||||
(mf/defc service-unavailable
|
||||
[]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
handle-retry
|
||||
(mf/use-callback
|
||||
(fn [] (st/emit! (rt/assign-exception nil))))]
|
||||
(if new-css-system
|
||||
[:> static-header {}
|
||||
[:div {:class (stl/css :main-message)} (tr "labels.service-unavailable.main-message")]
|
||||
[:div {:class (stl/css :desc-message)} (tr "labels.service-unavailable.desc-message")]
|
||||
[:div {:class (stl/css :sign-info)}
|
||||
[:button
|
||||
{:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
|
||||
(tr "labels.retry")]]]
|
||||
[:button {:on-click handle-retry} (tr "labels.retry")]]]
|
||||
|
||||
[:> static-header {}
|
||||
[:div.main-message (tr "labels.service-unavailable.main-message")]
|
||||
[:div.desc-message (tr "labels.service-unavailable.desc-message")]
|
||||
[:div.sign-info
|
||||
[:a.btn-primary.btn-small
|
||||
{:on-click (fn [] (st/emit! #(dissoc % :exception)))}
|
||||
(tr "labels.retry")]]])))
|
||||
[:a.btn-primary.btn-small {:on-click handle-retry} (tr "labels.retry")]]])))
|
||||
|
||||
(mf/defc internal-error
|
||||
[]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
handle-retry
|
||||
(mf/use-callback
|
||||
(fn [] (st/emit! (rt/assign-exception nil))))]
|
||||
(if new-css-system
|
||||
[:> static-header {}
|
||||
[:div {:class (stl/css :main-message)} (tr "labels.internal-error.main-message")]
|
||||
[:div {:class (stl/css :desc-message)} (tr "labels.internal-error.desc-message")]
|
||||
[:div {:class (stl/css :sign-info)}
|
||||
[:button
|
||||
{:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
|
||||
(tr "labels.retry")]]]
|
||||
[:button {:on-click handle-retry} (tr "labels.retry")]]]
|
||||
|
||||
[:> static-header {}
|
||||
[:div.image i/icon-empty]
|
||||
[:div.main-message (tr "labels.internal-error.main-message")]
|
||||
[:div.desc-message (tr "labels.internal-error.desc-message")]
|
||||
[:div.sign-info
|
||||
[:a.btn-primary.btn-small
|
||||
{:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
|
||||
(tr "labels.retry")]]])))
|
||||
[:a.btn-primary.btn-small {:on-click handle-retry} (tr "labels.retry")]]])))
|
||||
|
||||
(mf/defc exception-page
|
||||
[{:keys [data] :as props}]
|
||||
|
|
Loading…
Add table
Reference in a new issue