3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-19 21:36:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix typography dropdown menus being clipped out in the left sidebar

Browse source 
Co-authored-by: Belén Albeza <belen@hey.com>
This commit is contained in:
Eva 2024-01-15 13:59:55 +01:00 • committed by Alonso Torres
parent a84b23168d
commit 5cfc135791
18 changed files with 118 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -159,11 +159,6 @@
} }
} }
} }
.assets-bar .tool-window {
flex: none;
height: auto;
}
} }
.empty { .empty {

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

@ -19,7 +19,7 @@
(mf/defc tab-element (mf/defc tab-element
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [children]}] [{:keys [children]}]
[:div {:class (stl/css :tab-element)} children]) children)
(mf/defc tab-container (mf/defc tab-container
{::mf/wrap-props false} {::mf/wrap-props false}
@ -41,8 +41,8 @@
(when (fn? on-change-tab) (when (fn? on-change-tab)
(on-change-tab id)))))] (on-change-tab id)))))]
[:div {:class (stl/css :tab-container)} [:section {:class (stl/css :tab-container)}
[:div {:class (dm/str header-class " " (stl/css :tab-container-tabs))} [:header {:class (dm/str header-class " " (stl/css :tab-container-tabs))}
(when ^boolean collapsable (when ^boolean collapsable
[:button [:button
{:on-click handle-collapse {:on-click handle-collapse

25
frontend/src/app/main/ui/components/tab_container.scss
View file

@ -7,28 +7,15 @@
.tab-container { .tab-container {
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: $s-32 1fr;
grid-template-columns: 100%;
height: 100%;
.tab-container-content {
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.tab-element {
flex: 1;
height: 100%; height: 100%;
} }
}
.tab-container-tabs { .tab-container-tabs {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
gap: $s-2; gap: $s-2;
height: $s-32;
border-radius: $br-8; border-radius: $br-8;
background: var(--color-background-secondary); background: var(--color-background-secondary);
padding: $s-2; padding: $s-2;
@ -72,6 +59,7 @@
} }
} }
} }
.collapse-sidebar { .collapse-sidebar {
@include flexCenter; @include flexCenter;
@include buttonStyle; @include buttonStyle;
@ -103,3 +91,10 @@
} }
} }
} }
.tab-container-content {
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}

1
frontend/src/app/main/ui/modal.scss
View file

@ -2,7 +2,6 @@
:global(:root) { :global(:root) {
--s-4: 0.25rem; --s-4: 0.25rem;
--layer-indentation-size: calc(var(--s-4) * 5);
} }
.modal-wrapper { .modal-wrapper {

8
frontend/src/app/main/ui/workspace.scss
View file

@ -16,14 +16,16 @@
:global(:root) { :global(:root) {
--s-4: 0.25rem; --s-4: 0.25rem;
--layer-indentation-size: calc(var(--s-4) * 5); --layer-indentation-size: calc(var(--s-4) * 6);
} }
.workspace { .workspace {
@extend .new-scrollbar; @extend .new-scrollbar;
width: 100vw; width: 100vw;
height: 100%; height: 100vh;
user-select: none; max-height: 100vh;
overflow: auto; // TODO: change to hidden
user-select: one;
display: grid; display: grid;
grid-template-areas: "left-sidebar viewport right-sidebar"; grid-template-areas: "left-sidebar viewport right-sidebar";
grid-template-rows: 1fr; grid-template-rows: 1fr;

5
frontend/src/app/main/ui/workspace/left_header.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.left-header (ns app.main.ui.workspace.left-header
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm]
[app.common.files.helpers :as cfh] [app.common.files.helpers :as cfh]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.config :as cf] [app.config :as cf]
@ -724,7 +725,7 @@
(mf/defc left-header (mf/defc left-header
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [file layout project page-id]}] [{:keys [file layout project page-id class]}]
(let [file-id (:id file) (let [file-id (:id file)
file-name (:name file) file-name (:name file)
project-id (:id project) project-id (:id project)
@ -780,7 +781,7 @@
(mf/with-effect [editing?] (mf/with-effect [editing?]
(when ^boolean editing? (when ^boolean editing?
(dom/select-text! (mf/ref-val input-ref)))) (dom/select-text! (mf/ref-val input-ref))))
[:header {:class (stl/css :workspace-header-left)} [:header {:class (dm/str class " " (stl/css :workspace-header-left))}
[:a {:on-click go-back [:a {:on-click go-back
:class (stl/css :main-icon)} i/logo-icon] :class (stl/css :main-icon)} i/logo-icon]
[:div {:alt (tr "workspace.sitemap") [:div {:alt (tr "workspace.sitemap")

1
frontend/src/app/main/ui/workspace/left_header.scss
View file

@ -9,7 +9,6 @@
.workspace-header-left { .workspace-header-left {
display: flex; display: flex;
align-items: center; align-items: center;
height: $s-48;
padding: $s-8 $s-8 $s-4 $s-8; padding: $s-8 $s-8 $s-4 $s-8;
} }

27
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -41,6 +41,7 @@
section (cond (or mode-inspect? (contains? layout :layers)) :layers section (cond (or mode-inspect? (contains? layout :layers)) :layers
(contains? layout :assets) :assets) (contains? layout :assets) :assets)
shortcuts? (contains? layout :shortcuts) shortcuts? (contains? layout :shortcuts)
show-debug? (contains? layout :debug-panel) show-debug? (contains? layout :debug-panel)
@ -65,44 +66,54 @@
:global/three-row (and (> size 300) (<= size 400)) :global/three-row (and (> size 300) (<= size 400))
:global/four-row (> size 400)) :global/four-row (> size 400))
:style #js {"--width" (dm/str size "px")}} :style #js {"--width" (dm/str size "px")}}
[:& left-header {:file file :layout layout :project project :page-id page-id}]
[:& left-header {:file file :layout layout :project project :page-id page-id
:class (stl/css :left-header)}]
[:div {:on-pointer-down on-pointer-down [:div {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move :on-pointer-move on-pointer-move
:class (stl/css :resize-area)}] :class (stl/css :resize-area)}]
[:div {:class (stl/css :settings-bar-inside)} [:*
(cond (cond
(true? shortcuts?) (true? shortcuts?)
[:& shortcuts-container] [:& shortcuts-container {:class (stl/css :settings-bar-content)}]
(true? show-debug?) (true? show-debug?)
[:& debug-panel] [:& debug-panel {:class (stl/css :settings-bar-content)}]
:else :else
[:div {:class (stl/css :tabs-wrapper)} [:div {:class (stl/css :settings-bar-content)}
[:& tab-container [:& tab-container
{:on-change-tab on-tab-change {:on-change-tab on-tab-change
:selected section :selected section
:collapsable true :collapsable true
:handle-collapse handle-collapse :handle-collapse handle-collapse
:header-class (stl/css :tab-spacing)} :header-class (stl/css :tab-spacing)}
[:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
[:div {:class (stl/css :layers-tab) [:& tab-element {:id :layers
:title (tr "workspace.sidebar.layers")}
[:article {:class (stl/css :layers-tab)
:style #js {"--height" (str size-pages "px")}} :style #js {"--height" (str size-pages "px")}}
[:& sitemap {:layout layout [:& sitemap {:layout layout
:toggle-pages toggle-pages :toggle-pages toggle-pages
:show-pages? @show-pages? :show-pages? @show-pages?
:size size-pages}] :size size-pages}]
(when @show-pages? (when @show-pages?
[:div {:class (stl/css :resize-area-horiz) [:div {:class (stl/css :resize-area-horiz)
:on-pointer-down on-pointer-down-pages :on-pointer-down on-pointer-down-pages
:on-lost-pointer-capture on-lost-pointer-capture-pages :on-lost-pointer-capture on-lost-pointer-capture-pages
:on-pointer-move on-pointer-move-pages}]) :on-pointer-move on-pointer-move-pages}])
[:& layers-toolbox {:size-parent size [:& layers-toolbox {:size-parent size
:size size-pages}]]] :size size-pages}]]]
(when-not ^boolean mode-inspect? (when-not ^boolean mode-inspect?
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")} [:& tab-element {:id :assets
:title (tr "workspace.toolbar.assets")}
[:& assets-toolbox]])]])]])) [:& assets-toolbox]])]])]]))
;; --- Right Sidebar (Component) ;; --- Right Sidebar (Component)

83
frontend/src/app/main/ui/workspace/sidebar.scss
View file

@ -10,52 +10,50 @@ $width-settings-bar: $s-276;
$width-settings-bar-max: $s-500; $width-settings-bar-max: $s-500;
.left-settings-bar { .left-settings-bar {
display: grid;
grid-template-areas:
"header header"
"content resize";
grid-template-rows: $s-48 1fr;
grid-template-columns: 1fr 0;
position: relative; position: relative;
grid-area: left-sidebar; grid-area: left-sidebar;
min-width: $width-settings-bar; min-width: $width-settings-bar;
max-width: $width-settings-bar-max; max-width: $width-settings-bar-max;
width: var(--width, $width-settings-bar); width: var(--width, $width-settings-bar);
height: 100%;
background-color: var(--panel-background-color); background-color: var(--panel-background-color);
height: 100vh;
max-height: 100vh;
.resize-area {
grid-area: resize;
}
}
.left-header {
grid-area: header;
}
.settings-bar-content {
grid-area: content;
right: calc(-1 * $s-8);
}
.resize-area { .resize-area {
position: absolute; position: absolute;
right: calc(-1 * $s-8); top: 0;
left: unset;
z-index: $z-index-3; z-index: $z-index-3;
width: $s-8; width: $s-8;
height: calc(100vh - $s-52);
cursor: ew-resize; cursor: ew-resize;
}
.resize-area-horiz {
position: absolute;
top: calc($s-80 + var(--height, 200px));
left: 0;
width: 100%;
height: $s-12;
border-top: $s-2 solid var(--resize-area-border-color);
background-color: var(--resize-area-background-color);
cursor: ns-resize;
}
.settings-bar-inside {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100%;
height: calc(100vh - $s-52);
overflow: hidden;
.tabs-wrapper {
.layers-tab {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 100%;
height: 100%; height: 100%;
overflow: hidden;
}
}
}
} }
.tab-spacing { .tab-spacing {
margin: $s-4 $s-8 0 $s-8; margin-inline: $s-8;
} }
.right-settings-bar { .right-settings-bar {
grid-area: right-sidebar; grid-area: right-sidebar;
width: $width-settings-bar; width: $width-settings-bar;
@ -69,14 +67,25 @@ $width-settings-bar-max: $s-500;
&.expanded { &.expanded {
width: var(--width, $width-settings-bar); width: var(--width, $width-settings-bar);
} }
.resize-area {
position: absolute;
height: 100%;
width: $s-8;
z-index: $z-index-3;
cursor: ew-resize;
}
.settings-bar-inside { .settings-bar-inside {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100%;
height: calc(100vh - $s-52);
overflow: hidden;
height: calc(100vh - $s-52); height: calc(100vh - $s-52);
} }
} }
.resize-area-horiz {
position: absolute;
top: calc($s-80 + var(--height, 200px));
left: 0;
width: 100%;
height: $s-12;
border-top: $s-2 solid var(--resize-area-border-color);
background-color: var(--resize-area-background-color);
cursor: ns-resize;
}

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

@ -153,7 +153,7 @@
:option-handler on-section-filter-change :option-handler on-section-filter-change
:data-test "typographies"}]))] :data-test "typographies"}]))]
[:div {:class (stl/css :assets-bar)} [:article {:class (stl/css :assets-bar)}
[:div {:class (stl/css :assets-header)} [:div {:class (stl/css :assets-header)}
(when-not ^boolean read-only? (when-not ^boolean read-only?
[:button {:class (stl/css :libraries-button) [:button {:class (stl/css :libraries-button)
@ -190,6 +190,6 @@
[:& (mf/provider cmm/assets-filters) {:value filters} [:& (mf/provider cmm/assets-filters) {:value filters}
[:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering} [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}
[:& (mf/provider cmm/assets-toggle-list-style) {:value toggle-list-style} [:& (mf/provider cmm/assets-toggle-list-style) {:value toggle-list-style}
[:div {:class (stl/css :libraries-wrapper)} [:*
[:& assets-local-library {:filters filters}] [:& assets-local-library {:filters filters}]
[:& assets-libraries {:filters filters}]]]]]])) [:& assets-libraries {:filters filters}]]]]]]))

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

@ -7,9 +7,11 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.assets-bar { .assets-bar {
position: relative; display: grid;
height: 100%; height: 100%;
overflow: hidden; grid-template-rows: auto 1fr;
// TODO: ugly hack :( Fix this! we shouldn't be hardcoding this height
max-height: calc(100vh - $s-80);
} }
.libraries-button { .libraries-button {
@ -108,16 +110,6 @@
@include buttonStyle; @include buttonStyle;
} }
.libraries-wrapper {
overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: stable;
display: flex;
flex-direction: column;
padding-left: $s-8;
height: calc(100vh - $s-180);
}
.assets-header { .assets-header {
padding: $s-8 $s-12 $s-12 $s-12; padding: $s-8 $s-12 $s-12 $s-12;
} }

13
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
View file

@ -6,7 +6,12 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.tool-window { .tool-window {
margin-bottom: $s-24; margin-block-end: $s-24;
padding-inline-start: $s-12;
overflow-y: auto;
display: grid;
grid-auto-rows: max-content;
scrollbar-gutter: stable;
} }
.file-name { .file-name {
@ -38,13 +43,7 @@
} }
.library-content { .library-content {
display: flex;
flex-direction: column;
height: calc(100% - $s-36);
width: 100%; width: 100%;
overflow-y: hidden;
overflow-x: hidden;
margin-top: $s-4;
} }
.asset-title { .asset-title {

5
frontend/src/app/main/ui/workspace/sidebar/debug.cljs
View file

@ -8,6 +8,7 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
@ -16,7 +17,7 @@
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc debug-panel (mf/defc debug-panel
[] [{:keys [class] :as props}]
(let [on-toggle-enabled (let [on-toggle-enabled
(mf/use-fn (mf/use-fn
(fn [event option] (fn [event option]
@ -30,7 +31,7 @@
(fn [] (fn []
(st/emit! (dw/remove-layout-flag :debug-panel))))] (st/emit! (dw/remove-layout-flag :debug-panel))))]
[:div {:class (stl/css :debug-panel)} [:div {:class (dm/str class " " (stl/css :debug-panel))}
[:div {:class (stl/css :panel-title)} [:div {:class (stl/css :panel-title)}
[:span "Debugging tools"] [:span "Debugging tools"]
[:div {:class (stl/css :close-button) :on-click handle-close} [:div {:class (stl/css :close-button) :on-click handle-close}

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

@ -74,11 +74,12 @@
} }
.element-list-body { .element-list-body {
display: flex;
align-items: center; align-items: center;
display: grid;
grid-template-columns: auto 1fr auto;
column-gap: $s-4;
height: $s-32; height: $s-32;
width: calc(100% - (var(--depth) * var(--layer-indentation-size))); width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
padding-right: $s-12;
cursor: pointer; cursor: pointer;
&.filtered { &.filtered {
@ -111,7 +112,7 @@
width: $s-16; width: $s-16;
height: 100%; height: 100%;
width: $s-24; width: $s-24;
padding: 0 $s-8 0 $s-4; padding-inline-start: $s-4;
svg { svg {
@extend .button-icon-small; @extend .button-icon-small;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
@ -169,7 +170,7 @@
align-items: center; align-items: center;
height: 100%; height: 100%;
width: $s-24; width: $s-24;
padding: 0 $s-4 0 $s-8; padding-inline-start: $s-8;
svg { svg {
@extend .button-icon-small; @extend .button-icon-small;

2
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

@ -458,7 +458,7 @@
(mf/use-fn (mf/use-fn
#(st/emit! (dw/toggle-focus-mode)))] #(st/emit! (dw/toggle-focus-mode)))]
[:div#layers {:class (stl/css :layers)} [:div#layers
(if (d/not-empty? focus) (if (d/not-empty? focus)
[:div {:class (stl/css :tool-window-bar)} [:div {:class (stl/css :tool-window-bar)}
[:button {:class (stl/css :focus-title) [:button {:class (stl/css :focus-title)

11
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -6,14 +6,6 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.layers {
position: relative;
display: flex;
flex-direction: column;
overflow: auto;
box-sizing: border-box;
}
.tool-window-bar { .tool-window-bar {
display: flex; display: flex;
align-items: center; align-items: center;
@ -246,7 +238,8 @@
} }
.tool-window-content { .tool-window-content {
--calculated-height: calc($s-128 + var(--height, $s-200)); // TODO: sass variables are not being interpolated here, find why
--calculated-height: calc(128px + var(--height, 200px));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100vh - var(--calculated-height)); height: calc(100vh - var(--calculated-height));

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View file

@ -363,15 +363,13 @@
} }
.fonts-list { .fonts-list {
@include menuShadow; @include menuShadow;
position: absolute; position: relative;
top: $s-36;
left: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 auto; flex: 1 1 auto;
min-height: 100%; min-height: 100%;
height: $s-216;
width: 100%; width: 100%;
height: 100%;
padding: $s-2; padding: $s-2;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--dropdown-background-color); background-color: var(--dropdown-background-color);

4
frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
View file

@ -341,7 +341,7 @@
:filter-term filter-term}]]]))) :filter-term filter-term}]]])))
(mf/defc shortcuts-container (mf/defc shortcuts-container
[] [{:keys [class] :as props}]
(let [workspace-shortcuts app.main.data.workspace.shortcuts/shortcuts (let [workspace-shortcuts app.main.data.workspace.shortcuts/shortcuts
path-shortcuts app.main.data.workspace.path.shortcuts/shortcuts path-shortcuts app.main.data.workspace.path.shortcuts/shortcuts
all-workspace-shortcuts (->> (d/deep-merge path-shortcuts workspace-shortcuts) all-workspace-shortcuts (->> (d/deep-merge path-shortcuts workspace-shortcuts)
@ -468,7 +468,7 @@
(mf/with-effect [] (mf/with-effect []
(dom/focus! (dom/get-element "shortcut-search"))) (dom/focus! (dom/get-element "shortcut-search")))
[:div {:class (stl/css :shortcuts)} [:div {:class (dm/str class " " (stl/css :shortcuts))}
[:div {:class (stl/css :shortcuts-header)} [:div {:class (stl/css :shortcuts-header)}
[:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")] [:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")]
[:div {:class (stl/css :shortcuts-close-button) [:div {:class (stl/css :shortcuts-close-button)