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

Merge pull request #3882 from penpot/alotor-new-ui-fixes

Browse source 
New UI Fixes
This commit is contained in:
Alejandro 2023-12-01 16:45:05 +01:00 • committed by GitHub
commit 573ce0e4ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 154 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/ui/components/forms.scss
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 {

2
frontend/src/app/main/ui/dashboard.scss
View file

@ -25,4 +25,6 @@
position: relative;
grid-row: 1 / span 2;
padding: $s-16 $s-16 0 0;
overflow: hidden;
width: 100%;
}

26
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -459,6 +459,7 @@
[:button
{:class (stl/css-case :selected selected? :library library-view?)
:ref node-ref
:title (:name file)
:draggable true
:on-click on-select
:on-key-down handle-key-down
@ -634,20 +635,17 @@
[:& loading-placeholder]
(seq files)
[:ul
{:class (stl/css :grid-row)
:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
(when @dragging?
[:li {:class (stl/css :grid-item)}])
(for [item files]
[:& grid-item
{:file item
:key (:id item)
:navigate? true
:origin origin
:library-view? library-view?}])]
(for [slice (partition-all limit files)]
[:ul {:class (stl/css :grid-row)}
(when @dragging?
[:li {:class (stl/css :grid-item)}])
(for [item slice]
[:& grid-item
{:file item
:key (:id item)
:navigate? true
:origin origin
:library-view? library-view?}])])
:else
[:& empty-placeholder

36
frontend/src/app/main/ui/dashboard/grid.scss
View file

@ -6,17 +6,21 @@
@import "refactor/common-refactor.scss";
$thumbnail-default-width: $s-252; // Default width
$thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
.dashboard-grid {
font-size: $fs-14;
height: 100%;
overflow-y: auto;
overflow: hidden;
overflow-x: hidden;
padding: 0 $s-16;
}
.grid-row {
display: grid;
display: flex;
width: 100%;
padding: 0 $s-12;
gap: $s-24;
}
.grid-item {
@ -24,9 +28,7 @@
cursor: pointer;
display: flex;
flex-direction: column;
flex: 1 0 $s-260;
height: $s-232;
margin: $s-12 $s-16 $s-16 $s-8;
margin: $s-12 0;
position: relative;
text-align: center;
@ -38,16 +40,14 @@
button {
background-color: transparent;
border: none;
}
@media #{$bp-max-1366} {
height: $s-200;
flex: 1 0 $s-232;
padding: 0 $s-6;
}
.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});
img {
object-fit: contain;
@ -56,9 +56,10 @@
&.dragged {
border-radius: $br-4;
border: $br-2 solid $da-primary;
outline: $br-4 solid $da-primary;
text-align: initial;
max-height: $s-160;
width: calc(var(--th-width) + $s-12);
height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
}
&.overlay {
@ -81,6 +82,7 @@
display: grid;
grid-template-columns: 1fr auto;
cursor: pointer;
max-width: var(--th-width, $thumbnail-default-width);
}
.item-info {
@ -198,7 +200,7 @@
.selected {
.grid-item-th {
border: 2px solid $da-tertiary;
outline: $s-4 solid $da-tertiary;
}
}
}
@ -261,8 +263,7 @@
background-size: auto 80%;
background-repeat: no-repeat;
height: $s-232;
max-height: $s-160;
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
@ -294,7 +295,6 @@
.grid-item.project-th.library {
height: $s-612;
width: $s-300;
}
.grid-item-th.library {
@ -302,7 +302,7 @@
flex-direction: column;
height: 90%;
justify-content: flex-start;
max-height: 550px;
max-height: $s-580;
padding: $s-32;
.asset-section {

4
frontend/src/app/main/ui/dashboard/libraries.cljs
View file

@ -51,10 +51,10 @@
(if new-css-system
[:*
[:header {:class (stl/css :dashboard-header) :ref rowref}
[:header {:class (stl/css :dashboard-header)}
[:div#dashboard-libraries-title {:class (stl/css :dashboard-title)}
[:h1 (tr "dashboard.libraries-title")]]]
[:section {:class (stl/css :dashboard-container :no-bg :dashboard-shared)}
[:section {:class (stl/css :dashboard-container :no-bg :dashboard-shared) :ref rowref}
[:& grid {:files files
:project default-project
:origin :libraries

4
frontend/src/app/main/ui/dashboard/libraries.scss
View file

@ -17,10 +17,6 @@
&.dashboard-projects {
user-select: none;
}
&.dashboard-shared {
width: calc(100vw - $s-320);
margin-right: $s-52;
}
&.search {
margin-top: $s-12;

3
frontend/src/app/main/ui/dashboard/placeholder.cljs
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]])

8
frontend/src/app/main/ui/dashboard/placeholder.scss
View file

@ -5,14 +5,12 @@
// 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;
display: grid;
padding: $s-12;
margin-right: $s-12;
height: $s-232;
padding: $s-12 0;
&.loader {
justify-items: center;
@ -66,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;

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

@ -246,7 +246,6 @@
:edition? (= (:id project) edit-id)})
[rowref limit] (hooks/use-dynamic-grid-item-width)
on-nav
(mf/use-fn
(mf/deps project-id team-id)
@ -344,7 +343,7 @@
(if new-css-system
[:article {:class (stl/css-case :dashboard-project-row true :first first?)}
[:header {:class (stl/css :project) :ref rowref}
[:header {:class (stl/css :project)}
[:div {:class (stl/css :project-name-wrapper)}
(if (:edition? @local)
[:& inline-edition {:content (:name project)
@ -403,12 +402,13 @@
:on-key-down handle-menu-click}
i/actions]]]]
[:& line-grid
{:project project
:team team
:files files
:create-fn create-file
:limit limit}]
[:div {:class (stl/css :grid-container) :ref rowref}
[:& line-grid
{:project project
:team team
:files files
:create-fn create-file
:limit limit}]]
(when (and (> limit 0)
(> file-count limit))

5
frontend/src/app/main/ui/dashboard/projects.scss
View file

@ -145,6 +145,11 @@
}
}
.grid-container {
width: 100%;
padding: 0 $s-4;
}
&:hover,
&:focus,
&:focus-within {

2
frontend/src/app/main/ui/dashboard/sidebar.scss
View file

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

4
frontend/src/app/main/ui/dashboard/team.scss
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;

20
frontend/src/app/main/ui/hooks.cljs
View file

@ -1,3 +1,4 @@
;; 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/.
@ -350,9 +351,7 @@
(defn use-dynamic-grid-item-width
([] (use-dynamic-grid-item-width nil))
([itemsize]
(let [;; NOTE: we pass a function to use-state for avoid repeatedly
;; lookup `:items-width` on storage on each render
width* (mf/use-state #(:items-width @storage))
(let [width* (mf/use-state nil)
width (deref width*)
rowref (mf/use-ref)
@ -365,20 +364,27 @@
ratio (if (some? width) (/ width itemsize) 0)
nitems (mth/floor ratio)
limit (mth/min 10 nitems)
limit (mth/max 1 limit)]
limit (mth/max 1 limit)
th-size (when width
(- (/ (- width 32 (* (dec limit) 24)) limit) 12))]
(mf/with-effect
[th-size]
(when th-size
(let [node (mf/ref-val rowref)]
(.setProperty (.-style node) "--th-width" (str th-size "px")))))
(mf/with-effect []
(let [node (mf/ref-val rowref)
mnt? (volatile! true)
sub (->> (wapi/observe-resize node)
(rx/observe-on :af)
(rx/subs (fn [entries]
(let [row (first entries)
row-rect (.-contentRect ^js row)
row-width (.-width ^js row-rect)]
(when @mnt?
(reset! width* row-width)
(swap! storage assoc :items-width row-width))))))]
(reset! width* row-width))))))]
(fn []
(vreset! mnt? false)
(rx/dispose! sub))))

2
frontend/src/app/main/ui/settings/profile.scss
View file

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

3
frontend/src/app/main/ui/workspace.cljs
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])

47
frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
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

47
frontend/src/app/main/ui/workspace/viewport/top_bar.scss Normal file
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;
}
}
}