Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 23:18:48 -05:00
Code Issues Activity

✨ New overlay for v2 information

Browse source
This commit is contained in:
alonso.torres 2024-02-12 11:49:34 +01:00 • committed by Andrey Antukh
parent dd3040c56f
commit af7142e97b
11 changed files with 148 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
backend/src/app/rpc/commands/auth.clj
View file

@ -262,7 +262,8 @@
(merge (:props params))
(merge {:viewed-tutorial? false
:viewed-walkthrough? false
:nudge {:big 10 :small 1}})
:nudge {:big 10 :small 1}
:v2-info-shown true})
(db/tjson))
password (or (:password params) "!")

1
frontend/resources/images/icons/v2-icon-1.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4494 307 310 290"><path d="m4643.25 309.15-18.86 15.75a9.32 9.32 0 0 0-1.2 13.1 9.26 9.26 0 0 0 13.07 1.2l3.67-3.05.2 82.04a103.8 103.8 0 0 0-14.46-19.07c-15.68-16.23-36.46-25.7-59.17-26.11a86.83 86.83 0 0 0-11.04.52l1.91-3.29a9.32 9.32 0 0 0-3.42-12.57 9.26 9.26 0 0 0-12.6 3.2l-12.59 21.63a9.32 9.32 0 0 0 2.1 11.86l18.93 15.67a9.26 9.26 0 0 0 9.16 1.54 9.32 9.32 0 0 0 2.66-15.9l-4.42-3.66c21.64-2.66 40.4 4.82 55.14 20.07 16.68 17.27 27.77 45.12 27.98 79.86-.05 9.54.04 19.06.07 28.6-10.61-16.53-24.8-30.38-40.13-40.85-15.92-10.87-33.13-18.28-49.55-21.38-8.2-1.55-16.3-2.04-23.93-1.2-2.3.26-4.6.66-6.85 1.2l1.09-2.8a9.27 9.27 0 0 0-17.27-6.77l-9.1 23.32a9.32 9.32 0 0 0 3.91 11.4l21.13 12.53a9.26 9.26 0 0 0 12.54-3.37 9.32 9.32 0 0 0-3.1-12.65l-5.56-3.3c6.54-1.62 14.64-1.77 23.72-.05 13.42 2.53 28.56 8.92 42.53 18.46 27.92 19.09 50.72 50.2 50.72 87.3v.03l.02 5.3a9.3 9.3 0 0 0 9.3 9.29 9.29 9.29 0 0 0 9.25-9.32v-2.77c.5-37.1 19.92-67.3 48.22-89.72 13.17-9.62 27.44-15.99 39.99-18.46 10.08-2 18.76-1.4 25.26 1.19l-4 2.43a9.32 9.32 0 0 0-3.14 12.79 9.26 9.26 0 0 0 12.74 3.14l21.37-13a9.32 9.32 0 0 0 3.78-11.43l-9.17-22.82a9.27 9.27 0 1 0-17.21 6.96l1.72 4.29a50.78 50.78 0 0 0-11.87-2.93c-7.38-.92-15.18-.45-23.06 1.11-15.78 3.1-32.2 10.63-47.34 21.68a142.37 142.37 0 0 0-37.45 40.54l-.07-24.5c.65-34.78 11.26-64.22 26.98-82.93 15.4-18.33 34.64-26.71 56.88-22.07l-4.52 2.74a9.32 9.32 0 0 0-3 12.7 9.26 9.26 0 0 0 12.6 3.22l21.37-12.99a9.32 9.32 0 0 0 3.79-11.43l-9.17-22.83a9.27 9.27 0 0 0-12.08-5.15 9.32 9.32 0 0 0-5.14 12.11l1.5 3.74a73.41 73.41 0 0 0-19.47-1.8c-22.03.99-42.11 12.09-56.95 29.76a115.7 115.7 0 0 0-12.97 19.25l-.2-83.78 3.47 3.03a9.26 9.26 0 0 0 12.97-1.03 9.32 9.32 0 0 0-.8-13.02l-18.87-16.42a9.26 9.26 0 0 0-12.01-.13Z" paint-order="fill markers"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
frontend/resources/images/icons/v2-icon-2.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4870 326 249.25 261.8"><path fill="#000" d="M5050.75 326.04a8.57 8.57 0 0 0-7.77 3.58l-19.12 27.03a8.57 8.57 0 0 0 0 9.9l19.12 27.04a8.57 8.57 0 0 0 15.44-3.5 8.57 8.57 0 0 0-1.45-6.4l-8.43-11.92c13.34-.5 22.4 1.84 28.61 5.26 6.78 3.74 10.6 8.83 13.14 14.83 2.54 6 3.51 12.91 3.77 19.07.24 6.16-.26 11.02-.19 15.04a8.57 8.57 0 0 0 8.7 8.43 8.57 8.57 0 0 0 8.44-8.69c-.02-1.7.47-8.1.17-15.49-.3-7.37-1.4-16.26-5.1-25.03a46.95 46.95 0 0 0-20.64-23.17c-9.83-5.43-22.72-8.14-39.22-7.3l10.75-15.21a8.57 8.57 0 0 0-2.05-11.93 8.56 8.56 0 0 0-4.17-1.54Zm-158.97 1.7A21.92 21.92 0 0 0 4870 349.5v61.37a21.92 21.92 0 0 0 21.77 21.78h61.38a21.92 21.92 0 0 0 21.78-21.77v-61.37a21.92 21.92 0 0 0-21.77-21.79h-61.38Zm0 17.13h61.37a4.46 4.46 0 0 1 4.64 4.64v61.37a4.46 4.46 0 0 1-4.63 4.65h-61.38a4.45 4.45 0 0 1-4.63-4.65v-61.37a4.45 4.45 0 0 1 4.63-4.63Zm-5.1 134.52a8.57 8.57 0 0 0-8.43 8.7c.02 1.7-.47 8.1-.17 15.47.3 7.37 1.4 16.26 5.1 25.04a47 47 0 0 0 20.65 23.18c9.83 5.41 22.7 8.14 39.2 7.3l-10.74 15.2a8.57 8.57 0 0 0 8.44 13.4 8.57 8.57 0 0 0 5.56-3.51l19.1-27.04a8.57 8.57 0 0 0 0-9.9l-19.1-27.03a8.57 8.57 0 0 0-5.56-3.5 8.57 8.57 0 0 0-8.44 13.4l8.42 11.92c-13.34.5-22.4-1.82-28.6-5.24-6.78-3.74-10.6-8.83-13.14-14.83-2.54-6.02-3.51-12.92-3.77-19.08-.24-6.16.26-11.02.2-15.03a8.57 8.57 0 0 0-8.71-8.45Zm152.1 1.74a24.6 24.6 0 0 0-24.46 24.46v56.02a24.6 24.6 0 0 0 24.47 24.45h56a24.6 24.6 0 0 0 24.46-24.45v-56.02a24.6 24.6 0 0 0-24.45-24.46h-56.02Zm0 17.14h56.02a7.12 7.12 0 0 1 7.31 7.32v56.02a7.11 7.11 0 0 1-7.31 7.3h-56.02a7.12 7.12 0 0 1-5.23-2.07 7.12 7.12 0 0 1-2.09-5.23v-56.02a7.11 7.11 0 0 1 7.33-7.32Z" class="fills" color="#000" paint-order="fill markers"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
frontend/resources/images/icons/v2-icon-3.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4563 696 212.14 362.63"><path d="M4669.07 696a41.22 41.22 0 0 0-29.24 12.07l-64.76 64.75a41.47 41.47 0 0 0 0 58.49l8.39 8.39-8.39 8.38a41.47 41.47 0 0 0 0 58.5l8.38 8.38-8.36 8.37a41.47 41.47 0 0 0 0 58.49l64.73 64.73a41.48 41.48 0 0 0 58.5.01l64.74-64.73a41.49 41.49 0 0 0 0-58.51l-8.37-8.38 8.37-8.37a41.47 41.47 0 0 0 0-58.5l-8.38-8.37 8.39-8.38a41.47 41.47 0 0 0 0-58.5l-64.75-64.75a41.25 41.25 0 0 0-29.25-12.07Zm0 18.28a22.85 22.85 0 0 1 16.2 6.83l64.76 64.75a22.68 22.68 0 0 1 0 32.42l-64.74 64.75a22.68 22.68 0 0 1-32.43.01l-64.76-64.75a22.68 22.68 0 0 1 0-32.43l64.75-64.75a22.86 22.86 0 0 1 16.22-6.83Zm0 52.73c-4.3 0-8.62 1.62-11.85 4.85l-18.35 18.36a16.89 16.89 0 0 0 0 23.7l18.35 18.35a16.89 16.89 0 0 0 23.7 0l18.36-18.35a16.89 16.89 0 0 0-.01-23.7l-18.35-18.35a16.7 16.7 0 0 0-11.85-4.86Zm0 15.19c.34 0 .68.16 1.01.5l18.36 18.35c.66.67.68 1.38.01 2.05l-18.35 18.35c-.67.67-1.4.67-2.06 0l-18.36-18.35c-.66-.66-.65-1.39.01-2.05l18.35-18.35c.34-.33.68-.5 1.03-.5Zm-72.58 70.53 43.33 43.33a41.47 41.47 0 0 0 58.5.01l43.33-43.33 8.37 8.37a22.68 22.68 0 0 1 0 32.42l-64.75 64.75a22.68 22.68 0 0 1-32.43 0l-64.73-64.73a22.68 22.68 0 0 1 0-32.44Zm145.17 75.24 8.37 8.37a22.7 22.7 0 0 1 0 32.45l-64.74 64.74a22.7 22.7 0 0 1-32.44-.01l-64.73-64.74a22.67 22.67 0 0 1 0-32.42l8.36-8.37 43.33 43.33a41.47 41.47 0 0 0 58.5 0Z" paint-order="fill markers"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
frontend/resources/images/icons/v2-icon-4.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4870 696 216.34 319.12"><path d="M5052.72 696a5.69 5.69 0 0 0-5.8 4.77c-1.72 10.62-4.08 20.19-7.8 27-3.71 6.79-8.19 10.82-15.77 12.25-6.11 1.16-6.17 9.92-.07 11.15 7.97 1.64 12.63 5.72 16.33 12.39 3.7 6.68 5.93 16.05 7.27 26.7.89 6.88 10.98 6.47 11.32-.46.83-18.37 4.47-27.31 8.37-31.76 3.9-4.45 8.67-5.56 15.17-6.85 5.8-1.12 6.24-9.26.6-11.01-7.53-2.35-12.77-6.54-16.73-12.94-3.95-6.4-6.46-15.15-7.41-26.06a5.69 5.69 0 0 0-5.48-5.18Zm-151.65 71.03c-17.13.1-31 13.97-31.07 31.1v185.9a31.21 31.21 0 0 0 31.07 31.09h136.32a31.24 31.24 0 0 0 31.1-31.08V871.7c0-6.01-1.92-12.93-6.51-17.91-21.13-22.9-59.2-64.23-73.79-78.82-4-4.01-10.62-7.95-17.97-7.95Zm0 18.43h65.88v71.29c0 6.42 4.03 12.41 8.53 15.12 4.51 2.71 9.05 3.33 13.15 3.33h61.43v108.83a12.44 12.44 0 0 1-12.67 12.66h-136.32a12.42 12.42 0 0 1-12.65-12.66v-185.9a12.44 12.44 0 0 1 12.65-12.67Zm84.31 13.15a5423.07 5423.07 0 0 1 54.24 58.17h-50.99a8.99 8.99 0 0 1-3.25-.62Z" paint-order="fill markers"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1,012 B

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

