Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-12 15:01:28 -05:00
Code Issues Activity

✨ Remove workspace partial scss stylesheet

Browse source
This commit is contained in:
Belén Albeza 2024-06-21 15:35:54 +02:00
parent ce9fb80558
commit c9258b5526
13 changed files with 131 additions and 341 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/resources/styles/common/refactor/color-defs.scss
View file

@ -6,10 +6,6 @@
@use "sass:color";
// TODO: legacy Sass colors, we should eventually try to remove them in
// favor of DS colors.
$color-gray-20: #b1b2b5;
:root {
// DARK
// Dark background

3
frontend/resources/styles/common/refactor/fonts.scss
View file

@ -23,3 +23,6 @@ $fs-36: math.div(36, $fs-base) + rem;
$fw400: 400; // Regular (CSS value: 'normal')
$fw500: 500; // Medium
$fw700: 700; // Bold (CSS value: 'bold')
// Line heights
$lh-150: 1.5;

3
frontend/resources/styles/main-default.scss
View file

@ -34,5 +34,6 @@
// Partials
//#################################################
// TODO: encapsulate pencil loader into its own component
// https: //tree.taiga.io/project/penpot/task/8217
@import "main/partials/loader";
@import "main/partials/workspace";

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

@ -1,311 +0,0 @@
// 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";
// TODO: legacy sass vars. To be removed in favor of DS tokens.
$br3: 3px;
$br4: 4px;
$lh-150: 1.5;
$width-left-toolbar: 48px;
$width-settings-bar: 256px;
$width-settings-bar-min: 255px;
$width-settings-bar-max: 500px;
$height-palette: 79px;
$height-palette-min: 54px;
$height-palette-max: 80px;
#workspace {
width: 100vw;
height: 100%;
user-select: none;
background-color: var(--color-canvas);
display: grid;
grid-template-areas:
"header header header header"
"toolbar left-sidebar viewport right-sidebar"
"toolbar left-sidebar color-palette right-sidebar";
grid-template-rows: auto 1fr auto;
grid-template-columns: auto auto 1fr auto;
.workspace-header {
grid-area: header;
height: 48px;
}
.left-toolbar {
grid-area: toolbar;
width: $width-left-toolbar;
overflow-y: auto;
overflow-x: hidden;
}
.settings-bar.settings-bar-left {
min-width: $width-settings-bar;
max-width: 500px;
width: var(--width, $width-settings-bar);
grid-area: left-sidebar;
}
.settings-bar.settings-bar-right {
height: 100%;
width: var(--width, $width-settings-bar);
grid-area: right-sidebar;
&.not-expand {
max-width: $width-settings-bar;
}
}
.workspace-content {
grid-area: viewport;
}
.color-palette {
grid-area: color-palette;
max-height: $height-palette-max;
height: var(--height, $height-palette);
}
}
.workspace-content {
background-color: var(--color-canvas);
display: flex;
padding: 0;
margin: 0;
grid-area: viewport;
&.scrolling {
cursor: grab;
}
&.no-tool-bar-right {
width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
right: 0;
.coordinates {
right: 10px;
}
}
&.no-tool-bar-left {
width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
&.no-tool-bar-right {
width: 100%;
}
}
.coordinates {
background-color: var(--db-primary);
border-radius: $br3;
bottom: 0px;
padding-left: 5px;
position: fixed;
right: calc(#{$width-settings-bar} + 14px);
text-align: center;
width: 125px;
white-space: nowrap;
padding-bottom: 2px;
transition: bottom 0.5s;
z-index: 2;
&.color-palette-open {
bottom: 5rem;
}
span {
color: var(--df-primary);
font-size: $fs-12;
padding-right: 5px;
}
}
.cursor-tooltip {
background-color: var(--db-secondary-40);
border-radius: $br3;
color: var(--df-primary);
font-size: $fs-12;
padding: 3px 8px;
transition: none;
text-align: center;
}
.workspace-viewport {
overflow: hidden;
transition: none;
display: grid;
grid-template-rows: 20px 1fr;
grid-template-columns: 20px 1fr;
flex: 1;
}
.viewport {
cursor: none;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
overflow: hidden;
position: relative;
.viewport-overlays {
cursor: initial;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
.pixel-overlay {
left: 0;
pointer-events: initial;
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
}
}
.render-shapes {
height: 100%;
position: absolute;
width: 100%;
}
.frame-thumbnail-wrapper {
.fills,
.frame-clip-def {
opacity: 0;
}
}
.viewport-controls {
position: absolute;
width: 100%;
height: 100%;
}
}
.page-canvas,
.page-layout {
overflow: visible;
}
/* Rules */
.empty-rule-square {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.horizontal-rule {
transition: none;
pointer-events: none;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
z-index: 13;
rect {
fill: var(--color-canvas);
}
path {
stroke: $color-gray-20;
}
}
.vertical-rule {
transition: none;
pointer-events: none;
grid-column: 1 / span 1;
grid-row: 2 / span 1;
z-index: 13;
rect {
fill: var(--color-canvas);
}
path {
stroke: $color-gray-20;
}
}
}
.workspace-frame-label {
font-size: $fs-12;
}
.multiuser-cursor {
z-index: 10000;
pointer-events: none;
}
.profile-name {
width: fit-content;
font-family: worksans;
padding: 2px 12px;
border-radius: $br4;
display: flex;
align-items: center;
height: 20px;
font-size: $fs-12;
line-height: $lh-150;
}
.viewport-actions {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
margin-left: auto;
margin-top: 2rem;
position: absolute;
width: 100%;
z-index: 12;
pointer-events: none;
.viewport-actions-container {
pointer-events: initial;
display: flex;
flex-direction: row;
background: var(--app-white);
border-radius: $br3;
padding: 0.5rem;
border: 1px solid $color-gray-20;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.viewport-actions-container {
padding-left: 1rem;
gap: 12px;
color: var(--db-primary);
align-items: center;
font-size: 12px;
.btn-primary,
.btn-secondary {
height: 24px;
}
.viewport-actions-title {
margin-right: 2rem;
}
.grid-edit-board-name {
font-weight: 600;
}
}
.viewport-actions-group {
display: flex;
flex-direction: row;
border-right: 1px solid $color-gray-20;
}
}

9
frontend/src/app/main/ui/workspace.cljs
View file

@ -86,8 +86,9 @@
[:& palette {:layout layout
:on-change-palette-size on-resize-palette}])
[:section.workspace-content
[:section
{:key (dm/str "workspace-" page-id)
:class (stl/css :workspace-content)
:ref node-ref}
[:section {:class (stl/css :workspace-viewport)}
@ -203,9 +204,9 @@
[:& (mf/provider ctx/current-page-id) {:value page-id}
[:& (mf/provider ctx/components-v2) {:value components-v2?}
[:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
[:section#workspace-refactor {:class (stl/css :workspace)
:style {:background-color background-color
:touch-action "none"}}
[:section {:class (stl/css :workspace)
:style {:background-color background-color
:touch-action "none"}}
[:& context-menu]
(if ^boolean file-ready?

10
frontend/src/app/main/ui/workspace.scss
View file

@ -6,13 +6,9 @@
@import "refactor/common-refactor.scss";
:global(:root) {
--s-4: 0.25rem;
--layer-indentation-size: calc(var(--s-4) * 6);
}
.workspace {
@extend .new-scrollbar;
--layer-indentation-size: calc($s-4 * 6);
width: 100vw;
height: 100vh;
max-height: 100vh;
@ -34,6 +30,10 @@
}
.workspace-content {
background-color: var(--color-canvas);
display: flex;
padding: 0;
margin: 0;
grid-area: viewport;
}

8
frontend/src/app/main/ui/workspace/coordinates.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.coordinates
(:require-macros [app.main.style :as stl])
(:require
[app.main.streams :as ms]
[app.main.ui.hooks :as hooks]
@ -13,8 +14,9 @@
(mf/defc coordinates
[{:keys [colorpalette?]}]
(let [coords (hooks/use-rxsub ms/mouse-position)]
[:ul.coordinates {:class (when colorpalette? "color-palette-open")}
[:span {:alt "x"}
[:div {:class (stl/css-case :container-color-palette-open colorpalette?
:container true)}
[:span {:alt "x" :class (stl/css :coordinate)}
(str "X: " (:x coords "-"))]
[:span {:alt "y"}
[:span {:alt "y" :class (stl/css :coordinate)}
(str "Y: " (:y coords "-"))]]))

33
frontend/src/app/main/ui/workspace/coordinates.scss Normal file
View file

@ -0,0 +1,33 @@
// 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
@use "common/refactor/common-refactor.scss" as *;
$width-settings-bar: 256px;
.container {
background-color: var(--db-primary);
border-radius: $br-4;
bottom: 0px;
padding: $s-2 $s-8;
position: fixed;
right: calc(#{$width-settings-bar} + #{$s-24});
text-align: center;
white-space: nowrap;
transition: bottom 0.5s;
z-index: 2;
display: flex;
column-gap: 0.5rem;
}
.container-color-palette-open {
bottom: $s-64;
}
.coordinate {
color: var(--df-primary);
font-size: $fs-12;
}

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

@ -44,7 +44,7 @@
calculate-padding-left (+ rulers-width (or left-sidebar-size min-left-sidebar-width) left-padding 1)]
#js {"paddingLeft" (dm/str calculate-padding-left "px")
"paddingRight" "calc(var(--s-4) * 70)"}))
"paddingRight" "280px"}))
(mf/defc palette
[{:keys [layout on-change-palette-size]}]

10
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.viewport
(:require-macros [app.main.style :as stl])
(:require
[app.common.colors :as clr]
[app.common.data :as d]
@ -276,9 +277,9 @@
(hooks/setup-shortcuts node-editing? drawing-path? text-editing? grid-editing?)
(hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)
[:div.viewport {:style #js {"--zoom" zoom} :data-testid "viewport"}
[:div {:class (stl/css :viewport) :style #js {"--zoom" zoom} :data-testid "viewport"}
[:& top-bar/top-bar {:layout layout}]
[:div.viewport-overlays
[:div {:class (stl/css :viewport-overlays)}
;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap
;; inside a foreign object "dummy" so this awkward behaviour is take into account
[:svg {:style {:top 0 :left 0 :position "fixed" :width "100%" :height "100%" :opacity (when-not (dbg/enabled? :html-text) 0)}}
@ -308,8 +309,9 @@
:layout layout
:viewport-ref viewport-ref}])]
[:svg.render-shapes
[:svg
{:id "render"
:class (stl/css :render-shapes)
:xmlns "http://www.w3.org/2000/svg"
:xmlnsXlink "http://www.w3.org/1999/xlink"
:xmlns:penpot "https://penpot.app/xmlns"
@ -359,7 +361,7 @@
:key (str "viewport" page-id)
:view-box (utils/format-viewbox vbox)
:ref on-viewport-ref
:class (dm/str @cursor (when drawing-tool " drawing"))
:class (dm/str @cursor (when drawing-tool " drawing") " " (stl/css :viewport-controls))
:style {:touch-action "none"}
:fill "none"

49
frontend/src/app/main/ui/workspace/viewport.scss Normal file
View file

@ -0,0 +1,49 @@
// 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
@use "common/refactor/common-refactor.scss" as *;
.viewport {
cursor: none;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
overflow: hidden;
position: relative;
}
.viewport-controls {
position: absolute;
width: 100%;
height: 100%;
}
.render-shapes {
height: 100%;
position: absolute;
width: 100%;
}
.viewport-overlays {
cursor: initial;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
.pixel-overlay {
left: 0;
pointer-events: initial;
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
}
}

12
frontend/src/app/main/ui/workspace/viewport/presence.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.viewport.presence
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.main.refs :as refs]
@ -40,15 +41,15 @@
(dm/str (str/slice fullname 0 12) "...")
fullname)]
[:g.multiuser-cursor {:transform transform}
[:g {:class (stl/css :multiuser-cursor) :transform transform}
[:path {:fill bg-color :d pointer-path}]
[:g {:transform "translate(17 -10)"}
[:foreignObject {:x -0.3
:y -12.5
:width 300
:height 120}
[:div.profile-name {:style {:background-color bg-color
:color fg-color}}
[:div {:class (stl/css :profile-name)
:style {:background-color bg-color :color fg-color}}
fullname]]]]))
(mf/defc active-cursors
@ -74,8 +75,3 @@
:zoom zoom
:profile (get users (:profile-id session))
:key (dm/str (:id session))}])))

18
frontend/src/app/main/ui/workspace/viewport/presence.scss Normal file
View file

@ -0,0 +1,18 @@
@use "refactor/common-refactor.scss" as *;
.profile-name {
width: fit-content;
font-family: worksans;
padding: 2px 12px;
border-radius: $br-4;
display: flex;
align-items: center;
height: 20px;
font-size: $fs-12;
line-height: $lh-150;
}
.multiuser-cursor {
z-index: 10000;
pointer-events: none;
}