Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 08:29:42 -05:00
Code Issues Activity

Merge pull request #2748 from penpot/eva-workspace-visual-changes

Browse source 
Bugfixing
This commit is contained in:
Alejandro 2023-01-10 10:35:32 +01:00 • committed by GitHub
commit 553f2f5576
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 163 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/resources/styles/main/partials/color-bullet.scss
View file

@ -13,7 +13,7 @@
width: 65px;
.color-bullet {
border: 2px solid $color-gray-60;
border: 2px solid $color-gray-30;
position: relative;
width: var(--bullet-size);
height: var(--bullet-size);
@ -30,21 +30,21 @@
.color-cell.current {
.color-bullet {
border-color: $color-gray-50;
border-color: $color-gray-30;
}
}
ul.palette-menu .color-bullet {
width: 20px;
height: 20px;
border: 1px solid $color-gray-10;
border: 1px solid $color-gray-30;
margin-right: 5px;
background-size: 8px;
}
.color-cell.add-color .color-bullet {
align-items: center;
background-color: $color-gray-50;
border: 3px dashed $color-gray-10;
border: 3px dashed $color-gray-30;
cursor: pointer;
display: flex;
justify-content: center;
@ -62,17 +62,24 @@ ul.palette-menu .color-bullet {
grid-area: color;
width: 20px;
height: 20px;
border: 1px solid $color-gray-10;
border: 1px solid $color-gray-30;
background-size: 8px;
overflow: hidden;
}
.asset-section .asset-list-item .color-bullet {
border: 1px solid $color-gray-20;
border: 1px solid $color-gray-30;
height: 20px;
margin-right: $size-1;
width: 20px;
}
.asset-list .asset-list-item {
&:hover {
.color-bullet {
border: 1px solid $color-primary;
}
}
}
.color-cell.add-color:hover .color-bullet {
border-color: $color-gray-30;

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

@ -522,6 +522,7 @@
&:focus {
border-color: $color-primary !important;
color: $color-white;
outline: none;
}
&:hover {

2
frontend/resources/styles/main/partials/dashboard-header.scss
View file

@ -13,6 +13,7 @@
padding: $size-1 $size-4 $size-1 $size-2;
position: relative;
z-index: 10;
user-select: none;
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
@ -85,6 +86,7 @@
font-size: $fs22;
font-weight: 600;
z-index: 10;
user-select: all;
}
.context-menu.is-open {

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

@ -186,6 +186,7 @@
flex-direction: column;
overflow-y: auto;
margin: 0;
user-select: none;
// TODO: should be deprecated / unclear name
&.dashboard-common {
@ -223,7 +224,6 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
}
&::before {

7
frontend/resources/styles/main/partials/dashboard-team.scss
View file

@ -106,6 +106,9 @@
border: 1px dashed $color-gray-20;
margin-top: 16px;
}
.table-header {
user-select: none;
}
.table-row {
background-color: $color-white;
@ -148,9 +151,11 @@
&.roles {
flex-grow: 1;
user-select: none;
cursor: default;
position: relative;
.rol-label {
user-select: none;
}
.rol-selector {
&.has-priv {
border: 1px solid $color-gray-20;

4
frontend/resources/styles/main/partials/dashboard.scss
View file

@ -164,8 +164,10 @@
flex: 1 0 0;
margin-right: $size-4;
overflow-y: auto;
user-select: none;
width: 100%;
&.dashboard-projects {
user-select: none;
}
&.no-bg {
background-color: transparent;
}

7
frontend/resources/styles/main/partials/inspect.scss
View file

@ -148,7 +148,7 @@
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid $color-gray-60;
border: 1px solid $color-gray-30;
}
.hide-color .color-bullet {
@ -173,6 +173,11 @@
background-position: 95% 48%;
background-size: 10px;
cursor: pointer;
outline: none;
&:focus,
&:focus-within {
border: 1px solid $color-primary;
}
option {
padding: 1rem;

6
frontend/resources/styles/main/partials/modal.scss
View file

@ -65,6 +65,7 @@
flex-direction: column;
width: 448px;
background-color: $color-white;
max-height: 700px;
.modal-header {
align-items: center;
@ -104,6 +105,11 @@
}
}
.component-list {
max-height: 408px;
overflow-y: scroll;
}
.modal-item-element {
display: flex;
padding-bottom: 3px;

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

@ -67,6 +67,7 @@
&:focus {
color: lighten($color-gray-10, 8%);
outline: none;
}
}
@ -99,6 +100,10 @@
color: lighten($color-gray-10, 8%);
}
&:active {
border-color: $color-primary;
}
option {
background: $color-white;
color: $color-gray-60;

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

@ -199,6 +199,7 @@
&:focus {
color: lighten($color-gray-10, 8%);
border-color: $color-primary;
}
option {
@ -312,6 +313,14 @@
border: 1px solid $color-gray-20;
}
}
.opened {
border: 1px solid $color-primary;
&:hover,
&:focus {
outline: none;
border: 1px solid $color-primary;
}
}
.custom-select-dropdown {
background-color: $color-white;
@ -549,6 +558,11 @@
}
.presets {
&:focus,
&:focus-within {
outline: none;
border: 1px solid $color-primary;
}
.custom-select-dropdown {
width: 237px;
@ -968,6 +982,15 @@
input {
margin-right: 1em;
width: 74px;
&:focus {
border-color: $color-primary !important;
color: $color-white;
outline: none;
}
&:hover {
border-color: $color-gray-20;
}
}
}
}

24
frontend/resources/styles/main/partials/sidebar-layers.scss
View file

@ -54,6 +54,9 @@
span {
color: $color-gray-60;
}
input {
color: $color-white !important;
}
.toggle-content {
svg {
@ -149,6 +152,9 @@
span.element-name {
color: $color-gray-60;
}
input.element-name {
color: $color-white !important;
}
svg {
fill: $color-gray-60;
@ -203,6 +209,14 @@
input.element-name {
max-width: 75%;
margin-right: 5px;
background-color: $color-gray-50;
color: $color-white;
&:focus,
&:focus-within {
outline: none;
border: 1px solid $color-primary;
}
}
span.element-name {
@ -225,7 +239,6 @@ span.element-name {
margin-left: auto;
position: relative;
width: 32px;
right: 20px;
&.is-parent {
right: 0;
@ -306,12 +319,16 @@ span.element-name {
&.search {
.search-box {
border: 1px solid $color-primary;
border: 1px solid $color-gray-20;
border-radius: 4px;
height: 32px;
width: 100%;
display: flex;
align-items: center;
&:active,
&:focus-within {
border: 1px solid $color-primary;
}
input {
border: 0;
width: 100%;
@ -319,6 +336,9 @@ span.element-name {
color: $color-white;
font-size: 12px;
height: 16px;
&:focus {
outline: none;
}
}
span {
height: 16px;

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

@ -390,6 +390,7 @@ button.collapse-sidebar {
justify-content: center;
align-items: center;
padding: 12px 10px;
.search-box {
display: flex;
justify-content: space-between;
@ -397,6 +398,9 @@ button.collapse-sidebar {
border: 1px solid $color-gray-30;
border-radius: 2px;
width: 100%;
&:focus-within {
border: 1px solid $color-primary;
}
.input-text {
margin: 0;
background: $color-gray-50;

6
frontend/resources/styles/main/partials/workspace-header.scss
View file

@ -145,6 +145,12 @@
background: $color-gray-50;
color: $color-gray-10;
margin-bottom: -1px;
&:focus,
&:focus-within {
outline: none;
border-radius: 3px;
border: 1px solid $color-primary;
}
}
}

3
frontend/src/app/main/ui/components/color_input.cljs
View file

@ -86,7 +86,8 @@
(dom/blur! input-node)))
(when esc?
(dom/prevent-default event)
(update-input value)))))
(update-input value)
(dom/blur! input-node)))))
handle-blur
(mf/use-callback

3
frontend/src/app/main/ui/components/numeric_input.cljs
View file

@ -163,7 +163,8 @@
(when enter?
(dom/blur! input-node))
(when esc?
(update-input value-str)))))
(update-input value-str)
(dom/blur! input-node)))))
handle-mouse-wheel
(mf/use-callback

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

@ -81,7 +81,7 @@
(when (> (count items) 0)
[:*
[:p (tr "ds.component-subtitle")]
[:ul
[:ul.component-list
(for [item items]
[:li.modal-item-element
[:span.modal-component-icon i/component]

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

@ -407,7 +407,7 @@
[:& interface-walkthrough
{:close-walkthrough close-walkthrough}])])
[:div.dashboard-container.no-bg
[:div.dashboard-container.no-bg.dashboard-projects
(for [{:keys [id] :as project} projects]
(let [files (when recent-map
(->> (vals recent-map)

2
frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
View file

@ -67,7 +67,7 @@
(when-not (:gradient color) [:div (str (* 100 (:opacity color)) "%")])]))
(when-not (and on-change-format (:gradient color))
[:select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)}
[:select.color-format-select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)}
[:option {:value "hex"}
(tr "inspect.attributes.color.hex")]

19
frontend/src/app/main/ui/workspace/libraries.cljs
View file

@ -15,6 +15,7 @@
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[app.util.strings :refer [matches-search]]
[cuerdas.core :as str]
[okulary.core :as l]
@ -93,11 +94,22 @@
(st/emit! (modal/show
{:type :delete-shared
:origin :unpublish
:on-accept (fn[]
:on-accept (fn []
(st/emit! (dwl/set-file-shared (:id file) false))
(modal/show! :libraries-dialog {}))
:on-cancel #(modal/show! :libraries-dialog {})
:count-libraries 1}))))]
:count-libraries 1}))))
handle-key-down
(mf/use-callback
(fn [event]
(let [enter? (kbd/enter? event)
esc? (kbd/esc? event)
input-node (dom/event->target event)]
(when enter?
(dom/blur! input-node))
(when esc?
(dom/blur! input-node)))))]
[:*
[:div.section
[:div.section-title (tr "workspace.libraries.in-this-file")]
@ -130,7 +142,8 @@
{:placeholder (tr "workspace.libraries.search-shared-libraries")
:type "text"
:value @search-term
:on-change on-search-term-change}]
:on-change on-search-term-change
:on-key-down handle-key-down}]
(if (str/empty? @search-term)
[:div.search-icon
i/search]

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

@ -2243,7 +2243,19 @@
(let [value (-> (dom/get-target event)
(dom/get-value)
(d/read-string))]
(swap! filters assoc :box value))))]
(swap! filters assoc :box value))))
handle-key-down
(mf/use-callback
(fn [event]
(let [enter? (kbd/enter? event)
esc? (kbd/esc? event)
input-node (dom/event->target event)]
(when enter?
(dom/blur! input-node))
(when esc?
(dom/blur! input-node)))))]
[:div.assets-bar
[:div.tool-window
@ -2260,7 +2272,8 @@
{:placeholder (tr "workspace.assets.search")
:type "text"
:value (:term @filters)
:on-change on-search-term-change}]
:on-change on-search-term-change
:on-key-down handle-key-down}]
(if (str/empty? (:term @filters))
[:div.search-icon
i/search]

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

@ -468,7 +468,19 @@
handle-show-more
(fn []
(when (<= (:num-items @filter-state) (count filtered-objects-total))
(swap! filter-state update :num-items + 100)))]
(swap! filter-state update :num-items + 100)))
handle-key-down
(mf/use-callback
(fn [event]
(let [enter? (kbd/enter? event)
esc? (kbd/esc? event)
input-node (dom/event->target event)]
(when enter?
(dom/blur! input-node))
(when esc?
(dom/blur! input-node)))))]
[filtered-objects
handle-show-more
@ -483,7 +495,8 @@
[:input {:on-change update-search-text
:value (:search-text @filter-state)
:auto-focus (:show-search-box @filter-state)
:placeholder (tr "workspace.sidebar.layers.search")}]]
:placeholder (tr "workspace.sidebar.layers.search")
:on-key-down handle-key-down}]]
(when (not (= "" (:search-text @filter-state)))
[:span.clear {:on-click clear-search-text} i/exclude])]
[:span {:on-click toggle-search} i/cross]]

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

