3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-13 17:57:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/staging' into develop

Browse source
This commit is contained in:
Andrey Antukh 2024-03-05 18:53:36 +01:00
commit 0606ef1c84
29 changed files with 854 additions and 774 deletions
Download patch file Download diff file Expand all files Collapse all files

3
common/src/app/common/types/shape/layout.cljc
View file

@ -1076,14 +1076,13 @@
(->> (cells-seq parent :sort? true)
(reduce
(fn [[parent auto?] cell]
(let [[cell auto?]
(cond
(and (empty? (:shapes cell))
(= :manual (:position cell))
(= (:row-span cell) 1)
(= (:column-span cell) 1))
[(assoc cell :position :auto) false]
[cell false]
(and (or (not= (:row-span cell) 1)
(not= (:column-span cell) 1))

3
frontend/resources/images/icons/exit-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H6M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 361 B

1
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -848,6 +848,7 @@
color: var(--title-foreground-color-hover);
background-color: var(--menu-background-color);
border: $s-2 solid var(--panel-border-color);
margin: 0;
}
.menu-item-base {

17
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -155,6 +155,7 @@
--icon-foreground-hover: var(--color-foreground-primary);
--icon-foreground-accept: var(--status-color-success-500);
--icon-foreground-discard: var(--status-color-error-500);
--icon-foreground-active: var(--color-accent-primary);
// INPUTS, SELECTS, DROPDOWNS
@ -201,6 +202,7 @@
--menu-background-color: var(--color-background-tertiary);
--menu-foreground-color: var(--color-foreground-primary);
--menu-icon-foreground-color: var(--color-foreground-secondary);
--menu-background-color-selected: var(--color-background-tertiary);
--menu-background-color-hover: var(--color-background-quaternary);
--menu-foreground-color-hover: var(--color-foreground-primary);
@ -358,6 +360,11 @@
--search-bar-background-color: var(--color-background-primary);
--search-bar-input-background-color: var(--color-background-tertiary);
--search-bar-input-border-color: var(--color-background-tertiary);
--search-bar-input-border-color-focus: var(--color-accent-primary);
--search-bar-placeholder-foreground-color: var(--color-foreground-secondary);
--search-bar-foreground-color: var(--color-foreground-primary);
--search-bar-icon-foreground-color: var(--color-foreground-secondary);
--search-bar-icon-foreground-color-hover: var(--color-accent-primary);
--pill-background-color: var(--color-background-tertiary);
--pill-foreground-color: var(--color-foreground-primary);
@ -369,6 +376,8 @@
--resize-area-background-color: var(--color-background-primary);
--resize-area-border-color: var(--color-background-quaternary);
--profile-section-background-color: var(--color-background-tertiary);
--flow-tag-background-color: var(--color-background-tertiary);
--flow-tag-foreground-color: var(--color-foreground-secondary);
--flow-tag-background-color-hover: var(--color-background-quaternary);
@ -393,6 +402,14 @@
// NEW TEAM BUTTON
// TODO: we should not put these functional tokens here, but rather in the components they belong to
--new-team-button-background-color: var(--color-background-primary);
//DASHBOARD
--sidebar-element-foreground-color: var(--color-foreground-secondary);
--sidebar-element-background-color-hover: var(--color-background-secondary);
--sidebar-element-foreground-color-hover: var(--color-accent-primary);
--sidebar-element-background-color-selected: var(--color-background-quaternary);
--sidebar-element-foreground-color-selected: var(--color-accent-primary);
--profile-foreground-color: var(--color-foreground-primary);
}
#app {

1
frontend/src/app/main/data/media.cljs
View file

@ -47,6 +47,7 @@
(defn notify-start-loading
[]
(st/emit! (msg/show {:content (tr "media.loading")
:notification-type :toast
:type :info
:timeout nil})))

2
frontend/src/app/main/data/workspace/libraries.cljs
View file

@ -808,7 +808,7 @@
component (ctkl/get-component data component-id)
page-id (:main-instance-page component)
root-id (:main-instance-id component)]
(dwt/request-thumbnail file-id page-id root-id tag)))
(dwt/request-thumbnail file-id page-id root-id tag "update-component-thumbnail-sync")))
(defn update-component-sync
([shape-id file-id] (update-component-sync shape-id file-id nil))

2
frontend/src/app/main/data/workspace/media.cljs
View file

@ -211,6 +211,7 @@
(watch [_ _ _]
(rx/concat
(rx/of (msg/show {:content (tr "media.loading")
:notification-type :toast
:type :info
:timeout nil
:tag :media-loading}))
@ -440,6 +441,7 @@
(rx/concat
(rx/of (msg/show {:content (tr "media.loading")
:notification-type :toast
:type :info
:timeout nil
:tag :media-loading}))

2
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

@ -573,6 +573,7 @@
(> (:row-span cell) 1)
(> (:column-span cell) 1))
(-> (d/update-in-when [:layout-grid-cells cell-id] assoc :shapes [] :position :auto)
(d/update-in-when [:layout-grid-cells cell-id] dissoc :area-name)
(ctl/resize-cell-area (:row cell) (:column cell) (:row cell) (:column cell) 1 1)
(ctl/assign-cells objects)))))
shape))
@ -585,6 +586,7 @@
(cond-> shape
(contains? #{:area :auto} (:position cell))
(-> (d/assoc-in-when [:layout-grid-cells cell-id :position] :manual)
(d/update-in-when [:layout-grid-cells cell-id] dissoc :area-name)
(ctl/assign-cells objects)))))
shape))

10
frontend/src/app/main/data/workspace/thumbnails.cljs
View file

@ -58,15 +58,17 @@
(defn request-thumbnail
"Enqueues a request to generate a thumbnail for the given ids."
[file-id page-id shape-id tag]
([file-id page-id shape-id tag]
(request-thumbnail file-id page-id shape-id tag "unknown"))
([file-id page-id shape-id tag requester]
(ptk/reify ::request-thumbnail
ptk/EffectEvent
(effect [_ _ _]
(l/dbg :hint "request thumbnail" :file-id file-id :page-id page-id :shape-id shape-id :tag tag)
(l/dbg :hint "request thumbnail" :requester requester :file-id file-id :page-id page-id :shape-id shape-id :tag tag)
(q/enqueue-unique
queue
(create-request file-id page-id shape-id tag)
(partial find-request file-id page-id shape-id tag)))))
(partial find-request file-id page-id shape-id tag))))))
;; This function first renders the HTML calling `render/render-frame` that
;; returns HTML as a string, then we send that data to the iframe rasterizer
@ -291,6 +293,6 @@
(->> all-changes-s
(rx/buffer-until notifier-s)
(rx/mapcat #(into #{} %))
(rx/map #(request-thumbnail file-id page-id % "frame"))))
(rx/map #(request-thumbnail file-id page-id % "frame" "watch-state-changes"))))
(rx/take-until stopper-s))))))

5
frontend/src/app/main/errors.cljs
View file

@ -124,6 +124,7 @@
(let [message (tr "errors.paste-data-validation")]
(st/async-emit!
(msg/show {:content message
:notification-type :toast
:type :error
:timeout 3000})))
@ -138,6 +139,7 @@
[error]
(ts/schedule
#(st/emit! (msg/show {:content "Internal Assertion Error"
:notification-type :toast
:type :error
:timeout 3000})))
@ -153,6 +155,7 @@
(ts/schedule
#(st/emit!
(msg/show {:content "Something wrong has happened (on worker)."
:notification-type :toast
:type :error
:timeout 3000})))
@ -166,6 +169,7 @@
[_]
(ts/schedule
#(st/emit! (msg/show {:content "SVG is invalid or malformed"
:notification-type :toast
:type :error
:timeout 3000}))))
@ -174,6 +178,7 @@
[_]
(ts/schedule
#(st/emit! (msg/show {:content "There was an error with the comment"
:notification-type :toast
:type :error
:timeout 3000}))))

