Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 15:39:50 -05:00
Code Issues Activity

Merge pull request #3680 from penpot/eva-redesign-prototype-tab

Browse source 
💄 Update prototype tab desgin with new UI
This commit is contained in:
Aitor Moreno 2023-10-05 16:47:31 +02:00 • committed by GitHub
commit 77964604fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 1252 additions and 385 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/easing-ease-in-out-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2C4.667 2 11.333 14 2 14"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 159 B

3
frontend/resources/images/icons/easing-ease-in-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 14c8.667 0 12-12 12-12"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 156 B

3
frontend/resources/images/icons/easing-ease-out-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2C5.333 2 2 14 2 14"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 154 B

3
frontend/resources/images/icons/easing-ease-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2C2 2 7.333 14 2 14"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 154 B

3
frontend/resources/images/icons/easing-linear-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M2.667 13.333L13.333 2.667"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 157 B

3
frontend/resources/images/icons/interaction-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 7.833h6m0 0l-2.469-2.5M11 7.833l-2.469 2.5M8 15A7 7 0 108 1a7 7 0 000 14z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 207 B

39
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -375,6 +375,37 @@
}
}
.input-checkbox {
display: flex;
align-items: center;
label {
@include titleTipography;
display: flex;
align-items: center;
gap: $s-6;
cursor: pointer;
span {
@include flexCenter;
width: $s-16;
height: $s-16;
min-width: $s-16;
min-height: $s-16;
border-radius: $br-6;
background-color: var(--input-background-color);
&:global(.checked) {
background-color: var(--input-border-color-active);
svg {
@extend .button-icon-small;
stroke: var(--input-details-color);
}
}
}
input {
margin: 0;
}
}
}
//MODALS
.modal-background {
@include menuShadow;
@ -467,8 +498,14 @@
border-color: var(--colorpicker-details-color-selected);
}
}
// SELECTS AND DROPDOWNS
.attr-row {
display: grid;
grid-template-areas: "name content";
grid-template-columns: $s-92 1fr;
}
// SELECTS AND DROPDOWNS
.menu-dropdown {
@include menuShadow;
position: absolute;

3
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -14,6 +14,8 @@
--panel-background-color: var(--color-background-primary);
--panel-title-background-color: var(--color-background-secondary);
// BUTTONS
--button-foreground-hover: var(--color-accent-primary);
--button-background-focus: var(--color-background-secondary);
--button-foreground-focus: var(--color-foreground-primary);
@ -84,6 +86,7 @@
--constraint-widget-background-color: var(--color-background-tertiary);
--constraint-center-area-background-color: var(--color-background-primary);
// ICONS
--icon-foreground: var(--color-foreground-secondary);
--icon-foreground-hover: var(--color-foreground-primary);

17
frontend/src/app/main/ui/components/select.cljs
View file

@ -19,8 +19,8 @@
(defn- as-key-value
[item]
(if (map? item)
[(:value item) (:label item)]
[item item]))
[(:value item) (:label item) (:icon item)]
[item item item]))
(mf/defc select
[{:keys [default-value options class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
@ -42,7 +42,7 @@
open-dropdown
(mf/use-fn
(mf/deps disabled)
(fn[]
(fn []
(when-not disabled
(swap! state* assoc :is-open? true))))
@ -82,10 +82,16 @@
(mf/with-effect [default-value]
(swap! state* assoc :current-value default-value))
(if new-css-system
[:div {:on-click open-dropdown
:class (dm/str class " " (stl/css-case :custom-select true
:disabled disabled))}
(let [selected-option (first (filter #(= (:value %) default-value) options))
current-icon (:icon selected-option)
current-icon-ref (i/key->icon current-icon)]
(when (and current-icon current-icon-ref)
[:span {:class (stl/css :current-icon)} @current-icon-ref]))
[:span {:class (stl/css :current-label)} current-label]
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
[:& dropdown {:show is-open? :on-close close-dropdown}
@ -94,7 +100,8 @@
(if (= :separator item)
[:li {:class (dom/classnames (stl/css :separator) true)
:key (dm/str current-id "-" index)}]
(let [[value label] (as-key-value item)]
(let [[value label icon] (as-key-value item)
icon-ref (i/key->icon icon)]
[:li
{:key (dm/str current-id "-" index)
:class (dom/classnames
@ -104,10 +111,10 @@
:on-pointer-enter highlight-item
:on-pointer-leave unhighlight-item
:on-click select-item}
(when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref])
[:span {:class (stl/css :label)} label]
[:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]]
[:div.custom-select {:on-click open-dropdown :class class}
[:span current-label]
[:span.dropdown-button i/arrow-down]

21
frontend/src/app/main/ui/components/select.scss
View file

@ -24,6 +24,16 @@
width: 100%;
flex-grow: 1;
}
.current-icon {
@include flexCenter;
height: $s-24;
width: $s-24;
padding-right: $s-4;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.dropdown-button {
@include flexCenter;
svg {
@ -42,6 +52,17 @@
.checked-element {
@extend .dropdown-element-base;
.icon {
@include flexCenter;
height: $s-24;
width: $s-24;
padding-right: $s-4;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.label {
flex-grow: 1;
width: 100%;

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

@ -7,7 +7,11 @@
(ns app.main.ui.icons
(:refer-clojure :exclude [import mask])
(:require-macros [app.main.ui.icons :refer [icon-xref]])
(:require [rumext.v2 :as mf]))
(:require
[app.common.data :as d]
[rumext.v2 :as mf]))
;; Keep the list of icons sorted
@ -320,6 +324,11 @@
(def detach-refactor (icon-xref :detach-refactor))
(def document-refactor (icon-xref :document-refactor))
(def drop-refactor (icon-xref :drop-refactor))
(def easing-linear-refactor (icon-xref :easing-linear-refactor))
(def easing-ease-refactor (icon-xref :easing-ease-refactor))
(def easing-ease-in-refactor (icon-xref :easing-ease-in-refactor))
(def easing-ease-out-refactor (icon-xref :easing-ease-out-refactor))
(def easing-ease-in-out-refactor (icon-xref :easing-ease-in-out-refactor))
(def effects-refactor (icon-xref :effects-refactor))
(def elipse-refactor (icon-xref :elipse-refactor))
(def fill-content-refactor (icon-xref :fill-content-refactor))
@ -348,6 +357,7 @@
(def hug-content-refactor (icon-xref :hug-content-refactor))
(def img-refactor (icon-xref :img-refactor))
(def icon-refactor (icon-xref :icon-refactor))
(def interaction-refactor (icon-xref :interaction-refactor))
(def join-nodes-refactor (icon-xref :join-nodes-refactor))
(def justify-content-column-around-refactor (icon-xref :justify-content-column-around-refactor))
(def justify-content-column-between-refactor (icon-xref :justify-content-column-between-refactor))
@ -466,3 +476,8 @@
[:div.icon-item {:key key}
(deref val)
[:span (pr-str key)]]))])
(defn key->icon
[icon-key]
(when icon-key
(get (ns-publics 'app.main.ui.icons) (symbol (d/name icon-key)))))

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

@ -175,7 +175,7 @@
(and (= type :multiple) (some? (:hide-fill-on-export values))))
[:div {:class (stl/css :checkbox)}
[:label {:for "show-fill-on-export"
:class (stl/css-case :checked (not hide-fill-on-export?))}
:class (stl/css-case :global/checked (not hide-fill-on-export?))}
[:span {:class (stl/css-case :check-mark true
:checked (not hide-fill-on-export?))}
(when (not hide-fill-on-export?)

27
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
View file

@ -38,35 +38,10 @@
}
}
.checkbox {
display: flex;
align-items: center;
@extend .input-checkbox;
margin-bottom: $s-8;
margin-top: calc(-1 * $s-4);
padding-left: $s-8;
input {
margin: 0;
}
label {
@include titleTipography;
display: flex;
align-items: center;
gap: $s-6;
cursor: pointer;
.check-mark {
@include flexCenter;
width: $s-16;
height: $s-16;
border-radius: $br-6;
background-color: var(--input-background-color);
&.checked {
background-color: var(--input-border-color-active);
svg {
@extend .button-icon-small;
stroke: var(--input-details-color);
}
}
}
}
}
}
}

1241
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

File diff suppressed because it is too large Load diff

244
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss Normal file
View file

@ -0,0 +1,244 @@
// 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";
.interactions-content {
display: flex;
flex-direction: column;
gap: $s-8;
.interaction-options {
display: flex;
flex-direction: column;
gap: $s-4;
.element-title {
.add-interaction-btn {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
}
.help-content {
.help-group {
margin-bottom: $s-40;
.interactions-help-icon {
@include flexCenter;
width: $s-48;
height: $s-48;
border-radius: $br-circle;
background-color: var(--pill-background-color);
margin: 0 auto $s-12 auto;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
height: $s-32;
width: $s-32;
}
}
.interactions-help {
@include titleTipography;
text-align: center;
}
}
}
.groups {
display: flex;
flex-direction: column;
gap: $s-4;
.element-set-options-group {
&.open {
display: flex;
flex-direction: column;
gap: $s-4;
.extended-options {
display: flex;
flex-direction: column;
gap: $s-4;
.property-row {
@extend .attr-row;
.interaction-name {
@include twoLineTextEllipsis;
@include titleTipography;
padding-left: $s-4;
width: $s-92;
margin: auto 0;
grid-area: name;
}
.select-wrapper {
display: flex;
align-items: center;
grid-area: content;
}
.input-element-wrapper {
@extend .input-element;
grid-area: content;
}
.checkbox-option {
@extend .input-checkbox;
grid-area: content;
}
.position-btns-wrapper {
grid-area: content;
display: grid;
grid-template-areas:
"topleft top topright"
"left center right"
"bottomleft bottom bottomright";
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
width: $s-84;
height: $s-84;
border-radius: $br-8;
background-color: var(--color-background-tertiary);
.direction-btn {
@extend .button-tertiary;
height: $s-28;
width: $s-28;
.rectangle {
height: $s-8;
width: $s-8;
background-color: var(--color-background-quaternary);
}
&:hover {
.rectangle {
background-color: var(--color-accent-primary);
}
}
&.active {
background-color: var(--color-background-quaternary);
.rectangle {
background-color: var(--color-accent-primary);
}
}
}
.center-btn {
grid-area: center;
}
.top-left-btn {
grid-area: topleft;
}
.top-right-btn {
grid-area: topright;
}
.top-center-btn {
grid-area: top;
}
.bottom-left-btn {
grid-area: bottomleft;
}
.bottom-right-btn {
grid-area: bottomright;
}
.bottom-center-btn {
grid-area: bottom;
}
}
.buttons-wrapper {
grid-area: content;
.right svg {
transform: rotate(-90deg);
}
.left svg {
transform: rotate(90deg);
}
.up svg {
transform: rotate(180deg);
}
}
.inputs-wrapper {
grid-area: content;
display: flex;
align-items: center;
gap: $s-4;
.radio-btn {
@extend .input-checkbox;
}
}
}
}
}
.interactions-summary {
@extend .asset-element;
height: $s-44;
padding: 0;
gap: $s-4;
.extend-btn {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
}
}
.interactions-info {
flex-grow: 1;
.trigger-name {
color: white;
}
.action-summary {
color: var(--color-foreground-secondary);
}
}
.remove-btn {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
}
}
}
}
}
}
.element-set {
display: flex;
flex-direction: column;
gap: $s-4;
.add-flow-btn {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
}
}
}
}
.flow-element {
@extend .asset-element;
padding: 0;
gap: $s-4;
.start-flow-btn {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
}
}
.input-text {
@extend .input-base;
}
.flow-name-label {
flex-grow: 1;
}
.remove-flow-btn {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
}
}
}

4
frontend/translations/en.po
View file

@ -3676,6 +3676,10 @@ msgstr "Fill"
msgid "workspace.options.flows.add-flow-start"
msgstr "Add flow start"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.flows.flow"
msgstr "Flow"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.flows.flow-start"
msgstr "Flow start"

4
frontend/translations/es.po
View file

@ -3763,6 +3763,10 @@ msgstr "Añadir inicio de flujo"
msgid "workspace.options.flows.flow-start"
msgstr "Inicio de flujo"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.flows.flow"
msgstr "Flujo"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.flows.flow-starts"
msgstr "Inicios de flujo"