Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 03:31:24 -05:00
Code Issues Activity

✨ Improvements after review

Browse source
This commit is contained in:
alonso.torres 2023-11-27 22:59:20 +01:00
parent 6b5c75bf6a
commit a899d94619
17 changed files with 359 additions and 256 deletions

6
frontend/src/app/main/ui/components/context_menu_a11y.cljs
View file

@ -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]]

3
frontend/src/app/main/ui/components/context_menu_a11y.scss
View file

@ -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);

4
frontend/src/app/main/ui/dashboard/comments.scss
View file

@ -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;

30
frontend/src/app/main/ui/dashboard/fonts.cljs
View file

@ -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 ""

6
frontend/src/app/main/ui/dashboard/fonts.scss
View file

@ -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;

26
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -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}

2
frontend/src/app/main/ui/dashboard/grid.scss
View file

@ -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;

35
frontend/src/app/main/ui/dashboard/projects.cljs
View file

@ -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

312
frontend/src/app/main/ui/dashboard/sidebar.cljs
View file

@ -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}]])))

9
frontend/src/app/main/ui/dashboard/sidebar.scss
View file

@ -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;

16
frontend/src/app/main/ui/dashboard/team.scss
View file

@ -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;

90
frontend/src/app/main/ui/settings.scss
View file

@ -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;
}
}

15
frontend/src/app/main/ui/settings/access_tokens.cljs
View file

@ -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

16
frontend/src/app/main/ui/settings/profile.cljs
View file

@ -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")]]]]

4
frontend/src/app/main/ui/settings/profile.scss
View file

@ -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 {

2
frontend/src/app/main/ui/settings/sidebar.scss
View file

@ -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 {

39
frontend/src/app/main/ui/static.cljs
View file

@ -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}]