diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.cljs b/frontend/src/app/main/ui/components/context_menu_a11y.cljs index 21d5bf808..1b8bc1c61 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.cljs +++ b/frontend/src/app/main/ui/components/context_menu_a11y.cljs @@ -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]] diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss index f19a4d355..bd4e89fab 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.scss +++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss @@ -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); diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss index 9de57d692..ed615fa73 100644 --- a/frontend/src/app/main/ui/dashboard/comments.scss +++ b/frontend/src/app/main/ui/dashboard/comments.scss @@ -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; diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs index cedfdaf56..f81d194f5 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.cljs +++ b/frontend/src/app/main/ui/dashboard/fonts.cljs @@ -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 "" diff --git a/frontend/src/app/main/ui/dashboard/fonts.scss b/frontend/src/app/main/ui/dashboard/fonts.scss index 7265fa51c..8741a6289 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.scss +++ b/frontend/src/app/main/ui/dashboard/fonts.scss @@ -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; diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 2241a7239..777517789 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -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} diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss index 096ef6903..cd64a5cd7 100644 --- a/frontend/src/app/main/ui/dashboard/grid.scss +++ b/frontend/src/app/main/ui/dashboard/grid.scss @@ -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; diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index f84f16006..9213bebb7 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -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 diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index 199463098..7a2c3a50e 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -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}]]))) - diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index 0d745a079..0dec1777b 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -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; diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss index b8e3882a8..18ec4eadd 100644 --- a/frontend/src/app/main/ui/dashboard/team.scss +++ b/frontend/src/app/main/ui/dashboard/team.scss @@ -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; diff --git a/frontend/src/app/main/ui/settings.scss b/frontend/src/app/main/ui/settings.scss index e295be303..2fc327282 100644 --- a/frontend/src/app/main/ui/settings.scss +++ b/frontend/src/app/main/ui/settings.scss @@ -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; } } diff --git a/frontend/src/app/main/ui/settings/access_tokens.cljs b/frontend/src/app/main/ui/settings/access_tokens.cljs index 6d5a0bafd..de1ec0a7c 100644 --- a/frontend/src/app/main/ui/settings/access_tokens.cljs +++ b/frontend/src/app/main/ui/settings/access_tokens.cljs @@ -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 diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs index 8dfb6b87b..a6bb4ad30 100644 --- a/frontend/src/app/main/ui/settings/profile.cljs +++ b/frontend/src/app/main/ui/settings/profile.cljs @@ -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")]]]] diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss index dc13b0231..c1f1b622b 100644 --- a/frontend/src/app/main/ui/settings/profile.scss +++ b/frontend/src/app/main/ui/settings/profile.scss @@ -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 { diff --git a/frontend/src/app/main/ui/settings/sidebar.scss b/frontend/src/app/main/ui/settings/sidebar.scss index 263ff24af..e5e05cef4 100644 --- a/frontend/src/app/main/ui/settings/sidebar.scss +++ b/frontend/src/app/main/ui/settings/sidebar.scss @@ -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 { diff --git a/frontend/src/app/main/ui/static.cljs b/frontend/src/app/main/ui/static.cljs index a9fa000c1..163b80671 100644 --- a/frontend/src/app/main/ui/static.cljs +++ b/frontend/src/app/main/ui/static.cljs @@ -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}]