@ -15,6 +15,7 @@ $fs-11: 0.688rem;
$fs-12: math.div(12, $fs-base) + rem;
$fs-14: math.div(14, $fs-base) + rem;
$fs-16: math.div(16, $fs-base) + rem;
$fs-18: math.div(18, $fs-base) + rem;
$fs-24: math.div(24, $fs-base) + rem;
$fs-36: math.div(36, $fs-base) + rem;

13
frontend/src/app/main/data/workspace.cljs
View file

@ -35,6 +35,7 @@
[app.main.data.events :as ev]
[app.main.data.fonts :as df]
[app.main.data.messages :as msg]
[app.main.data.modal :as modal]
[app.main.data.users :as du]
[app.main.data.workspace.bool :as dwb]
[app.main.data.workspace.changes :as dch]
@ -119,10 +120,14 @@
(assoc :workspace-ready? true)))
ptk/WatchEvent
(watch [_ _ _]
(rx/of (fbc/fix-bool-contents)
(fdf/fix-deleted-fonts)
(fbs/fix-broken-shapes)))))
(watch [_ state _]
(rx/of
(when (and (not (boolean (-> state :profile :props :v2-info-shown)))
(features/active-feature? state "components/v2"))
(modal/show :v2-info {}))
(fbc/fix-bool-contents)
(fdf/fix-deleted-fonts)
(fbs/fix-broken-shapes)))))
(defn- workspace-data-loaded
[data]

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

@ -50,3 +50,7 @@
@extend .modal-danger-btn;
}
}
.modal-msg {
color: var(--modal-text-foreground-color);
}

