mirror of
https://github.com/penpot/penpot.git
synced 2025-08-03 01:38:27 +02:00
♻️ Minor lightbox refactor.
This commit is contained in:
Andrey Antukh
Hirunatan
parent
a38430fb80
commit
69ae893bd0
8 changed files with 117 additions and 465 deletions
|
|
@ -58,7 +58,6 @@
|
|||
@import 'main/partials/forms';
|
||||
@import 'main/partials/left-toolbar';
|
||||
@import 'main/partials/library-bar';
|
||||
@import 'main/partials/lightbox';
|
||||
@import 'main/partials/loader';
|
||||
@import 'main/partials/main-bar';
|
||||
@import 'main/partials/modal';
|
||||
|
|
|
|||
|
|
@ -1,425 +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) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.lightbox {
|
||||
align-items: center;
|
||||
background-color: $color-dark-bg;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
|
||||
&.transparent {
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.lightbox-body {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-medium;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $medium $x-big;
|
||||
position: relative;
|
||||
width: 500px;
|
||||
@include animation(.1s,.5s,fadeInDown);
|
||||
|
||||
.lightbox-label {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
margin: $medium 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-text {
|
||||
margin: 1rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.project-size {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.input-text {
|
||||
margin-right: $small;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.toggle-layout {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
transform: rotate(45deg);
|
||||
top: -30px;
|
||||
|
||||
svg {
|
||||
fill: $color-white;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
fill: $color-danger;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
margin: $big auto 0 auto;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
// Export dialog
|
||||
&.export-dialog {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.big-lightbox {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.input-element {
|
||||
flex-direction: column;
|
||||
|
||||
&::after {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-60;
|
||||
font-size: $fs12;
|
||||
margin-left: $small;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox-big-btn {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 1rem;
|
||||
|
||||
.big-svg {
|
||||
background-color: $color-gray-10;
|
||||
border-radius: $br-medium;
|
||||
padding: 3rem;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
&.upload {
|
||||
|
||||
svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
color: $color-gray-20;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.big-svg {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Clipboard
|
||||
.clipboard {
|
||||
max-width: 350px;
|
||||
|
||||
.clipboard-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.clipboard-item {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: $small;
|
||||
width: 100%;
|
||||
|
||||
|
||||
span {
|
||||
|
||||
svg {
|
||||
height: 20px;
|
||||
fill: $color-gray-20;
|
||||
margin-right: $medium;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-primary
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.lightbox .confirm-dialog {
|
||||
background-color: $color-white;
|
||||
width: 23rem;
|
||||
|
||||
& .close {
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
|
||||
& svg {
|
||||
fill: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox .confirm-dialog-title {
|
||||
font-size: 24px;
|
||||
color: $color-black;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.confirm-dialog-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.confirm-dialog-cancel-button {
|
||||
border: 1px solid $color-gray-30;
|
||||
background: $color-canvas;
|
||||
border-radius: 2px;
|
||||
padding: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-dialog-accept-button {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid $color-danger;
|
||||
background: $color-danger;
|
||||
color: $color-white;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $color-danger-dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Export dialog
|
||||
.content-col {
|
||||
align-items: center;
|
||||
border-right: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 300px;
|
||||
height: 450px;
|
||||
padding: 2rem;
|
||||
|
||||
&:first-child{
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-medium;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: 120px;
|
||||
justify-content: center;
|
||||
width: 120px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $fs20;
|
||||
font-weight: 500;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: $fs16;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Import image library
|
||||
.import-img-library {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $medium;
|
||||
width: 100%;
|
||||
|
||||
.library-actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.toggle-library {
|
||||
display: flex;
|
||||
margin-right: $medium;
|
||||
|
||||
:first-child {
|
||||
border-top-left-radius: $br-medium;
|
||||
border-bottom-left-radius: $br-medium;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
border-right: 1px solid $color-gray-60;
|
||||
border-top-right-radius: $br-medium;
|
||||
border-bottom-right-radius: $br-medium;
|
||||
}
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray-60;
|
||||
border-right: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: $fs13;
|
||||
font-weight: bold;
|
||||
padding: $medium;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
&.current {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.library-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.library-item {
|
||||
border-radius: $br-medium;
|
||||
border: 1px solid $color-gray-60;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: $x-small;
|
||||
width: 23.5%;
|
||||
|
||||
.library-item-th {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-top-left-radius: $br-medium;
|
||||
border-top-right-radius: $br-medium;
|
||||
height: 100px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
span {
|
||||
@include text-ellipsis;
|
||||
padding: $small;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
|
||||
.library-item-th {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,23 @@
|
|||
.modal-wrapper {}
|
||||
|
||||
.modal-overlay {
|
||||
align-items: center;
|
||||
background-color: $color-dark-bg;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
|
||||
&.transparent {
|
||||
background-color: rgba($color-white, 0)
|
||||
}
|
||||
}
|
||||
|
||||
.modal,
|
||||
.generic-modal {
|
||||
background-color: $color-white;
|
||||
width: 565px;
|
||||
|
|
@ -53,3 +73,57 @@
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-dialog {
|
||||
background-color: $color-white;
|
||||
width: 23rem;
|
||||
|
||||
.modal-content {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-size: 24px;
|
||||
color: $color-black;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dialog-cancel-button {
|
||||
border: 1px solid $color-gray-30;
|
||||
background: $color-canvas;
|
||||
border-radius: 2px;
|
||||
padding: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-accept-button {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid $color-danger;
|
||||
background: $color-danger;
|
||||
color: $color-white;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $color-danger-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,19 +31,19 @@
|
|||
(modal/hide!)
|
||||
(when on-cancel
|
||||
(on-cancel (dissoc ctx :on-accept :on-cancel))))]
|
||||
[:div.lightbox-body.confirm-dialog
|
||||
[:h3.confirm-dialog-title message]
|
||||
(if hint [:span hint])
|
||||
[:div.modal-overlay
|
||||
[:div.modal.confirm-dialog
|
||||
[:a.close {:on-click cancel} i/close]
|
||||
[:div.modal-content
|
||||
[:h3.dialog-title message]
|
||||
(if hint [:span hint])
|
||||
[:div.dialog-buttons
|
||||
[:input.dialog-cancel-button
|
||||
{:type "button"
|
||||
:value cancel-text
|
||||
:on-click cancel}]
|
||||
|
||||
[:div.confirm-dialog-buttons
|
||||
[:input.confirm-dialog-cancel-button
|
||||
{:type "button"
|
||||
:value cancel-text
|
||||
:on-click cancel}]
|
||||
|
||||
[:input.confirm-dialog-accept-button
|
||||
{:type "button"
|
||||
:value accept-text
|
||||
:on-click accept}]]
|
||||
|
||||
[:a.close {:href "#" :on-click cancel} i/close]]))
|
||||
[:input.dialog-accept-button
|
||||
{:type "button"
|
||||
:value accept-text
|
||||
:on-click accept}]]]]]))
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
(ns uxbox.main.ui.modal
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[goog.events :as events]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.store :as st]
|
||||
|
|
@ -28,28 +29,29 @@
|
|||
[event parent-ref]
|
||||
(let [parent (mf/ref-val parent-ref)
|
||||
current (dom/get-target event)]
|
||||
(when (dom/equals? parent current)
|
||||
;; (js/console.log current (.-className ^js current))
|
||||
(when (and (dom/equals? (.-firstElementChild ^js parent) current)
|
||||
(str/includes? (.-className ^js current) "modal-overlay"))
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event)
|
||||
(reset! state nil))))
|
||||
|
||||
(mf/defc modal-wrapper
|
||||
[{:keys [component props]}]
|
||||
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(let [key (events/listen js/document EventType.KEYDOWN on-esc-clicked)]
|
||||
#(events/unlistenByKey %))))
|
||||
|
||||
(let [classes (classnames :transparent (:transparent? props))
|
||||
parent-ref (mf/use-ref nil)]
|
||||
[:div.lightbox {:class classes
|
||||
:ref parent-ref
|
||||
:on-click #(on-parent-clicked % parent-ref)
|
||||
}
|
||||
(mf/element component props)]))
|
||||
(let [ref (mf/use-ref nil)]
|
||||
[:div.modal-wrapper
|
||||
{:ref ref
|
||||
:on-click #(on-parent-clicked % ref)}
|
||||
[:& component props]]))
|
||||
|
||||
(mf/defc modal
|
||||
[_]
|
||||
[]
|
||||
(when-let [{:keys [component props]} (mf/deref state)]
|
||||
[:& modal-wrapper {:component component
|
||||
:props props
|
||||
|
|
|
|||
|
|
@ -101,8 +101,9 @@
|
|||
[props]
|
||||
(let [locale (mf/deref i18n/locale)
|
||||
profile (mf/deref refs/profile)]
|
||||
[:section.generic-modal.change-email-modal
|
||||
[:span.close {:on-click #(modal/hide!)} i/close]
|
||||
(if (:pending-email profile)
|
||||
[:& change-email-confirmation {:locale locale :profile profile}]
|
||||
[:& change-email-form {:locale locale :profile profile}])]))
|
||||
[:div.modal-overlay
|
||||
[:div.generic-modal.change-email-modal
|
||||
[:span.close {:on-click #(modal/hide!)} i/close]
|
||||
(if (:pending-email profile)
|
||||
[:& change-email-confirmation {:locale locale :profile profile}]
|
||||
[:& change-email-form {:locale locale :profile profile}])]]))
|
||||
|
|
|
|||
|
|
@ -15,13 +15,14 @@
|
|||
|
||||
(mf/defc colorpicker-modal
|
||||
[{:keys [x y default value opacity page on-change disable-opacity] :as props}]
|
||||
[:div.colorpicker-tooltip
|
||||
{:style {:left (str (- x 270) "px")
|
||||
:top (str (- y 50) "px")}}
|
||||
[:& cp/colorpicker {:value (or value default)
|
||||
:opacity (or opacity 1)
|
||||
:colors (into-array @cp/most-used-colors)
|
||||
:on-change on-change
|
||||
:disable-opacity disable-opacity}]])
|
||||
[:div.modal-overlay.transparent
|
||||
[:div.colorpicker-tooltip
|
||||
{:style {:left (str (- x 270) "px")
|
||||
:top (str (- y 50) "px")}}
|
||||
[:& cp/colorpicker {:value (or value default)
|
||||
:opacity (or opacity 1)
|
||||
:colors (into-array @cp/most-used-colors)
|
||||
:on-change on-change
|
||||
:disable-opacity disable-opacity}]]])
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@
|
|||
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
|
||||
[uxbox.common.data :as d]))
|
||||
|
||||
(defn color-picker-callback [color handle-change-color disable-opacity]
|
||||
(defn color-picker-callback
|
||||
[color handle-change-color disable-opacity]
|
||||
(fn [event]
|
||||
(let [x (.-clientX event)
|
||||
y (.-clientY event)
|
||||
|
|
@ -27,7 +28,6 @@
|
|||
:on-change handle-change-color
|
||||
:value (:value color)
|
||||
:opacity (:opacity color)
|
||||
:transparent? true
|
||||
:disable-opacity disable-opacity}]
|
||||
(modal/show! colorpicker-modal props))))
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue