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

🐛 Fixed styles for typography advanced options

Browse source
This commit is contained in:
alonso.torres 2020-12-04 15:22:59 +01:00 • committed by Alonso Torres
parent 0da16c7219
commit 62d98ad265
4 changed files with 15 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -760,30 +760,23 @@
left: 0; left: 0;
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: calc(100% - 8px);
opacity: 0.4; opacity: 0.4;
z-index: 10; z-index: 10;
} }
.advanced-options-wrapper { .advanced-options-wrapper {
position: absolute;
width: 100%; width: 100%;
padding-right: 1.5rem;
padding-left: 0.25rem; padding-left: 0.25rem;
} }
.element-options .advanced-options-wrapper {
padding-right: 1rem;
}
.advanced-options { .advanced-options {
background-color: #303236; background-color: #303236;
border-radius: 4px; border-radius: 4px;
left: -8px;
padding: 0.5rem; padding: 0.5rem;
position: relative; position: relative;
top: 2px; top: 2px;
width: calc(100% + 16px); width: 100%;
z-index: 20; z-index: 20;
} }
@ -918,6 +911,7 @@
flex-grow: 1; flex-grow: 1;
font-size: 11px; font-size: 11px;
margin-top: 4px; margin-top: 4px;
white-space: nowrap;
} }
.element-set-actions-button svg { .element-set-actions-button svg {

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

@ -171,7 +171,7 @@ $width-settings-bar: 16rem;
.tool-window-content { .tool-window-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; // overflow-y: auto;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }

12
frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
View file

@ -13,13 +13,21 @@
[app.util.dom :as dom])) [app.util.dom :as dom]))
(mf/defc advanced-options [{:keys [visible? on-close children]}] (mf/defc advanced-options [{:keys [visible? on-close children]}]
(let [handle-click (fn [event] (when on-close (let [ref (mf/use-ref nil)
handle-click (fn [event] (when on-close
(do (dom/stop-propagation event) (do (dom/stop-propagation event)
(on-close))))] (on-close))))]
(mf/use-effect
(mf/deps visible?)
(fn []
(when-let [node (mf/ref-val ref)]
(when visible?
(.scrollIntoViewIfNeeded ^js node)))))
(when visible? (when visible?
[:* [:*
[:div.focus-overlay {:on-click handle-click}] [:div.focus-overlay {:on-click handle-click}]
[:div.advanced-options-wrapper [:div.advanced-options-wrapper {:ref ref}
[:div.advanced-options {} [:div.advanced-options {}
children]]]))) children]]])))

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

@ -270,7 +270,7 @@
(if read-only? (if read-only?
[:div.element-set-content.typography-read-only-data [:div.element-set-content.typography-read-only-data
[:div.row-flex.typography-name [:div.row-flex.typography-name
[:spang (:name typography)]] [:span (:name typography)]]
[:div.row-flex [:div.row-flex
[:span.label (t locale "workspace.assets.typography.font-id")] [:span.label (t locale "workspace.assets.typography.font-id")]