5
frontend/src/app/main/ui/icons.cljs
View file

@ -479,6 +479,11 @@
(def ^:icon cap-round (icon-xref :cap-round))
(def ^:icon cap-square (icon-xref :cap-square))
(def ^:icon v2-icon-1 (icon-xref :v2-icon-1))
(def ^:icon v2-icon-2 (icon-xref :v2-icon-2))
(def ^:icon v2-icon-3 (icon-xref :v2-icon-3))
(def ^:icon v2-icon-4 (icon-xref :v2-icon-4))
(def ^:icon loader-pencil
(mf/html

56
frontend/src/app/main/ui/workspace/libraries.cljs
View file

@ -15,6 +15,7 @@
[app.common.types.typographies-list :as ctyl]
[app.common.uuid :as uuid]
[app.main.data.modal :as modal]
[app.main.data.users :as du]
[app.main.data.workspace.libraries :as dwl]
[app.main.refs :as refs]
[app.main.render :refer [component-svg]]
@ -511,3 +512,58 @@
[:& updates-tab {:file-id file-id
:file-data file-data
:libraries libraries}]]]]]]]]))
(mf/defc v2-info-dialog
{::mf/register modal/components
::mf/register-as :v2-info}
[]
(let [handle-gotit-click
(mf/use-fn
(fn []
(modal/hide!)
(st/emit! (du/update-profile-props {:v2-info-shown true}))))]
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-dialog :modal-v2-info)}
[:div {:class (stl/css :modal-title)} "IMPORTANT INFORMATION ABOUT NEW COMPONENTS"]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :info-content)}
[:div {:class (stl/css :info-block)}
[:div {:class (stl/css :info-icon)} i/v2-icon-1]
[:div {:class (stl/css :info-block-title)}
"One physical source of truth"]
[:div {:class (stl/css :info-block-content)}
"Main components are now found at the design space. They act as a single source "
"of truth and can be worked on with their copies. This ensures consistency and "
"allows better control and synchronization."]]
[:div {:class (stl/css :info-block)}
[:div {:class (stl/css :info-icon)} i/v2-icon-2]
[:div {:class (stl/css :info-block-title)}
"Swap components"]
[:div {:class (stl/css :info-block-content)}
"Now, you can replace one component copy with another within your libraries. "
"The swap components functionality streamlines making changes, testing "
"variations, or updating elements without extensive manual adjustments."]]
[:div {:class (stl/css :info-block)}
[:div {:class (stl/css :info-icon)} i/v2-icon-3]
[:div {:class (stl/css :info-block-title)}
"Graphic assets no longer exist"]
[:div {:class (stl/css :info-block-content)}
"Graphic assets now disappear, so that all graphic assets become components. "
"This way, swapping between them is possible, and we avoid confusion about "
"what should go in each typology."]]
[:div {:class (stl/css :info-block)}
[:div {:class (stl/css :info-icon)} i/v2-icon-4]
[:div {:class (stl/css :info-block-title)}
"Main components page"]
[:div {:class (stl/css :info-block-content)}
"You might find that a new page called 'Main components' has appeared in "
"your file. On that page, you'll find all the main components that were "
"created in your files previously to this new version."]]]
[:div {:class (stl/css :info-bottom)}
[:button {:class (stl/css :primary-button)
:on-click handle-gotit-click} "I GOT IT"]]]]]))