15
frontend/src/app/main/fonts.cljs
View file

@ -18,7 +18,6 @@
[app.util.http :as http]
[app.util.object :as obj]
[beicon.v2.core :as rx]
[clojure.set :as set]
[cuerdas.core :as str]
[lambdaisland.uri :as u]
[okulary.core :as l]
@ -273,13 +272,17 @@
(defn get-content-fonts
"Extracts the fonts used by the content of a text shape"
[{font-id :font-id children :children :as content}]
[content]
(->> (txt/node-seq content)
(filter txt/is-text-node?)
(reduce
(fn [result {:keys [font-id] :as node}]
(let [current-font
(if (some? font-id)
#{(select-keys content [:font-id :font-variant-id])}
#{(select-keys txt/default-text-attrs [:font-id :font-variant-id])})
children-font (->> children (mapv get-content-fonts))]
(reduce set/union (conj children-font current-font))))
(select-keys node [:font-id :font-variant-id])
(select-keys txt/default-text-attrs [:font-id :font-variant-id]))]
(conj result current-font)))
#{})))
(defn fetch-font-css
"Given a font and the variant-id, retrieves the fontface CSS"

4
frontend/src/app/main/ui/components/link.cljs
View file

@ -12,10 +12,10 @@
(mf/defc link
{::mf/wrap-props false}
[{:keys [action klass data-test keyboard-action children]}]
[{:keys [action class data-test keyboard-action children]}]
(let [keyboard-action (d/nilv keyboard-action action)]
[:a {:on-click action
:class klass
:class class
:on-key-down (fn [event]
(when ^boolean (kbd/enter? event)
(keyboard-action event)))

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

@ -24,7 +24,7 @@
[app.main.ui.dashboard.inline-edition :refer [inline-edition]]
[app.main.ui.dashboard.project-menu :refer [project-menu]]
[app.main.ui.dashboard.team-form]
[app.main.ui.icons :as i]
[app.main.ui.icons :as i :refer [icon-xref]]
[app.util.dom :as dom]
[app.util.dom.dnd :as dnd]
[app.util.i18n :as i18n :refer [tr]]
@ -39,6 +39,33 @@
[potok.v2.core :as ptk]
[rumext.v2 :as mf]))
(def ^:private clear-search-icon
(icon-xref :delete-text-refactor (stl/css :clear-search-icon)))
(def ^:private search-icon
(icon-xref :search-refactor (stl/css :search-icon)))
(def ^:private tick-icon
(icon-xref :tick-refactor (stl/css :tick-icon)))
(def ^:private logo-icon
(icon-xref :logo-refactor (stl/css :logo-icon)))
(def ^:private add-icon
(icon-xref :add-refactor (stl/css :add-icon)))
(def ^:private arrow-icon
(icon-xref :arrow-refactor (stl/css :arrow-icon)))
(def ^:private menu-icon
(icon-xref :menu-refactor (stl/css :menu-icon)))
(def ^:private pin-icon
(icon-xref :pin-refactor (stl/css :pin-icon)))
(def ^:private exit-icon
(icon-xref :exit-refactor (stl/css :exit-icon)))
(mf/defc sidebar-project
[{:keys [item selected?] :as props}]
(let [dstate (mf/deref refs/dashboard-local)
@ -54,13 +81,13 @@
local @local*
on-click
(mf/use-callback
(mf/use-fn
(mf/deps item)
(fn []
(st/emit! (dd/go-to-files (:id item)))))
on-key-down
(mf/use-callback
(mf/use-fn
(mf/deps item)
(fn [event]
(when (kbd/enter? event)
@ -74,7 +101,7 @@
(dom/set-attribute! project-title "tabindex" "-1")))))))))
on-menu-click
(mf/use-callback
(mf/use-fn
(fn [event]
(let [position (dom/get-client-position event)]
(dom/prevent-default event)
@ -83,13 +110,13 @@
:menu-pos position))))
on-menu-close
(mf/use-callback #(swap! local* assoc :menu-open false))
(mf/use-fn #(swap! local* assoc :menu-open false))
on-edit-open
(mf/use-callback #(swap! local* assoc :edition? true))
(mf/use-fn #(swap! local* assoc :edition? true))
on-edit
(mf/use-callback
(mf/use-fn
(mf/deps item)
(fn [name]
(when-not (str/blank? name)
@ -98,7 +125,7 @@
(swap! local* assoc :edition? false)))
on-drag-enter
(mf/use-callback
(mf/use-fn
(mf/deps selected-project)
(fn [e]
(when (dnd/has-type? e "penpot/files")
@ -108,25 +135,25 @@
(swap! local* assoc :dragging? true))))))
on-drag-over
(mf/use-callback
(mf/use-fn
(fn [e]
(when (dnd/has-type? e "penpot/files")
(dom/prevent-default e))))
on-drag-leave
(mf/use-callback
(mf/use-fn
(fn [e]
(when-not (dnd/from-child? e)
(swap! local* assoc :dragging? false))))
on-drop-success
(mf/use-callback
(mf/use-fn
(mf/deps (:id item))
#(st/emit! (msg/success (tr "dashboard.success-move-file"))
(dd/go-to-files (:id item))))
on-drop
(mf/use-callback
(mf/use-fn
(mf/deps item selected-files)
(fn [_]
(swap! local* assoc :dragging? false)
@ -139,6 +166,7 @@
[:*
[:li {:tab-index "0"
:class (stl/css-case :project-element true
:sidebar-nav-item true
:current selected?
:dragging (:dragging? local))
:on-click on-click
@ -167,19 +195,19 @@
emit! (mf/use-memo #(f/debounce st/emit! 500))
on-search-blur
(mf/use-callback
(mf/use-fn
(fn [_]
(reset! focused? false)))
on-search-change
(mf/use-callback
(mf/use-fn
(mf/deps team-id)
(fn [event]
(let [value (dom/get-target-val event)]
(emit! (dd/go-to-search value)))))
on-clear-click
(mf/use-callback
(mf/use-fn
(mf/deps team-id)
(fn [e]
(let [search-input (dom/get-element "search-input")]
@ -190,7 +218,7 @@
(dom/stop-propagation e))))
on-key-press
(mf/use-callback
(mf/use-fn
(fn [e]
(when (kbd/enter? e)
(ts/schedule-on-idle
@ -204,15 +232,14 @@
(dom/stop-propagation e))))
handle-clear-search
(mf/use-callback
(mf/use-fn
(mf/deps on-clear-click)
(fn [event]
(when (kbd/enter? event)
(on-clear-click event))))]
[:form {:class (stl/css :sidebar-search)}
[:input
{:class (stl/css :input-text)
[:input {:class (stl/css :input-text)
:key "images-search-box"
:id "search-input"
:type "text"
@ -227,71 +254,85 @@
:ref #(when % (set! (.-value %) search-term))}]
(if (or @focused? (seq search-term))
[:div
{:class (stl/css :clear-search)
[:button {:class (stl/css :search-btn :clear-search-btn)
:tab-index "0"
:on-click on-clear-click
:on-key-down handle-clear-search}
i/close]
clear-search-icon]
[:div
{:class (stl/css :search)
[:button {:class (stl/css :search-btn)
:on-click on-clear-click}
i/search])]))
search-icon])]))
(mf/defc teams-selector-dropdown-items
{::mf/wrap-props false}
[{:keys [team profile teams] :as props}]
(let [on-create-clicked
(mf/use-callback
(mf/use-fn
#(st/emit! (modal/show :team-form {})))
team-selected
(mf/use-callback
(fn [team-id]
(st/emit! (dd/go-to-projects team-id))))
(mf/use-fn
(fn [event]
(let [team-id (-> (dom/get-current-target event)
(dom/get-data "value"))]
(st/emit! (dd/go-to-projects team-id)))))
handle-select-default
(mf/use-fn
(mf/deps profile team-selected)
(fn [event]
(when (kbd/enter? event)
(team-selected (:default-team-id profile) event)))
(team-selected (:default-team-id profile) event))))
handle-select-team
(fn [id event]
(mf/use-fn
(mf/deps team-selected)
(fn [event]
(when (kbd/enter? event)
(team-selected id event)))]
(team-selected event))))
handle-creation-key-down
(mf/use-fn
(mf/deps on-create-clicked)
(fn [event]
(when (kbd/enter? event)
(on-create-clicked event))))]
[:*
[:> dropdown-menu-item* {:on-click (partial team-selected (:default-team-id profile))
[:> dropdown-menu-item* {:on-click team-selected
:data-value (:default-team-id profile)
: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]
:class (stl/css :team-dropdown-item)}
[:span {:class (stl/css :penpot-icon)} i/logo-icon]
[:span {:class (stl/css :team-text)} (tr "dashboard.your-penpot")]
(when (= (:default-team-id profile) (:id team))
[:span {:class (stl/css :icon)} i/tick])]
tick-icon)]
(for [team-item (remove :is-default (vals teams))]
[:> dropdown-menu-item* {:on-click (partial team-selected (:id team-item))
:on-key-down (partial handle-select-team (:id team-item))
[:> dropdown-menu-item* {:on-click team-selected
:data-value (:id team-item)
:on-key-down handle-select-team
:id (str "teams-selector-" (:id team-item))
:class (stl/css :team-name)
:class (stl/css :team-dropdown-item)
:key (str "teams-selector-" (:id team-item))}
[:span {:class (stl/css :team-icon)}
[:img {:src (cf/resolve-team-photo-url team-item)
:alt (:name team-item)}]]
:class (stl/css :team-picture)
:alt (:name team-item)}]
[:span {:class (stl/css :team-text)
:title (:name team-item)} (:name team-item)]
(when (= (:id team-item) (:id team))
[:span {:class (stl/css :icon)} i/tick])])
[:hr {:role "separator"}]
tick-icon)])
[:hr {:role "separator"
:class (stl/css :team-separator)}]
[:> dropdown-menu-item* {:on-click on-create-clicked
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-create-clicked event)))
:on-key-down handle-creation-key-down
:id "teams-selector-create-team"
:class (stl/css :team-name :action)}
[:span {:class (stl/css :team-icon :new-team)} i/close]
:class (stl/css :team-dropdown-item :action)}
[:span {:class (stl/css :icon-wrapper)} add-icon]
[:span {:class (stl/css :team-text)} (tr "dashboard.create-new-team")]]]))
(s/def ::member-id ::us/uuid)
@ -330,130 +371,200 @@
(rx/throw error)))
leave-fn
(mf/use-fn
(mf/deps on-success on-error)
(fn [member-id]
(let [params (cond-> {} (uuid? member-id) (assoc :reassign-to member-id))]
(st/emit! (dd/leave-team (with-meta params
{:on-success on-success
:on-error on-error})))))
:on-error on-error}))))))
delete-fn
(mf/use-fn
(mf/deps team on-success on-error)
(fn []
(st/emit! (dd/delete-team (with-meta team {:on-success on-success
:on-error on-error}))))
:on-error on-error})))))
on-rename-clicked
(mf/use-fn
(mf/deps team)
(fn []
(st/emit! (modal/show :team-form {:team team})))
(st/emit! (modal/show :team-form {:team team}))))
on-leave-clicked
(mf/use-fn
(mf/deps leave-fn)
#(st/emit! (modal/show
{:type :confirm
:title (tr "modals.leave-confirm.title")
:message (tr "modals.leave-confirm.message")
:accept-label (tr "modals.leave-confirm.accept")
:on-accept leave-fn}))
:on-accept leave-fn})))
on-leave-as-owner-clicked
(mf/use-fn
(mf/deps team profile leave-fn)
(fn []
(st/emit! (dd/fetch-team-members (:id team))
(modal/show
{:type :leave-and-reassign
:profile profile
:team team
:accept leave-fn})))
:accept leave-fn}))))
leave-and-close
(mf/use-fn
(mf/deps team delete-fn)
#(st/emit! (modal/show
{:type :confirm
:title (tr "modals.leave-confirm.title")
:message (tr "modals.leave-and-close-confirm.message" (:name team))
:scd-message (tr "modals.leave-and-close-confirm.hint")
:accept-label (tr "modals.leave-confirm.accept")
:on-accept delete-fn}))
:on-accept delete-fn})))
on-delete-clicked
(mf/use-fn
(mf/deps delete-fn)
#(st/emit!
(modal/show
{:type :confirm
:title (tr "modals.delete-team-confirm.title")
:message (tr "modals.delete-team-confirm.message")
:accept-label (tr "modals.delete-team-confirm.accept")
:on-accept delete-fn}))]
:on-accept delete-fn})))
handle-members
(mf/use-fn
(mf/deps go-members)
(fn [event]
(when (kbd/enter? event)
(go-members))))
handle-invitations
(mf/use-fn
(mf/deps go-invitations)
(fn [event]
(when (kbd/enter? event)
(go-invitations))))
handle-webhooks
(mf/use-fn
(mf/deps go-webhooks)
(fn [event]
(when (kbd/enter? event)
(go-webhooks))))
handle-settings
(mf/use-fn
(mf/deps go-settings)
(fn [event]
(when (kbd/enter? event)
(go-settings))))
handle-rename
(mf/use-fn
(mf/deps on-rename-clicked)
(fn [event]
(when (kbd/enter? event)
(on-rename-clicked))))
handle-leave-and-close
(mf/use-fn
(mf/deps leave-and-close)
(fn [event]
(when (kbd/enter? event)
(leave-and-close))))
handle-leave-as-owner-clicked
(mf/use-fn
(mf/deps on-leave-as-owner-clicked)
(fn [event]
(when (kbd/enter? event)
(on-leave-as-owner-clicked))))
handle-on-leave-clicked
(mf/use-fn
(mf/deps on-leave-clicked)
(fn [event]
(when (kbd/enter? event)
(on-leave-clicked))))
handle-on-delete-clicked
(mf/use-fn
(mf/deps on-delete-clicked)
(fn [event]
(when (kbd/enter? event)
(on-delete-clicked))))]
[:*
[:> dropdown-menu-item* {:on-click go-members
:on-key-down (fn [event]
(when (kbd/enter? event)
(go-members)))
:on-key-down handle-members
:className (stl/css :team-options-item)
:id "teams-options-members"
:data-test "team-members"}
(tr "labels.members")]
[:> dropdown-menu-item* {:on-click go-invitations
:on-key-down (fn [event]
(when (kbd/enter? event)
(go-invitations)))
:on-key-down handle-invitations
:className (stl/css :team-options-item)
:id "teams-options-invitations"
:data-test "team-invitations"}
(tr "labels.invitations")]
(when (contains? cf/flags :webhooks)
[:> dropdown-menu-item* {:on-click go-webhooks
:on-key-down (fn [event]
(when (kbd/enter? event)
(go-webhooks)))
:on-key-down handle-webhooks
:className (stl/css :team-options-item)
:id "teams-options-webhooks"}
(tr "labels.webhooks")])
[:> dropdown-menu-item* {:on-click go-settings
:on-key-down (fn [event]
(when (kbd/enter? event)
(go-settings)))
:on-key-down handle-settings
:className (stl/css :team-options-item)
:id "teams-options-settings"
:data-test "team-settings"}
(tr "labels.settings")]
[:hr]
[:hr {:class (stl/css :team-option-separator)}]
(when can-rename?
[:> dropdown-menu-item* {:on-click on-rename-clicked
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-rename-clicked)))
:on-key-down handle-rename
:id "teams-options-rename"
:className (stl/css :team-options-item)
:data-test "rename-team"}
(tr "labels.rename")])
(cond
(= (count members) 1)
[:> dropdown-menu-item* {:on-click leave-and-close
:on-key-down (fn [event]
(when (kbd/enter? event)
(leave-and-close)))
:on-key-down handle-leave-and-close
:className (stl/css :team-options-item)
:id "teams-options-leave-team"}
(tr "dashboard.leave-team")]
(get-in team [:permissions :is-owner])
[:> dropdown-menu-item* {:on-click on-leave-as-owner-clicked
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-leave-as-owner-clicked)))
:on-key-down handle-leave-as-owner-clicked
:id "teams-options-leave-team"
:className (stl/css :team-options-item)
:data-test "leave-team"}
(tr "dashboard.leave-team")]
(> (count members) 1)
[:> dropdown-menu-item* {:on-click on-leave-clicked
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-leave-clicked)))
:on-key-down handle-on-leave-clicked
:className (stl/css :team-options-item)
:id "teams-options-leave-team"}
(tr "dashboard.leave-team")])
(when (get-in team [:permissions :is-owner])
[:> dropdown-menu-item* {:on-click on-delete-clicked
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-delete-clicked)))
:on-key-down handle-on-delete-clicked
:id "teams-options-delete-team"
:class (stl/css :warning)
:className (stl/css :team-options-item :warning)
:data-test "delete-team"}
(tr "dashboard.delete-team")])]))
@ -495,6 +606,10 @@
(when first-element
(dom/focus! first-element)))))))
close-team-opts-ddwn
(mf/use-fn
#(reset! show-team-opts-ddwn? false))
handle-show-opts-click
(fn [event]
(dom/stop-propagation event)
@ -519,34 +634,32 @@
[:div {:class (stl/css :sidebar-team-switch)}
[:div {:class (stl/css :switch-content)}
[:button
{:class (stl/css :current-team)
:tab-index "0"
[:button {:class (stl/css :current-team)
:on-click handle-show-team-click
:on-key-down handle-show-team-keydown}
(if (:is-default team)
[:div {:class (stl/css :team-name)}
[:span {:class (stl/css :team-icon)} i/logo-icon]
[:span {:class (stl/css :penpot-icon)} i/logo-icon]
[:span {:class (stl/css :team-text)} (tr "dashboard.default-team-name")]]
[:div {:class (stl/css :team-name)}
[:span {:class (stl/css :team-icon)}
[:img {:src (cf/resolve-team-photo-url team)
:alt (:name team)}]]
:class (stl/css :team-picture)
:alt (:name team)}]
[:span {:class (stl/css :team-text) :title (:name team)} (:name team)]])
[:span {:class (stl/css :switch-icon)} i/arrow-down]]
arrow-icon]
(when-not (:is-default team)
[:button
{:class (stl/css :switch-options)
[:button {:class (stl/css :switch-options)
:on-click handle-show-opts-click
:tab-index "0"
:on-key-down handle-show-opts-keydown}
i/actions])]
menu-icon])]
;; Teams Dropdown
[:& dropdown-menu {:show @show-teams-ddwn?
:on-close handle-close-team
:ids ids
@ -557,7 +670,7 @@
:teams teams}]]
[:& dropdown-menu {:show @show-team-opts-ddwn?
:on-close #(reset! show-team-opts-ddwn? false)
:on-close close-team-opts-ddwn
:ids options-ids
:list-class (stl/css :dropdown :options-dropdown)}
[:& team-options-dropdown {:team team
@ -577,12 +690,12 @@
(= (:id project) default-project-id))
go-projects
(mf/use-callback
(mf/use-fn
(mf/deps team)
#(st/emit! (rt/nav :dashboard-projects {:team-id (:id team)})))
go-projects-with-key
(mf/use-callback
(mf/use-fn
(mf/deps team)
#(st/emit! (rt/nav :dashboard-projects {:team-id (:id team)})
(ts/schedule-on-idle
@ -594,12 +707,12 @@
(dom/set-attribute! projects-title "tabindex" "-1")))))))
go-fonts
(mf/use-callback
(mf/use-fn
(mf/deps team)
#(st/emit! (rt/nav :dashboard-fonts {:team-id (:id team)})))
go-fonts-with-key
(mf/use-callback
(mf/use-fn
(mf/deps team)
#(st/emit! (rt/nav :dashboard-fonts {:team-id (:id team)})
(ts/schedule-on-idle
@ -610,7 +723,7 @@
(dom/focus! font-title)
(dom/set-attribute! font-title "tabindex" "-1")))))))
go-drafts
(mf/use-callback
(mf/use-fn
(mf/deps team default-project-id)
(fn []
(st/emit! (rt/nav :dashboard-files
@ -618,7 +731,7 @@
:project-id default-project-id}))))
go-drafts-with-key
(mf/use-callback
(mf/use-fn
(mf/deps team default-project-id)
#(st/emit! (rt/nav :dashboard-files {:team-id (:id team)
:project-id default-project-id})
@ -631,12 +744,12 @@
(dom/set-attribute! drafts-title "tabindex" "-1")))))))
go-libs
(mf/use-callback
(mf/use-fn
(mf/deps team)
#(st/emit! (rt/nav :dashboard-libraries {:team-id (:id team)})))
go-libs-with-key
(mf/use-callback
(mf/use-fn
(mf/deps team)
#(st/emit! (rt/nav :dashboard-libraries {:team-id (:id team)})
(ts/schedule-on-idle
@ -653,45 +766,51 @@
[:div {:class (stl/css :sidebar-content)}
[:& sidebar-team-switch {:team team :profile profile}]
[:hr]
[:& sidebar-search {:search-term search-term
:team-id (:id team)}]
[:div {:class (stl/css :sidebar-content-section)}
[:ul {:class (stl/css :sidebar-nav :no-overflow)}
[:li
{:class (stl/css :recent-projects)
:class-name (when projects? (stl/css :current))}
[:ul {:class (stl/css :sidebar-nav)}
[:li {:class (stl/css-case :recent-projects true
:sidebar-nav-item true
:current projects?)}
[:& link {:action go-projects
:class (stl/css :sidebar-link)
:keyboard-action go-projects-with-key}
[:span {:class (stl/css :element-title)} (tr "labels.projects")]]]
[:li {:class-name (when drafts? (stl/css :current))}
[:li {:class (stl/css-case :current drafts?
:sidebar-nav-item true)}
[:& link {:action go-drafts
:class (stl/css :sidebar-link)
:keyboard-action go-drafts-with-key}
[:span {:class (stl/css :element-title)} (tr "labels.drafts")]]]
[:li {:class-name (when libs? (stl/css :current))}
[:li {:class (stl/css-case :current libs?
:sidebar-nav-item true)}
[:& link {:action go-libs
:class (stl/css :sidebar-link)
:keyboard-action go-libs-with-key}
[:span {:class (stl/css :element-title)} (tr "labels.shared-libraries")]]]]]
[:hr]
[:div {:class (stl/css :sidebar-content-section)}
[:ul {:class (stl/css :sidebar-nav :no-overflow)}
[:li {:class-name (when fonts? (stl/css :current))}
[:ul {:class (stl/css :sidebar-nav)}
[:li {:class (stl/css-case :sidebar-nav-item true
:current fonts?)}
[:& link {:action go-fonts
:class (stl/css :sidebar-link)
:keyboard-action go-fonts-with-key
:data-test "fonts"}
[:span {:class (stl/css :element-title)} (tr "labels.fonts")]]]]]
[:hr]
[:div {:class (stl/css :sidebar-content-section)
:data-test "pinned-projects"}
(if (seq pinned-projects)
[:ul {:class (stl/css :sidebar-nav)}
[:ul {:class (stl/css :sidebar-nav :pinned-projects)}
(for [item pinned-projects]
[:& sidebar-project
{:item item
@ -700,25 +819,26 @@
:team-id (:id team)
:selected? (= (:id item) (:id project))}])]
[:div {:class (stl/css :sidebar-empty-placeholder)}
[:span {:class (stl/css :icon)} i/pin-refactor]
[:span {:class (stl/css :text)} (tr "dashboard.no-projects-placeholder")]])]]))
pin-icon
[:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]]))
(mf/defc profile-section
[{:keys [profile team] :as props}]
(let [show (mf/use-state false)
(let [show* (mf/use-state false)
show (deref show*)
photo (cf/resolve-profile-photo-url profile)
on-click
(mf/use-callback
(mf/use-fn
(fn [section event]
(dom/stop-propagation event)
(reset! show false)
(reset! show* false)
(if (keyword? section)
(st/emit! (rt/nav section))
(st/emit! section))))
show-release-notes
(mf/use-callback
(mf/use-fn
(fn [event]
(let [version (:main cf/version)]
(st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version}))
@ -730,48 +850,48 @@
show-comments? @show-comments*
handle-hide-comments
(mf/use-callback
(mf/use-fn
(fn []
(reset! show-comments* false)))
handle-show-comments
(mf/use-callback
(mf/use-fn
(fn []
(reset! show-comments* true)))
handle-click
(mf/use-callback
(mf/use-fn
(fn [event]
(dom/stop-propagation event)
(swap! show not)))
(swap! show* not)))
handle-key-down
(mf/use-callback
(mf/use-fn
(fn [event]
(when (kbd/enter? event)
(reset! show true))))
(reset! show* true))))
handle-close
(fn [event]
(dom/stop-propagation event)
(reset! show false))
(reset! show* false))
handle-key-down-profile
(mf/use-callback
(mf/use-fn
(mf/deps on-click)
(fn [event]
(when (kbd/enter? event)
(on-click :settings-profile event))))
handle-click-url
(mf/use-callback
(mf/use-fn
(fn [event]
(let [url (-> (dom/get-current-target event)
(dom/get-data "url"))]
(dom/open-new-window url))))
handle-keydown-url
(mf/use-callback
(mf/use-fn
(fn [event]
(let [url (-> (dom/get-current-target event)
(dom/get-data "url"))]
@ -779,35 +899,41 @@
(dom/open-new-window url)))))
handle-show-release-notes
(mf/use-callback
(mf/use-fn
(mf/deps show-release-notes)
(fn [event]
(when (kbd/enter? event)
(show-release-notes))))
handle-feedback-click
(mf/use-callback
(mf/use-fn
(mf/deps on-click)
#(on-click :settings-feedback %))
handle-feedback-keydown
(mf/use-callback
(mf/use-fn
(mf/deps on-click)
(fn [event]
(when (kbd/enter? event)
(on-click :settings-feedback event))))
handle-logout-click
(mf/use-callback
(mf/use-fn
(mf/deps on-click)
#(on-click (du/logout) %))
handle-logout-keydown
(mf/use-callback
(mf/use-fn
(mf/deps on-click)
(fn [event]
(when (kbd/enter? event)
(on-click (du/logout) event))))]
(on-click (du/logout) event))))
handle-set-profile
(mf/use-fn
(mf/deps on-click)
(fn [event]
(on-click :settings-profile event)))]
[:*
(when (and team profile)
@ -825,77 +951,89 @@
:on-key-down handle-key-down
:data-test "profile-btn"}
[:img {:src photo
:class (stl/css :profile-img)
:alt (:fullname profile)}]
[:span (:fullname profile)]]
[:span {:class (stl/css :profile-fullname)} (:fullname profile)]]
[:& dropdown-menu {:on-close handle-close :show @show}
[:ul {:class (stl/css :dropdown)}
[:li {:tab-index (if @show "0" "-1")
:on-click (partial on-click :settings-profile)
[:& dropdown-menu {:on-close handle-close :show show :list-class (stl/css :profile-dropdown)}
[:li {:tab-index (if show "0" "-1")
:class (stl/css :profile-dropdown-item)
:on-click handle-set-profile
:on-key-down handle-key-down-profile
:data-test "profile-profile-opt"}
[:span {:class (stl/css :text)} (tr "labels.your-account")]]
(tr "labels.your-account")]
[:li {:class (stl/css :separator)
:tab-index (if @show "0" "-1")
[:li {:class (stl/css :profile-separator)}]
[:li {:class (stl/css :profile-dropdown-item)
: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")]]
(tr "labels.help-center")]
[:li {:tab-index (if @show "0" "-1")
[:li {:tab-index (if show "0" "-1")
:class (stl/css :profile-dropdown-item)
: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")]]
(tr "labels.community")]
[:li {:tab-index (if @show "0" "-1")
[:li {:tab-index (if show "0" "-1")
:class (stl/css :profile-dropdown-item)
: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")]]
(tr "labels.tutorials")]
[:li {:tab-index (if @show "0" "-1")
[:li {:tab-index (if show "0" "-1")
:class (stl/css :profile-dropdown-item)
:on-click show-release-notes
:on-key-down handle-show-release-notes}
[:span {:class (stl/css :text)} (tr "labels.release-notes")]]
(tr "labels.release-notes")]
[:li {:class (stl/css :separator)
:tab-index (if @show "0" "-1")
[:li {:class (stl/css :profile-separator)}]
[:li {:class (stl/css :profile-dropdown-item)
: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")]]
(tr "labels.libraries-and-templates")]
[:li {:tab-index (if @show "0" "-1")
[:li {:tab-index (if show "0" "-1")
:class (stl/css :profile-dropdown-item)
: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")]]
(tr "labels.github-repo")]
[:li {:tab-index (if @show "0" "-1")
[:li {:tab-index (if show "0" "-1")
:class (stl/css :profile-dropdown-item)
: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")]]
(tr "auth.terms-of-service")]
[:li {:class (stl/css :profile-separator)}]
(when (contains? cf/flags :user-feedback)
[:li {:class (stl/css :separator)
:tab-index (if @show "0" "-1")
[:li {:class (stl/css :profile-dropdown-item)
: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")]])
(tr "labels.give-feedback")])
[:li {:class (stl/css :separator)
:tab-index (if @show "0" "-1")
[:li {:class (stl/css :profile-dropdown-item :item-with-icon)
: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")]]]]
exit-icon
(tr "labels.logout")]]
(when (and team profile)
[:& comments-icon

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

@ -7,498 +7,375 @@
@use "common/refactor/common-refactor.scss" as *;
@use "common/refactor/common-dashboard";
// SIDEBAR COMPONENT
.dashboard-sidebar {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
background-color: var(--panel-background-color);
border-right: $s-1 solid $db-quaternary;
margin: 0 $s-16 0 0;
display: grid;
grid-template-rows: 1fr auto;
height: 100%;
width: 100%;
padding: $s-16 0 0 0;
margin: 0 $s-16 0 0;
border-right: $s-1 solid var(--panel-border-color);
background-color: var(--panel-background-color);
z-index: $z-index-1;
display: flex;
flex-direction: column;
height: 100%;
}
//SIDEBAR CONTENT COMPONENT
.sidebar-content {
display: flex;
flex-direction: column;
display: grid;
grid-template-rows: auto auto auto auto 1fr;
gap: $s-24;
height: 100%;
overflow-y: auto;
padding: 0;
hr {
border-color: transparent;
margin: $s-12 $s-16;
}
overflow-y: auto;
}
// SIDEBAR TEAM SWITCH
.sidebar-team-switch {
position: relative;
display: flex;
margin: $s-4 $s-16;
}
.switch-content {
background-color: $db-tertiary;
border-radius: $br-8;
.switch-content {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
height: $s-48;
display: flex;
width: 100%;
border: $s-1 solid $db-tertiary;
border-radius: $br-8;
border: $s-1 solid var(--menu-background-color);
background-color: var(--menu-background-color);
}
.current-team {
@include buttonStyle;
display: grid;
align-items: center;
svg {
fill: #8f9da3;
}
}
.switch-icon {
display: flex;
align-items: center;
justify-content: center;
svg {
fill: $df-secondary;
width: $s-12;
height: $s-12;
}
}
.current-team {
grid-template-columns: 1fr auto;
gap: $s-8;
height: 100%;
cursor: pointer;
display: flex;
align-items: center;
flex-grow: 1;
font-size: $fs-14;
padding: 0 $s-12;
background-color: transparent;
border: none;
}
}
.team-name {
flex-grow: 1;
display: flex;
.team-name {
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
gap: $s-12;
height: $s-40;
align-items: center;
}
}
.team-text {
color: $df-primary;
.team-text {
@include textEllipsis;
@include smallTitleTipography;
width: $s-144;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: left;
}
.team-icon {
display: flex;
align-items: center;
padding-right: $s-12;
img {
border-radius: 50%;
flex-shrink: 0;
height: $s-24;
width: $s-24;
}
color: var(--menu-foreground-color-hover);
}
// This icon still use the old svg
.penpot-icon {
@include flexCenter;
svg {
fill: var(--icon-foreground);
width: $s-24;
height: $s-24;
}
}
}
.switch-options {
.team-picture {
@include flexCenter;
border-radius: 50%;
height: $s-24;
width: $s-24;
}
.arrow-icon {
@extend .button-icon;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
.switch-options {
@include buttonStyle;
@include flexCenter;
max-width: $s-24;
min-width: $s-28;
height: 100%;
border-left: $s-1 solid $db-primary;
border-left: $s-1 solid var(--panel-background-color);
background-color: transparent;
}
svg {
fill: $df-secondary;
width: $s-16;
height: $s-12;
}
}
.menu-icon {
@extend .button-icon;
stroke: var(--icon-foreground);
}
.dropdown {
// DROPDOWNS
.teams-dropdown {
@extend .menu-dropdown;
left: 0;
top: $s-52;
height: fit-content;
max-height: $s-480;
min-width: $s-248;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.team-dropdown-item {
@extend .menu-item-base;
display: grid;
grid-template-columns: $s-24 1fr auto;
gap: $s-8;
height: $s-40;
}
.action {
--sidebar-action-icon-color: var(--icon-foreground);
--sidebar-icon-backgroun-color: var(--color-background-secondary);
&:hover {
--sidebar-action-icon-color: var(--color-background-secondary);
--sidebar-icon-backgroun-color: var(--color-accent-primary);
}
}
.icon-wrapper {
@include flexCenter;
width: $s-24;
height: $s-24;
margin-right: $s-12;
border-radius: 50%;
background-color: var(--sidebar-icon-backgroun-color);
}
.add-icon {
@extend .button-icon;
width: $s-24;
height: $s-24;
stroke: var(--sidebar-action-icon-color);
}
.team-separator {
border-top: $s-1 solid var(--dropdown-separator-color);
margin: 0;
}
.tick-icon {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
.options-dropdown {
@extend .menu-dropdown;
right: $s-2;
top: $s-52;
max-height: $s-480;
&:not(.teams-dropdown) {
min-width: $s-160;
}
}
}
.dropdown {
@include menuShadow;
position: absolute;
z-index: $z-index-4;
background-color: $db-tertiary;
border: $s-1 solid $db-quaternary;
border-radius: $br-8;
.separator {
border-color: transparent;
margin-top: $s-12;
}
li {
border-radius: $br-8;
.team-options-item {
@extend .menu-item-base;
height: $s-40;
margin: $s-6;
}
display: flex;
align-items: center;
cursor: pointer;
font-size: $fs-14;
padding: $s-6 $s-16;
.warning {
color: var(--element-foreground-warning);
}
&:hover {
background-color: $db-quaternary;
}
svg {
height: $s-12;
width: $s-12;
}
}
hr {
border-color: transparent;
.team-option-separator {
height: $s-1;
margin: 0;
}
&.options-dropdown {
li {
color: $df-primary;
&.warning {
color: var(--element-foreground-warning);
}
}
}
}
.teams-dropdown {
background-color: $db-tertiary;
border-radius: $br-8;
border: $s-1 solid $db-quaternary;
min-width: $s-248;
left: 0;
top: $s-52;
max-height: $s-480;
overflow-x: hidden;
overflow-y: auto;
li {
border-radius: $br-8;
height: $s-40;
padding: 0 $s-6;
margin: $s-6;
svg {
fill: $df-secondary;
}
&:hover {
background-color: $db-quaternary;
.team-icon {
&.new-team {
background-color: $da-primary;
color: $db-primary;
svg {
fill: $db-secondary;
}
}
}
}
.team-icon {
display: flex;
align-items: center;
}
.team-text {
color: $df-primary;
width: $s-168;
}
&.action {
.team-icon {
background-color: #2e3434;
background-color: var(--new-team-button-background-color);
border-radius: 50%;
height: $s-24;
margin-right: $s-12;
padding: $s-6;
width: $s-24;
svg {
height: $s-12;
width: $s-12;
}
}
}
}
}
.sidebar-empty-placeholder {
padding: $s-12;
color: $df-secondary;
display: flex;
align-items: center;
.icon {
padding: 0 $s-12;
svg {
fill: none;
stroke: currentColor;
width: $s-12;
height: $s-12;
}
}
.text {
font-size: $fs-12;
}
}
.sidebar-search {
align-items: center;
border: $s-1 solid transparent;
display: flex;
margin: $s-6 $s-16;
background-color: $db-tertiary;
border-radius: $br-8;
margin-bottom: $s-32;
margin-top: 0;
position: relative;
.input-text {
background: transparent;
border: 0;
font-size: $fs-14;
margin: 0;
width: 100%;
height: $s-40;
border-radius: $br-8;
color: $df-primary;
max-width: 100%;
padding: $s-6 $s-12;
&:focus,
&:focus-within {
border: $s-1 solid $da-primary;
}
}
::placeholder {
color: $df-secondary;
}
.search,
.clear-search {
align-items: center;
cursor: pointer;
display: flex;
height: $s-24;
margin-left: auto;
padding: 0 $s-8;
width: $s-32;
position: absolute;
top: calc(50% - $s-12);
right: $s-2;
svg {
fill: $df-secondary;
height: $s-16;
width: $s-16;
}
}
.clear-search svg {
transform: rotate(45deg);
&:hover {
fill: $da-primary;
}
}
border-top: $s-1 solid var(--dropdown-separator-color);
}
// Sections
.sidebar-nav {
display: flex;
flex-direction: column;
overflow-y: auto;
margin: 0;
user-select: none;
overflow: none;
}
&.no-overflow {
overflow: unset;
}
.pinned-projects {
overflow-y: auto;
}
& > li {
align-items: center;
.sidebar-nav-item {
cursor: pointer;
display: flex;
flex-shrink: 0;
&.project-element {
padding: $s-8 $s-8 $s-8 $s-24;
&:hover {
background-color: var(--sidebar-element-background-color-hover);
span {
color: var(--sidebar-element-foreground-color-hover);
}
}
a {
&.current {
background-color: var(--sidebar-element-background-color-selected);
.element-title {
color: var(--sidebar-element-foreground-color-selected);
}
}
}
.recent-projects svg {
stroke: var(--main-icon-foreground);
}
.sidebar-link {
display: block;
padding: $s-8 $s-8 $s-8 $s-24;
font-weight: $fw400;
width: 100%;
&:hover {
text-decoration: none;
}
}
}
svg {
fill: $db-secondary;
margin-right: $s-8;
height: $s-12;
width: $s-12;
}
.project-element {
padding: $s-8 $s-8 $s-8 $s-24;
}
.element-title {
color: $df-secondary;
.element-title {
@include textEllipsis;
color: var(--sidebar-element-foreground-color);
font-size: $fs-14;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&.recent-projects {
svg {
fill: $df-primary;
}
}
// Pinned projects
input.element-title {
border: 0;
height: $s-32;
padding: $s-6;
margin: 0;
.sidebar-empty-placeholder {
padding: $s-12;
color: var(--empty-message-foreground-color);
display: flex;
align-items: center;
}
.pin-icon {
@extend .button-icon-small;
stroke: var(--icon-foreground);
margin: 0 $s-12;
}
.empty-text {
font-size: $fs-12;
}
// Search
.sidebar-search {
position: relative;
display: grid;
grid-template-columns: 1fr;
align-items: center;
border: $s-1 solid transparent;
margin: 0 $s-16;
border-radius: $br-8;
background-color: var(--search-bar-input-background-color);
}
.input-text {
@include smallTitleTipography;
height: $s-40;
width: 100%;
background-color: $df-primary;
}
.close {
background-color: $df-primary;
cursor: pointer;
padding-left: $s-6;
svg {
fill: $df-secondary;
height: $s-16;
transform: rotate(45deg) translateY(7px);
width: $s-16;
padding: $s-6 $s-12;
margin: 0;
}
}
border: transparent;
border-radius: $br-8;
background: transparent;
color: var(--search-bar-foreground-color);
.element-subtitle {
color: $df-secondary;
font-style: italic;
}
&:hover {
background-color: $db-secondary;
span {
color: $da-primary;
}
}
&.current {
background-color: $db-quaternary;
.element-title {
color: $da-primary;
}
&:focus,
&:focus-within,
&:focus-visible {
outline: none;
border: $s-1 solid var(--search-bar-input-border-color-focus);
}
::placeholder {
color: var(--search-bar-placeholder-foreground-color);
}
}
.search-btn {
@include buttonStyle;
@include flexCenter;
position: absolute;
right: 0;
height: $s-24;
width: $s-32;
padding: 0 $s-8;
}
.search-icon,
.clear-search-btn {
@extend .button-icon;
--sidebar-search-foreground-color: var(--search-bar-icon-foreground-color);
stroke: var(--sidebar-search-foreground-color);
}
.clear-search-btn:hover {
--sidebar-search-foreground-color: var(--search-bar-icon-foreground-color-hover);
}
// Profile
.profile-section {
align-items: center;
cursor: pointer;
display: flex;
padding: $s-12 $s-16;
position: relative;
background-color: $db-tertiary;
border-top: $s-1 solid $db-quaternary;
.profile {
align-items: center;
display: grid;
grid-template-columns: 1fr auto;
padding: $s-12 $s-16;
border-top: $s-1 solid var(--panel-border-color);
background-color: var(--profile-section-background-color);
cursor: pointer;
display: flex;
flex-grow: 1;
}
span {
.profile {
display: grid;
grid-template-columns: auto 1fr;
gap: $s-8;
cursor: pointer;
}
.profile-fullname {
@include smallTitleTipography;
@include text-ellipsis;
color: $df-primary;
margin: $s-12;
font-size: $fs-14;
align-self: center;
max-width: $s-160;
}
color: var(--profile-foreground-color);
}
img {
border-radius: 50%;
flex-shrink: 0;
.profile-img {
height: $s-40;
width: $s-40;
}
svg {
height: $s-12;
margin-left: auto;
margin-right: $s-8;
width: $s-12;
}
}
.dropdown {
left: $s-16;
bottom: $s-44;
background-color: var(--profile-drowpdown-background-color);
border: $s-1 solid $db-tertiary;
border-radius: $br-8;
min-width: $s-252;
@include animation(0, 0.2s, fadeInUp);
li {
font-size: $fs-14;
padding: $s-8 $s-16;
svg {
fill: $df-secondary;
margin-right: $s-8;
height: $s-12;
width: $s-12;
}
.text {
color: $df-primary;
}
&.separator {
border-top: $s-1 solid transparent;
}
}
}
border-radius: $br-circle;
}
.profile-dropdown {
@extend .menu-dropdown;
left: $s-16;
bottom: $s-72;
min-width: $s-252;
// TODO ADD animation fadeInUp
}
.profile-dropdown-item {
@extend .menu-item-base;
@include smallTitleTipography;
height: $s-40;
padding: $s-8 $s-16;
}
.profile-separator {
height: $s-6;
}
.item-with-icon {
display: grid;
grid-template-columns: auto 1fr;
gap: $s-8;
}
.exit-icon {
@extend .button-icon;
stroke: var(--icon-foreground);
}

4
frontend/src/app/main/ui/dashboard/team_form.cljs
View file

@ -89,7 +89,9 @@
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-container)}
[:& fm/form {:form form :on-submit on-submit}
[:& fm/form {:form form
:on-submit on-submit
:class (stl/css :team-form)}
[:div {:class (stl/css :modal-header)}
(if team

5
frontend/src/app/main/ui/dashboard/team_form.scss
View file

@ -31,6 +31,10 @@
margin-bottom: $s-24;
}
.team-form {
min-width: $s-400;
}
.group-name-input {
@extend .input-element-label;
label {
@ -44,7 +48,6 @@
input {
@include bodySmallTypography;
margin-top: $s-8;
}
}
}

2
frontend/src/app/main/ui/icons.cljs
View file

@ -348,6 +348,7 @@
(def ^:icon easing-ease-in-out-refactor (icon-xref :easing-ease-in-out-refactor))
(def ^:icon effects-refactor (icon-xref :effects-refactor))
(def ^:icon elipse-refactor (icon-xref :elipse-refactor))
(def ^:icon exit-refactor (icon-xref :exit-refactor))
(def ^:icon expand-refactor (icon-xref :expand-refactor))
(def ^:icon feedback-refactor (icon-xref :feedback-refactor))
(def ^:icon fill-content-refactor (icon-xref :fill-content-refactor))
@ -394,6 +395,7 @@
(def ^:icon layers-refactor (icon-xref :layers-refactor))
(def ^:icon locate-refactor (icon-xref :locate-refactor))
(def ^:icon lock-refactor (icon-xref :lock-refactor))
(def ^:icon logo-refactor (icon-xref :penpot-logo-icon)) ;; This icon will not change
(def ^:icon library-refactor (icon-xref :library-refactor))
(def ^:icon margin-bottom-refactor (icon-xref :margin-bottom-refactor))
(def ^:icon margin-left-refactor (icon-xref :margin-left-refactor))

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

@ -33,6 +33,7 @@
:links (:links message)
:content (:content message)}
is-context-msg (and (nil? (:timeout message)) (nil? (:actions message)))
is-toast-msg (or (= :toast (:notification-type message)) (some? (:timeout message)))
is-inline-msg (or (= :inline (:notification-type message)) (and (some? (:position message)) (= :floating (:position message))))]
@ -42,5 +43,7 @@
[:& toast-notification toast-message]
is-inline-msg
[:& inline-notification inline-message]
is-context-msg
[:& context-notification context-message]
:else
[:& context-notification context-message]))))
[:& toast-notification toast-message]))))

8
frontend/src/app/main/ui/notifications/toast_notification.scss
View file

@ -44,10 +44,10 @@
}
.info {
--bg-color: var(--alert-background-color-info);
--fg-color: var(--alert-text-foreground-color-info);
--icon-color: var(--alert-icon-foreground-color-info);
--border-color: var(--alert-border-color-info);
--toast-notification-bg-color: var(--alert-background-color-info);
--toast-notification-fg-color: var(--alert-text-foreground-color-info);
--toast-notification-icon-color: var(--alert-icon-foreground-color-info);
--toast-notification-border-color: var(--alert-border-color-info);
}
.default {

1
frontend/src/app/main/ui/shapes/text/styles.cljs
View file

@ -21,7 +21,6 @@
(let [valign (:vertical-align node "top")
base #js {:height (fmt/format-pixels height)
:width (fmt/format-pixels width)
:fontFamily "sourcesanspro"
:display "flex"
:whiteSpace "break-spaces"}]
(cond-> base

1
frontend/src/app/main/ui/viewer/share_link.cljs
View file

@ -135,6 +135,7 @@
(fn [_]
(wapi/write-to-clipboard current-link)
(st/emit! (msg/show {:type :info
:notification-type :toast
:content (tr "common.share-link.link-copied-success")
:timeout 1000})))

8
frontend/src/app/main/ui/workspace/shapes/frame.cljs
View file

@ -107,9 +107,9 @@
(-> (image-size href)
(p/then
(fn [{:keys [width height]}]
(when (or (not (mth/close? width fixed-width 2))
(not (mth/close? height fixed-height 2)))
(st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame"))))))))
(when (or (not (mth/close? width fixed-width 5))
(not (mth/close? height fixed-height 5)))
(st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame" "check-thumbnail-size"))))))))
(defn root-frame-wrapper-factory
[shape-wrapper]
@ -175,7 +175,7 @@
(mf/with-effect []
(when-not (some? thumbnail-uri)
(tm/schedule-on-idle
#(st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame"))))
#(st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame" "root-frame"))))
#(when-let [task (mf/ref-val task-ref)]
(d/close! task)))

6
frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
View file

@ -224,10 +224,10 @@
:on-double-click rename-color-clicked}
(if (= (:name color) default-name)
[:span {:class (stl/css :default-name-only)} default-name]
[:span {:class (stl/css :default-name)} default-name]
[:*
[:span {:class (stl/css :name)} (:name color)]
[:span {:class (stl/css :default-name)} default-name]])])
(:name color)
[:span {:class (stl/css :default-name :default-name-with-color)} default-name]])])
(when local?
[:& cmm/assets-context-menu

36
frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
View file

@ -6,10 +6,15 @@
@import "refactor/common-refactor.scss";
// TODO: we should be using subgrid in the common "assets component" to avoid
// using this SCSS variable here (we cannot use a CSS var in this CSS module because
// the elements are not part of the same cascade).
$assets-button-width: $s-28;
.assets-btn {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
width: $assets-button-width;
padding: 0;
border-radius: $br-8;
svg {
@ -28,10 +33,12 @@
.asset-list-item {
position: relative;
display: flex;
display: grid;
grid-template-columns: auto 1fr #{$assets-button-width};
align-items: center;
height: $s-32;
padding: $s-8;
padding-inline-end: 0;
margin-bottom: $s-4;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
@ -48,7 +55,6 @@
@include bodySmallTypography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
margin: 0;
color: var(--layer-row-foreground-color);
@ -63,25 +69,23 @@
@include flexCenter;
height: 100%;
justify-content: flex-start;
margin-right: $s-4;
margin-inline-end: $s-4;
}
.name-block {
@include bodySmallTypography;
display: grid;
grid-template-columns: auto 1fr;
margin: 0;
overflow: hidden;
.default-name-only,
.name {
color: var(--assets-item-name-foreground-color);
margin-right: $s-6;
@include textEllipsis;
}
.default-name {
min-width: 0;
margin: 0;
color: var(--assets-item-name-foreground-color);
}
.default-name {
margin-inline-start: $s-4;
color: var(--assets-item-name-foreground-color-rest);
}
}
.default-name-with-color {
margin-left: $s-6;
}
.element-name {

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -380,7 +380,8 @@
{:value "" :label (tr "workspace.options.interaction-none")})]
destination-options
(mf/with-memo [frames-opts default-opts]
(d/concat-vec default-opts frames-opts))
(let [sorted-frames-opts (sort-by :label frames-opts)]
(d/concat-vec default-opts sorted-frames-opts)))
shape-parents-opts (get-shared-frames-options shape-parents)

22
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -918,8 +918,11 @@
on-gap-change
(fn [multiple? type val]
(let [val (mth/finite val 0)]
(if ^boolean multiple?
(cond
^boolean multiple?
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
(some? type)
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
;; Padding
@ -941,7 +944,7 @@
(and (= type :simple) (= prop :p2))
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
:else
(some? prop)
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))))
;; Grid-direction
@ -1126,16 +1129,16 @@
:on-change on-column-justify-change}]
[:& justify-grid-row {:is-column false
:value grid-justify-content-row
:on-change on-row-justify-change}]]]
:on-change on-row-justify-change}]]
[:div {:class (stl/css :row)}
[:& gap-section {:on-change on-gap-change
:value (:layout-gap values)}]]
[:div {:class (stl/css :row :padding-section)}
[:& padding-section {:value (:layout-padding values)
:type (:layout-padding-type values)
:on-change-style on-padding-type-change
:on-change on-padding-change}]]
:on-change on-padding-change}]]]
nil))]))
@ -1156,9 +1159,10 @@
(mf/use-fn
(mf/deps ids)
(fn [multiple? type val]
(let [val (mth/finite val 0)]
(if multiple?
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}}))))))
;; Padding
on-padding-type-change
@ -1169,6 +1173,7 @@
on-padding-change
(fn [type prop val]
(let [val (mth/finite val 0)]
(cond
(and (= type :simple) (= prop :p1))
(st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}}))
@ -1177,7 +1182,7 @@
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
:else
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}})))))
;; Align grid
align-items-row (:layout-align-items values)
@ -1308,7 +1313,8 @@
:on-change on-row-justify-change}]
[:button {:on-click handle-locate-grid
:class (stl/css :locate-button)}
:class (stl/css :locate-button)
:title (tr "workspace.layout_grid.editor.top-bar.locate.tooltip")}
i/locate-refactor]]
[:div {:class (stl/css :row)}

17
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
View file

@ -736,20 +736,23 @@
[track-type value]
(cond
(str/ends-with? value "%")
[:percent value-int]
[:percent (d/nilv value-int 50)]
(str/ends-with? value "FR")
[:flex value-int]
[:flex (d/nilv value-int 1)]
(some? value-int)
[:fixed value-int]
[:fixed (d/nilv value-int 100)]
(or (= value "AUTO") (= "" value))
[:auto nil])]
:else
[:auto nil])
track-data (when (some? track-type) {:type track-type :value value})]
(dom/set-value! (mf/ref-val track-input-ref) (format-size track-data))
(if (some? track-type)
(do (st/emit! (dwsl/change-layout-track [(:id shape)] type index {:type track-type :value value}))
(dom/set-data! target "default-value" (format-size {:type track-type :value value})))
(do (st/emit! (dwsl/change-layout-track [(:id shape)] type index track-data))
(dom/set-data! target "default-value" (format-size track-data)))
(obj/set! target "value" (dom/get-attribute target "data-default-value"))))))
handle-keydown-track-input

3
frontend/translations/en.po
View file

@ -3508,6 +3508,9 @@ msgstr "Editing grid"
msgid "workspace.layout_grid.editor.top-bar.locate"
msgstr "Locate"
msgid "workspace.layout_grid.editor.top-bar.locate.tooltip"
msgstr "Locate grid layout"
msgid "workspace.layout_grid.editor.top-bar.done"
msgstr "Done"

3
frontend/translations/es.po
View file

@ -3570,6 +3570,9 @@ msgstr "Editando rejilla"
msgid "workspace.layout_grid.editor.top-bar.locate"
msgstr "Mostrar"
msgid "workspace.layout_grid.editor.top-bar.locate.tooltip"
msgstr "Mostrar grid layout"
msgid "workspace.layout_grid.editor.top-bar.done"
msgstr "Hecho"