Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 00:58:26 -05:00
Code Issues Activity

Merge pull request #390 from penpot/ui-polishing

Browse source 
🎉 UI polishing
This commit is contained in:
Andrey Antukh 2020-11-13 16:21:54 +01:00 • committed by GitHub
commit 9bd393c159
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 66 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/images/icons/icon-list.svg Normal file
View file

@ -0,0 +1 @@
<svg width="500" height="500" viewBox="0 0 500 500"><path d="M9.096 0A9.076 9.076 0 000 9.096v51.808A9.076 9.076 0 009.096 70h77.808A9.076 9.076 0 0096 60.904V9.096A9.076 9.076 0 0086.904 0zm140 0A9.076 9.076 0 00140 9.096v51.808A9.076 9.076 0 00149.096 70h341.808A9.076 9.076 0 00500 60.904V9.096A9.076 9.076 0 00490.904 0zm-140 146A9.076 9.076 0 000 155.096v51.808A9.076 9.076 0 009.096 216h77.808A9.076 9.076 0 0096 206.904v-51.808A9.076 9.076 0 0086.904 146zm140 0a9.076 9.076 0 00-9.096 9.096v51.808a9.076 9.076 0 009.096 9.096h341.808a9.076 9.076 0 009.096-9.096v-51.808a9.076 9.076 0 00-9.096-9.096zm-140 142A9.076 9.076 0 000 297.096v51.808A9.076 9.076 0 009.096 358h77.808A9.076 9.076 0 0096 348.904v-51.808A9.076 9.076 0 0086.904 288zm140 0a9.076 9.076 0 00-9.096 9.096v51.808a9.076 9.076 0 009.096 9.096h341.808a9.076 9.076 0 009.096-9.096v-51.808a9.076 9.076 0 00-9.096-9.096zm-140 142A9.076 9.076 0 000 439.096v51.808A9.076 9.076 0 009.096 500h77.808A9.076 9.076 0 0096 490.904v-51.808A9.076 9.076 0 0086.904 430zm140 0a9.076 9.076 0 00-9.096 9.096v51.808a9.076 9.076 0 009.096 9.096h341.808a9.076 9.076 0 009.096-9.096v-51.808a9.076 9.076 0 00-9.096-9.096z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
frontend/resources/locales.json
View file

