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

Merge pull request #1022 from penpot/advanced-options-ui

Browse source 
Advanced options UI
This commit is contained in:
Andrey Antukh 2021-06-10 10:55:28 +02:00 • committed by GitHub
commit beaa62c9a9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 99 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -480,6 +480,7 @@
.color-data { .color-data {
align-items: center; align-items: center;
display: flex; display: flex;
margin-bottom: $small;
position: relative; position: relative;
.color-name { .color-name {

9
frontend/resources/styles/main/partials/sidebar-assets.scss
View file

@ -400,6 +400,15 @@
top: 10px; top: 10px;
left: 10px; left: 10px;
} }
.advanced-options {
border-color: $color-black;
background-color: $color-gray-60;
.input-text, .input-select, .adv-typography-name {
background-color: $color-gray-60;
}
}
} }
} }

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

@ -543,7 +543,7 @@
padding: 0 $x-small; padding: 0 $x-small;
&:first-child { &:first-child {
justify-content: space-between; justify-content: flex-start;
margin-left: 0; margin-left: 0;
} }
@ -733,6 +733,16 @@
.grid-option { .grid-option {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
.advanced-options {
.row-flex {
justify-content: flex-end;
}
.custom-button {
left: 0;
position: absolute;
top: 12px;
}
}
} }
.element-set-content .custom-select.input-option { .element-set-content .custom-select.input-option {
@ -816,13 +826,13 @@
.advanced-options-wrapper { .advanced-options-wrapper {
width: 100%; width: 100%;
padding-left: 0.25rem;
} }
.advanced-options { .advanced-options {
background-color: #303236; border: 1px solid $color-gray-60;
background-color: $color-gray-50;
border-radius: 4px; border-radius: 4px;
padding: 0.5rem; padding: 8px;
position: relative; position: relative;
top: 2px; top: 2px;
width: 100%; width: 100%;
@ -897,6 +907,22 @@
.download-button { .download-button {
margin-top: 10px; margin-top: 10px;
} }
.input-element {
width: 100%;
flex-shrink: initial;
}
.row-grid-2 {
grid-column-gap: 1em;
}
.color-info {
input {
margin-right: 1em;
width: 74px;
}
}
} }
.shadow-options .color-row-wrap { .shadow-options .color-row-wrap {
@ -920,6 +946,10 @@
&:hover svg { &:hover svg {
fill: $color-primary; fill: $color-primary;
} }
&.actions-inside {
position: absolute;
right: 0;
}
} }
.element-set-label { .element-set-label {
@ -985,6 +1015,7 @@
.spacing-options { .spacing-options {
display: flex; display: flex;
width: 100%;
} }
.asset-section { .asset-section {
@ -1007,7 +1038,7 @@
width: 100%; width: 100%;
max-width: none; max-width: none;
margin: 0; margin: 0;
background: #303236; background-color: #303236;
border-top: none; border-top: none;
border-left: none; border-left: none;
border-right: none; border-right: none;
@ -1045,17 +1076,16 @@
.go-to-lib-button { .go-to-lib-button {
transition: border 0.3s, color 0.3s; transition: border 0.3s, color 0.3s;
text-align: center; text-align: center;
background: $color-gray-60; background: $color-gray-50;
padding: 0.5rem; padding: 0.5rem;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
margin-top: 1rem; margin-top: 1rem;
border: 1px solid $color-gray-60;
&:hover { &:hover {
border: 1px solid $color-primary; background: $color-primary;
color: $color-primary; color: $color-black;
} }
} }
} }

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

@ -22,9 +22,7 @@
(.scrollIntoViewIfNeeded ^js node))))) (.scrollIntoViewIfNeeded ^js node)))))
(when visible? (when visible?
[:* [:div.advanced-options-wrapper {:ref ref}
[:div.focus-overlay {:on-click handle-click}] [:div.advanced-options {}
[:div.advanced-options-wrapper {:ref ref} children]])))
[:div.advanced-options {}
children]]])))

1
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
View file

@ -13,7 +13,6 @@
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]] [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [t]])) [app.util.i18n :as i18n :refer [t]]))

11
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View file