67
frontend/src/app/main/ui/workspace/libraries.scss
View file

@ -228,6 +228,15 @@
}
}
}
.modal-v2-info {
width: $s-664;
height: fit-content;
.modal-title {
font-size: $fs-18;
}
}
}
.item-contents {
@ -245,3 +254,61 @@
margin-inline: $s-4;
}
}
.info-content {
margin-top: $s-32;
display: flex;
flex-direction: column;
gap: $s-24;
.info-block {
display: grid;
grid-template-columns: auto 1fr;
column-gap: $s-20;
grid-template:
"icon title"
"icon content";
}
.info-icon {
grid-area: icon;
width: $s-52;
height: $s-52;
margin-top: $s-8;
border-radius: $br-circle;
background: $db-quaternary;
display: flex;
justify-content: center;
align-items: center;
svg {
width: $s-32;
height: $s-32;
fill: $da-primary;
}
}
.info-block-title {
grid-area: title;
font-size: $fs-16;
color: $df-primary;
}
.info-block-content {
grid-area: content;
font-size: $fs-14;
color: $df-secondary;
line-height: 1.2;
}
}
.info-bottom {
margin-top: $s-24;
margin-right: $s-8;
display: flex;
justify-content: flex-end;
.primary-button {
@extend .button-primary;
@include tabTitleTipography;
padding: $s-0 $s-16;
}
}