@ -56,7 +56,7 @@
"auth.forgot-password" : {
"used-in" : [ "src/app/main/ui/auth/login.cljs:122" ],
"translations" : {
"en" : "Forgot your password?",
"en" : "Forgot password?",
"fr" : "Mot de passe oublié?",
"ru" : "Забыли пароль?",
"es" : "¿Olvidaste tu contraseña?"
@ -224,7 +224,7 @@
"auth.recovery-request-title" : {
"used-in" : [ "src/app/main/ui/auth/recovery_request.cljs:61" ],
"translations" : {
"en" : "Forgot your password?",
"en" : "Forgot password?",
"fr" : "Vous avez oublié votre mot de passe?",
"ru" : "Забыли пароль?",
"es" : "¿Olvidaste tu contraseña?"

10
frontend/resources/styles/common/framework.scss
View file

@ -1001,6 +1001,16 @@ input[type=range]:focus::-ms-fill-upper {
}
}
&.tooltip-left {
&:hover {
&::after {
left: unset;
right: 130%;
top: 15%;
}
}
}
&.tooltip-hover {
&:hover {
&::after {

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

@ -9,11 +9,15 @@
.color-cell {
.color-bullet {
background-color: $color-white;
background-color: transparent;
// Creates strange artifacts
border: 2px solid $color-gray-60;
// box-shadow: 0 0 0 2px $color-gray-60;
border-radius: 50%;
&:hover {
border-color: $color-primary;
}
}
&.cell-big .color-bullet {
@ -74,10 +78,11 @@ ul.palette-menu .color-bullet {
}
.asset-group .group-list-item .color-bullet {
width: 20px;
height: 20px;
border: 1px solid $color-gray-20;
border-radius: 10px;
height: 20px;
margin-right: $x-small;
width: 20px;
}
.color-cell.add-color:hover .color-bullet {

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

@ -309,7 +309,7 @@
font-size: 0.75rem;
color: $color-gray-40;
cursor: pointer;
border-color: $color-gray-10;
border: 1px solid $color-gray-10;
border-radius: 2px;
option {

47
frontend/resources/styles/main/partials/dashboard-grid.scss
View file

@ -180,7 +180,7 @@
.project-th-actions {
align-items: center;
bottom: 0;
bottom: 4px;
display: none;
left: 0;
justify-content: flex-end;
@ -190,9 +190,9 @@
svg {
fill: $color-gray-20;
height: 14px;
height: 18px;
margin-right: $x-small;
width: 14px;
width: 18px;
}
span {
@ -208,13 +208,11 @@
margin-right: 0;
svg {
fill: $color-gray-30;
fill: $color-gray-60;
margin-right: 0;
}
&:hover {
transform: scale(1.4);
svg {
fill: $color-primary-dark;
}
@ -223,43 +221,6 @@
}
&.delete {
margin-right: 0;
svg {
fill: $color-gray-30;
margin-right: 0;
}
&:hover {
transform: scale(1.4);
svg {
fill: $color-danger;
}
}
}
&.edit {
margin-right: 0;
svg {
fill: $color-gray-30;
}
&:hover {
transform: scale(1.4);
svg {
fill: $color-gray-60;
}
}
}
}
}

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

@ -59,7 +59,7 @@
// NEW GEN MODALS
.modal-container {
border-radius: 8px;
border-radius: $br-medium;
display: flex;
flex-direction: column;
width: 448px;
@ -78,10 +78,12 @@
.modal-header-title {
display: flex;
align-items: center;
font-size: $fs24;
font-size: $fs18;
padding-left: 16px;
h2 {
font-size: $fs18;
font-weight: 400;
margin: 0;
}
}
@ -204,8 +206,9 @@
}
.libraries-dialog {
width: 920px;
border-radius: $br-medium;
height: 664px;
width: 920px;
.modal-content {
display: flex;
@ -257,8 +260,10 @@
}
.section-title {
color: $color-black;
font-size: $fs15;
padding: 0 $size-4;
font-weight: 500;
}
.section-list {
@ -319,9 +324,9 @@
}
.libraries-search {
border: 1px solid $color-gray-30;
border: 1px solid $color-gray-20;
margin: $size-4;
padding: $x-small;
padding: $x-small $small;
display: flex;
align-items: center;

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

@ -26,9 +26,9 @@
svg {
fill: $color-gray-30;
height: 20px;
width: 20px;
padding-right: $x-small;
height: 16px;
width: 16px;
padding-right: 6px;
}
}
@ -44,7 +44,7 @@
.search-block {
border: 1px solid $color-gray-30;
margin: $small $small 0 $small;
padding: $x-small;
padding: $x-small $small;
display: flex;
align-items: center;
@ -117,6 +117,7 @@
.asset-group {
background-color: $color-gray-60;
border-top: 1px solid $color-gray-50;
padding: $small;
font-size: $fs12;
color: $color-gray-20;
@ -164,10 +165,10 @@
}
.group-grid {
margin-top: $small;
margin-top: $medium;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 7vh;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: 6vh;
column-gap: 0.5rem;
row-gap: 0.5rem;
@ -253,6 +254,10 @@
// overflow-y: scroll;
// }
.group-list {
margin-top: $medium;
}
.group-list-item {
display: flex;
align-items: center;

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

@ -194,6 +194,7 @@
color: $color-white;
font-size: $fs12;
margin: $x-small;
min-width: 0;
padding: $x-small;
width: 100%;

4
frontend/resources/styles/main/partials/viewer-header.scss
View file

@ -126,8 +126,8 @@
svg {
fill: $color-gray-20;
width: 24px;
height: 24px;
width: 20px;
height: 20px;
}
&.active {

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

@ -209,6 +209,11 @@
.label { color: $color-danger; }
.icon svg { fill: $color-danger; }
}
&.pending {
.label { color: $color-warning; }
.icon svg { fill: $color-warning; }
}
}
.icon {

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

@ -99,7 +99,7 @@
position: fixed;
right: calc(#{$width-settings-bar} + 10px);
text-align: center;
width: 100px;
width: 110px;
padding-bottom: 2px;
span {

2
frontend/src/app/main/ui/auth/register.cljs
View file

@ -133,4 +133,4 @@
[:span (t locale "auth.create-demo-profile") " "]
[:a {:on-click #(st/emit! da/create-demo-profile)
:tab-index "5"}
(t locale "auth.create-demo-profile")]]]])
(t locale "auth.create-demo-account")]]]])

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

@ -49,6 +49,7 @@
(def grid (icon-xref :grid))
(def grid-snap (icon-xref :grid-snap))
(def icon-empty (icon-xref :icon-empty))
(def icon-list (icon-xref :icon-list))
(def icon-lock (icon-xref :icon-lock))
(def icon-set (icon-xref :icon-set))
(def image (icon-xref :image))

8
frontend/src/app/main/ui/viewer/header.cljs
View file

@ -164,12 +164,12 @@
[:span.counters (str (inc index) " / " total)]]
[:div.mode-zone
[:button.mode-zone-button {:on-click #(when (not= screen :viewer)
[:button.mode-zone-button.tooltip.tooltip-bottom {:on-click #(when (not= screen :viewer)
(change-screen :viewer))
:class (when (= screen :viewer) "active")} i/play]
[:button.mode-zone-button {:on-click #(when (not= screen :handoff)
:class (when (= screen :viewer) "active") :alt "View mode"} i/play]
[:button.mode-zone-button.tooltip.tooltip-bottom {:on-click #(when (not= screen :handoff)
(change-screen :handoff))
:class (when (= screen :handoff) "active")} i/code]]
:class (when (= screen :handoff) "active") :alt "Code mode"} i/code]]
[:div.options-zone
[:& interactions-menu {:interactions-mode interactions-mode}]

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

@ -258,7 +258,7 @@
:on-zoom-fit #(st/emit! dw/zoom-to-fit-all)
:on-zoom-selected #(st/emit! dw/zoom-to-selected-shape)}]
[:a.btn-icon-dark.btn-small
[:a.btn-icon-dark.btn-small.tooltip.tooltip-bottom
{;; :target "__blank"
:alt (t locale "workspace.header.viewer")
:href (str "#" view-url)} i/play]]]))

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

@ -570,7 +570,7 @@
[:span.tool-badge (t locale "workspace.assets.shared")])]
[:*
[:span (:name file)]
[:span.tool-link
[:span.tool-link.tooltip.tooltip-left {:alt "Open library file"}
[:a {:href (str "#" url) :target "_blank"} i/chain]]])]
(when @open?
@ -667,7 +667,7 @@
[:div.assets-bar-title
(t locale "workspace.assets.assets")
[:div.libraries-button {:on-click #(modal/show! :libraries-dialog {})}
i/libraries
i/text-align-justify
(t locale "workspace.assets.libraries")]]
[:div.search-block