Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 00:40:30 -05:00
Code Issues Activity

✨ Use CSS modules for styling the debug icons preview page

Browse source
This commit is contained in:
Belén Albeza 2024-06-21 14:16:53 +02:00
parent 9a2ee806e4
commit cd8e2540de
6 changed files with 108 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -34,6 +34,5 @@
// Partials
//#################################################
@import "main/partials/debug-icons-preview";
@import "main/partials/loader";
@import "main/partials/workspace";

70
frontend/resources/styles/main/partials/debug-icons-preview.scss
View file

@ -1,70 +0,0 @@
.debug-preview {
display: flex;
flex-direction: column;
overflow: scroll;
height: 100%;
h1 {
color: white;
font-size: 24px;
display: block;
width: 100vw;
margin: 12px;
}
}
.debug-icons-preview {
display: flex;
flex-wrap: wrap;
h2 {
color: white;
font-size: 16px;
display: block;
width: 100vw;
margin: 12px;
}
.subtitle-old {
color: #ff3277;
}
.icon-item,
.cursor-item,
.icon-item-old {
padding: 10px;
display: flex;
flex-direction: column;
width: 120px;
height: 120px;
margin: 10px;
align-items: center;
svg {
width: 100%;
height: 100%;
min-width: 16px;
min-height: 16px;
fill: none;
color: transparent;
stroke: #91fadb;
}
span {
color: white;
max-width: 100px;
overflow: hidden;
font-size: 12px;
margin-top: 4px;
word-break: break-word;
min-height: 40px;
}
}
.cursor-item div,
.icon-item-old svg {
stroke: #aab5ba;
}
.cursor-item {
height: auto;
}
}

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

@ -10,8 +10,8 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.cursors :as c]
[app.main.ui.debug.components-preview :as cm]
[app.main.ui.debug.icons-preview :refer [icons-preview]]
[app.main.ui.frame-preview :as frame-preview]
[app.main.ui.icons :as i]
[app.main.ui.messages :as msgs]
@ -76,11 +76,7 @@
:debug-icons-preview
(when *assert*
[:div.debug-preview
[:h1 "Cursors"]
[:& c/debug-preview]
[:h1 "Icons"]
[:& i/debug-icons-preview]])
[:& icons-preview])
(:dashboard-search
:dashboard-projects

31
frontend/src/app/main/ui/cursors.cljs
View file

@ -5,11 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.cursors
(:require-macros [app.main.ui.cursors :refer [cursor-ref cursor-fn collect-cursors]])
(:require
[app.util.timers :as ts]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(:require-macros [app.main.ui.cursors :refer [cursor-ref cursor-fn collect-cursors]]))
;; Static cursors
(def ^:cursor comments (cursor-ref :comments 0 2 20))
@ -53,28 +49,3 @@
(def default
"A collection of all icons"
(collect-cursors))
(mf/defc debug-preview
{::mf/wrap-props false}
[]
(let [rotation (mf/use-state 0)
entries (->> (seq (js/Object.entries default))
(sort-by first))]
(mf/with-effect []
(ts/interval 100 #(reset! rotation inc)))
[:section.debug-icons-preview
(for [[key value] entries]
(let [value (if (fn? value) (value @rotation) value)]
[:div.cursor-item {:key key}
[:div {:style {:width "100px"
:height "100px"
:background-image (-> value (str/replace #"(url\(.*\)).*" "$1"))
:background-size "contain"
:background-repeat "no-repeat"
:background-position "center"
:cursor value}}]
[:span {:style {:white-space "nowrap"
:margin-right "1rem"}} (pr-str key)]]))]))

54
frontend/src/app/main/ui/debug/icons_preview.cljs Normal file
View file

@ -0,0 +1,54 @@
(ns app.main.ui.debug.icons-preview
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.cursors :as c]
[app.main.ui.icons :as i]
[app.util.timers :as ts]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(mf/defc icons-gallery
{::mf/wrap-props false
::mf/private true}
[]
(let [entries (->> (seq (js/Object.entries i/default))
(sort-by first))]
[:section {:class (stl/css :gallery)}
(for [[key val] entries]
[:div {:class (stl/css :gallery-item)
:key key
:title key}
val
[:span key]])]))
(mf/defc cursors-gallery
{::mf/wrap-props false
::mf/private true}
[]
(let [rotation (mf/use-state 0)
entries (->> (seq (js/Object.entries c/default))
(sort-by first))]
(mf/with-effect []
(ts/interval 100 #(reset! rotation inc)))
[:section {:class (stl/css :gallery)}
(for [[key value] entries]
(let [value (if (fn? value) (value @rotation) value)]
[:div {:key key :class (stl/css :gallery-item)}
[:div {:class (stl/css :cursor)
:style {:background-image (-> value (str/replace #"(url\(.*\)).*" "$1"))
:cursor value}}]
[:span (pr-str key)]]))]))
(mf/defc icons-preview
{::mf/wrap-props false}
[]
[:article {:class (stl/css :container)}
[:h2 {:class (stl/css :title)} "Cursors"]
[:& cursors-gallery]
[:h2 {:class (stl/css :title)} "Icons"]
[:& icons-gallery]])

51
frontend/src/app/main/ui/debug/icons_preview.scss Normal file
View file

@ -0,0 +1,51 @@
@use "common/refactor/common-refactor.scss" as *;
.container {
display: grid;
row-gap: 1rem;
height: 100vh;
overflow-y: auto;
padding: 1rem;
}
.title {
@include bigTitleTipography;
color: var(--color-foreground-primary);
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, 120px);
grid-template-rows: repeat(auto-fill, 120px);
gap: 1rem;
--cell-size: 64px;
}
.gallery-item {
display: grid;
place-items: center;
row-gap: 0.5rem;
grid-template-rows: var(--cell-size) 1fr;
padding: 0.5rem;
color: var(--color-foreground-primary);
word-break: break-word;
@include bodySmallTypography;
svg {
width: var(--cell-size);
height: var(--cell-size);
fill: none;
color: transparent;
stroke: var(--color-accent-primary);
}
}
.cursor {
width: var(--cell-size);
height: var(--cell-size);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}