@ -117,11 +117,13 @@
(on-save-grid grid))) (on-save-grid grid)))
is-default (= (->> grid :params) is-default (= (->> grid :params)
(->> grid :type default-grid-params))] (->> grid :type default-grid-params))
open? (:show-advanced-options @state)]
[:div.grid-option [:div.grid-option
[:div.grid-option-main [:div.grid-option-main {:style {:display (when open? "none")}}
[:button.custom-button {:class (when (:show-advanced-options @state) "is-active") [:button.custom-button {:class (when open? "is-active")
:on-click toggle-advanced-options} i/actions] :on-click toggle-advanced-options} i/actions]
[:& select {:class "flex-grow" [:& select {:class "flex-grow"
@ -148,8 +150,9 @@
[:button.custom-button {:on-click handle-toggle-visibility} (if display i/eye i/eye-closed)] [:button.custom-button {:on-click handle-toggle-visibility} (if display i/eye i/eye-closed)]
[:button.custom-button {:on-click handle-remove-grid} i/minus]]] [:button.custom-button {:on-click handle-remove-grid} i/minus]]]
[:& advanced-options {:visible? (:show-advanced-options @state) [:& advanced-options {:visible? open?
:on-close toggle-advanced-options} :on-close toggle-advanced-options}
[:button.custom-button {:on-click toggle-advanced-options} i/actions]
(when (= :square type) (when (= :square type)
[:& input-row {:label (t locale "workspace.options.grid.params.size") [:& input-row {:label (t locale "workspace.options.grid.params.size")
:class "pixels" :class "pixels"

42
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -98,25 +98,32 @@
(fn [] (fn []
(st/emit! (dch/update-shapes ids #(update-in % [:shadow index :hidden] not)))))] (st/emit! (dch/update-shapes ids #(update-in % [:shadow index :hidden] not)))))]
[:* [:*
[:div.element-set-options-group [:div.element-set-options-group {:style {:display (when @open-shadow "none")}}
[:div.element-set-actions-button [:div.element-set-actions-button
{:on-click #(reset! open-shadow true)} {:on-click #(reset! open-shadow true)}
i/actions] i/actions]
[:> numeric-input {:ref basic-offset-x-ref ;; [:> numeric-input {:ref basic-offset-x-ref
:on-change (update-attr index :offset-x valid-number?) ;; :on-change (update-attr index :offset-x valid-number?)
:on-click (select-text basic-offset-x-ref) ;; :on-click (select-text basic-offset-x-ref)
:value (:offset-x value)}] ;; :value (:offset-x value)}]
[:> numeric-input {:ref basic-offset-y-ref ;; [:> numeric-input {:ref basic-offset-y-ref
:on-change (update-attr index :offset-y valid-number?) ;; :on-change (update-attr index :offset-y valid-number?)
:on-click (select-text basic-offset-y-ref) ;; :on-click (select-text basic-offset-y-ref)
:value (:offset-y value)}] ;; :value (:offset-y value)}]
[:> numeric-input {:ref basic-blur-ref ;; [:> numeric-input {:ref basic-blur-ref
:on-click (select-text basic-blur-ref) ;; :on-click (select-text basic-blur-ref)
:on-change (update-attr index :blur valid-number?) ;; :on-change (update-attr index :blur valid-number?)
:min 0 ;; :min 0
:value (:blur value)}] ;; :value (:blur value)}]
[:select.input-select
{:default-value (str (:style value))
:on-change (fn [event]
(let [value (-> event dom/get-target dom/get-value d/read-string)]
(st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
[:option {:value ":drop-shadow"} (t locale "workspace.options.shadow-options.drop-shadow")]
[:option {:value ":inner-shadow"} (t locale "workspace.options.shadow-options.inner-shadow")]]
[:div.element-set-actions [:div.element-set-actions
[:div.element-set-actions-button {:on-click (toggle-visibility index)} [:div.element-set-actions-button {:on-click (toggle-visibility index)}
@ -126,7 +133,10 @@
[:& advanced-options {:visible? @open-shadow [:& advanced-options {:visible? @open-shadow
:on-close #(reset! open-shadow false)} :on-close #(reset! open-shadow false)}
[:div.row-grid-2 [:div.color-data
[:div.element-set-actions-button
{:on-click #(reset! open-shadow false)}
i/actions]
[:select.input-select [:select.input-select
{:default-value (str (:style value)) {:default-value (str (:style value))
:on-change (fn [event] :on-change (fn [event]

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

@ -424,7 +424,8 @@
[:div.element-set-content [:div.element-set-content
[:> font-options opts] [:> font-options opts]
[:div.row-flex [:div.row-flex
[:> spacing-options opts] [:> spacing-options opts]]
[:div.row-flex
[:> text-transform-options opts]]])) [:> text-transform-options opts]]]))
@ -467,7 +468,8 @@
[:* [:*
[:div.element-set-options-group.typography-entry [:div.element-set-options-group.typography-entry
{:class (when selected? "selected")} {:class (when selected? "selected")
:style {:display (when @open? "none")}}
[:div.typography-selection-wrapper [:div.typography-selection-wrapper
{:class (when on-click "is-selectable") {:class (when on-click "is-selectable")
:on-click on-click :on-click on-click
@ -501,6 +503,10 @@
[:span.label (tr "workspace.assets.typography.font-id")] [:span.label (tr "workspace.assets.typography.font-id")]
[:span (:font-id typography)]] [:span (:font-id typography)]]
[:div.element-set-actions-button.actions-inside
{:on-click #(reset! open? false)}
i/actions]
[:div.row-flex [:div.row-flex
[:span.label (tr "workspace.assets.typography.font-variant-id")] [:span.label (tr "workspace.assets.typography.font-variant-id")]
[:span (:font-variant-id typography)]] [:span (:font-variant-id typography)]]
@ -532,6 +538,11 @@
{:type "text" {:type "text"
:ref name-input-ref :ref name-input-ref
:default-value (cp/merge-path-item (:path typography) (:name typography)) :default-value (cp/merge-path-item (:path typography) (:name typography))
:on-blur on-name-blur}]]] :on-blur on-name-blur}]
[:div.element-set-actions-button
{:on-click #(reset! open? false)}
i/actions]]]
[:& typography-options {:values typography [:& typography-options {:values typography
:on-change on-change}]])]])) :on-change on-change}]])]]))