0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 16:21:57 -05:00

💄 Small visual fixes

This commit is contained in:
alonso.torres 2023-12-01 14:26:17 +01:00
parent 76a2f9bc8c
commit e9a42bbc69
12 changed files with 101 additions and 29 deletions

View file

@ -31,6 +31,7 @@
margin-top: 0;
width: 100%;
height: 100%;
padding: 0 $s-16;
&:focus {
outline: none;
@ -82,7 +83,7 @@
position: relative;
width: var(--input-width, calc(100% - $s-1));
min-width: var(--input-min-width);
height: var(--input-height, $s-32);
height: var(--input-height, $s-40);
}
.help-icon {

View file

@ -14,12 +14,13 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: 0 $s-16;
}
.grid-row {
display: flex;
width: 100%;
gap: 24px;
gap: $s-24;
}
.grid-item {
@ -45,7 +46,6 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
.grid-item-th {
border-radius: $br-4;
text-align: initial;
width: var(--th-width, #{$thumbnail-default-width});
height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
@ -56,7 +56,7 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
&.dragged {
border-radius: $br-4;
border: $br-2 solid $da-primary;
outline: $br-4 solid $da-primary;
text-align: initial;
width: calc(var(--th-width) + $s-12);
height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
@ -200,7 +200,7 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
.selected {
.grid-item-th {
border: 2px solid $da-tertiary;
outline: $s-4 solid $da-tertiary;
}
}
}
@ -302,7 +302,7 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
flex-direction: column;
height: 90%;
justify-content: flex-start;
max-height: 550px;
max-height: $s-580;
padding: $s-32;
.asset-section {

View file

@ -36,8 +36,7 @@
:else
[:div
{:class (stl/css :grid-empty-placeholder)
:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
{:class (stl/css :grid-empty-placeholder)}
[:button {:class (stl/css :create-new)
:on-click on-click}
i/add-refactor]])

View file

@ -5,7 +5,7 @@
// Copyright (c) KALEIDOS INC
@use "common/refactor/common-refactor.scss" as *;
@use "./grid.scss";
@use "./grid.scss" as g;
.grid-empty-placeholder {
border-radius: $br-12;
@ -64,6 +64,8 @@
margin: $s-8;
text-transform: uppercase;
border: $s-2 solid transparent;
width: var(--th-width, #{g.$thumbnail-default-width});
height: calc(var(--th-width, #{g.$thumbnail-default-width}) * #{g.$thumbnail-aspect-ration});
svg {
width: $s-32;

View file

@ -147,7 +147,7 @@
.grid-container {
width: 100%;
padding: 0 $s-16;
padding: 0 $s-4;
}
&:hover,

View file

@ -321,7 +321,7 @@
width: $s-32;
position: absolute;
top: $s-12;
top: calc(50% - $s-12);
right: $s-2;
svg {

View file

@ -623,6 +623,10 @@
height: $s-32;
border-radius: $br-8;
background-color: var(--alert-background-color-warning);
padding: $s-24 $s-8;
gap: $s-8;
margin-bottom: $s-16;
.icon {
@include flexCenter;
width: $s-16;

View file

@ -366,7 +366,8 @@
limit (mth/min 10 nitems)
limit (mth/max 1 limit)
th-size (- (/ (- width (* (dec limit) 24)) limit) 12)]
th-size (when width
(- (/ (- width 32 (* (dec limit) 24)) limit) 12))]
(mf/with-effect
[th-size]

View file

@ -48,7 +48,7 @@
}
.fields-row {
--input-height: $s-40;
--input-height: #{$s-40};
margin-bottom: $s-20;
flex-direction: column;

View file

@ -81,7 +81,8 @@
node-ref (use-resize-observer on-resize)]
[:*
(if new-css-system
[:& palette {:layout layout}]
(when (not hide-ui?)
[:& palette {:layout layout}])
[:*
(when (and colorpalette? (not hide-ui?))
[:& colorpalette])

View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.viewport.top-bar
(:require-macros [app.main.style :as stl])
(:require
[app.common.files.helpers :as cfh]
[app.common.types.shape.layout :as ctl]
@ -18,6 +19,35 @@
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
(mf/defc view-only-actions
[]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
handle-close-view-mode
(mf/use-callback
(fn []
(st/emit! :interrupt
(dw/set-options-mode :design)
(dw/set-workspace-read-only false))))]
(if new-css-system
[:div {:class (stl/css :viewport-actions)}
[:div {:class (stl/css :viewport-actions-container)}
[:div {:class (stl/css :viewport-actions-title)}
[:& i18n/tr-html {:tag-name "span"
:label "workspace.top-bar.read-only"}]]
[:button {:class (stl/css :done-btn)
:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
[:button {:class (stl/css :close-btn)
:on-click handle-close-view-mode} i/close-refactor]]]
;; OLD
[:div.viewport-actions
[:div.viewport-actions-container
[:div.viewport-actions-title
[:& i18n/tr-html {:tag-name "span"
:label "workspace.top-bar.read-only"}]]
[:button.btn-primary {:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
[:button.btn-icon-basic {:on-click handle-close-view-mode} i/close]]])))
(mf/defc top-bar
{::mf/wrap [mf/memo]}
[]
@ -40,24 +70,11 @@
(not (cfh/frame-shape? shape))))
draw-path?)
grid-edition? (and single? editing? (ctl/grid-layout? shape))
handle-close-view-mode
(mf/use-callback
(fn []
(st/emit! :interrupt
(dw/set-options-mode :design)
(dw/set-workspace-read-only false))))]
grid-edition? (and single? editing? (ctl/grid-layout? shape))]
(cond
workspace-read-only?
[:div.viewport-actions
[:div.viewport-actions-container
[:div.viewport-actions-title
[:& i18n/tr-html {:tag-name "span"
:label "workspace.top-bar.read-only"}]]
[:button.btn-primary {:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
[:button.btn-icon-basic {:on-click handle-close-view-mode} i/close]]]
[:& view-only-actions]
path-edition?
[:div.viewport-actions

View file

@ -0,0 +1,47 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@import "refactor/common-refactor.scss";
.viewport-actions {
pointer-events: none;
position: absolute;
top: $s-44;
left: 50%;
.viewport-actions-container {
@include flexRow;
background: var(--panel-background-color);
border-radius: $br-12;
box-shadow: 0 0 $s-12 0 var(--menu-shadow-color);
gap: $s-8;
height: $s-48;
margin-left: -50%;
padding: $s-8;
pointer-events: initial;
width: $s-512;
}
.viewport-actions-title {
flex: 1;
font-size: $fs-12;
color: var(--color-foreground-secondary);
padding-left: $s-8;
}
.done-btn {
@extend .button-primary;
text-transform: uppercase;
padding: $s-8 $s-20;
font-size: $fs-11;
}
.close-btn {
@extend .button-tertiary;
svg {
@extend .button-icon;
}
}
}