@ -16,6 +16,7 @@
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :refer [tr c]]
[app.util.keyboard :as kbd]
[rumext.v2 :as mf]))
(def exports-attrs
@ -123,7 +124,13 @@
(fn []
(st/emit! (dch/update-shapes ids
(fn [shape]
(assoc shape :exports []))))))]
(assoc shape :exports []))))))
manage-key-down
(mf/use-callback
(fn [event]
(let [esc? (kbd/esc? event)]
(when esc?
(dom/blur! (dom/get-target event))))))]
[:div.element-set.exports-options
[:div.element-set-title
@ -156,7 +163,8 @@
[:option {:value "6"} "6x"]])
[:input.input-text {:value (:suffix export)
:placeholder (tr "workspace.options.export.suffix")
:on-change (partial on-suffix-change index)}]
:on-change (partial on-suffix-change index)
:on-key-down manage-key-down}]
[:select.input-select {:value (name (:type export))
:on-change (partial on-type-change index)}
[:option {:value "png"} "PNG"]

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

@ -282,7 +282,8 @@
(when (and (options :presets)
(or (nil? all-types) (= (count all-types) 1))) ;; Don't show presets if multi selected
[:div.row-flex ;; some frames and some non frames
[:div.presets.custom-select.flex-grow {:on-click #(reset! show-presets-dropdown? true)}
[:div.presets.custom-select.flex-grow {:class (when @show-presets-dropdown? "opened")
:on-click #(reset! show-presets-dropdown? true)}
[:span (tr "workspace.options.size-presets")]
[:span.dropdown-button i/arrow-down]
[:& dropdown {:show @show-presets-dropdown?