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:
parent
76a2f9bc8c
commit
e9a42bbc69
12 changed files with 101 additions and 29 deletions
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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]])
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -147,7 +147,7 @@
|
|||
|
||||
.grid-container {
|
||||
width: 100%;
|
||||
padding: 0 $s-16;
|
||||
padding: 0 $s-4;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
|
@ -321,7 +321,7 @@
|
|||
width: $s-32;
|
||||
|
||||
position: absolute;
|
||||
top: $s-12;
|
||||
top: calc(50% - $s-12);
|
||||
right: $s-2;
|
||||
|
||||
svg {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -48,7 +48,7 @@
|
|||
}
|
||||
|
||||
.fields-row {
|
||||
--input-height: $s-40;
|
||||
--input-height: #{$s-40};
|
||||
margin-bottom: $s-20;
|
||||
flex-direction: column;
|
||||
|
||||
|
|
|
@ -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])
|
||||
|
|
|
@ -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
|
||||
|
|
47
frontend/src/app/main/ui/workspace/viewport/top_bar.scss
Normal file
47
frontend/src/app/main/ui/workspace/viewport/top_bar.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Add table
Reference in a new issue