mirror of
https://github.com/penpot/penpot.git
synced 2025-01-10 17:00:36 -05:00
♻️ Minor refactor of zoom-widget and workspace header.
This commit is contained in:
Andrey Antukh
parent
a038cb197b
commit
427273a09f
7 changed files with 355 additions and 464 deletions
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
@import 'main/partials/main-bar';
|
||||
@import 'main/partials/workspace';
|
||||
@import 'main/partials/workspace-bar';
|
||||
@import 'main/partials/workspace-header';
|
||||
@import 'main/partials/workspace-libraries';
|
||||
@import 'main/partials/tool-bar';
|
||||
@import 'main/partials/project-bar';
|
||||
|
|
@ -71,6 +71,7 @@
|
|||
@import 'main/partials/debug-icons-preview';
|
||||
@import 'main/partials/editable-label';
|
||||
@import 'main/partials/tab-container';
|
||||
@import "main/partials/zoom-widget";
|
||||
@import "main/partials/viewer-header";
|
||||
@import "main/partials/viewer-thumbnails";
|
||||
@import "main/partials/viewer";
|
||||
|
|
|
|||
|
|
@ -1,386 +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>
|
||||
|
||||
.workspace-bar {
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
padding: $x-small $medium $x-small 55px;
|
||||
position: relative;
|
||||
z-index: 12;
|
||||
|
||||
.preview {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 25px;
|
||||
justify-content: center;
|
||||
width: 25px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-menu {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 230px;
|
||||
z-index: 12;
|
||||
@include animation(0,.2s,fadeInDown);
|
||||
|
||||
background-color: $color-white;
|
||||
border-radius: $br-small;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
font-size: $fs12;
|
||||
padding: $small $x-small;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-60;
|
||||
margin: 0 $x-small;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main-icon {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
|
||||
a {
|
||||
height: 30px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 30px;
|
||||
width: 28px;
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
border-radius: $br-small;
|
||||
display: flex;
|
||||
margin-right: $x-small;
|
||||
padding: $x-small;
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
fill: $color-gray-20;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-tree-btn {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: $x-small;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 20px;
|
||||
margin-right: $small;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-white;
|
||||
font-size: $fs14;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.project-name {
|
||||
color: $color-gray-20;
|
||||
margin-right: $x-small;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.workspace-options {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.zoom-input {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
color: $color-gray-10;
|
||||
font-size: $fs15;
|
||||
margin-left: $x-small;
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
svg {
|
||||
fill: $color-gray-10;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-dropdown {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 12;
|
||||
width: 150px;
|
||||
@include animation(0,.2s,fadeInDown);
|
||||
|
||||
background-color: $color-white;
|
||||
border-radius: $br-small;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
|
||||
li {
|
||||
color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
font-size: $fs12;
|
||||
display: flex;
|
||||
padding: $small;
|
||||
|
||||
span {
|
||||
color: $color-gray-40;
|
||||
font-size: $fs12;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.add-zoom,
|
||||
.remove-zoom {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
color: $color-gray-20;
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
flex-shrink: 0;
|
||||
font-size: $fs20;
|
||||
font-weight: bold;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.add-zoom,
|
||||
.remove-zoom {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.options-btn {
|
||||
align-items: center;
|
||||
border-right: 4px double $color-gray-60;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
margin: 0 $small;
|
||||
position: relative;
|
||||
width: 30px;
|
||||
|
||||
a {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-gray-10;
|
||||
border-color: $color-gray-60;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.secondary-options {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
.view-mode {
|
||||
background-color: $color-gray-20;
|
||||
align-items: center;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
margin: 0 $small;
|
||||
position: relative;
|
||||
width: 30px;
|
||||
|
||||
a {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.user-multi {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin-left: $small;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
border: 3px solid #f3dd14;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiuser-cursor {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 10000;
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
fill: #f3dd14;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
span {
|
||||
background-color: #f3dd14;
|
||||
border-radius: $br-small;
|
||||
color: $color-black;
|
||||
font-size: $fs12;
|
||||
margin-left: $small;
|
||||
padding: $x-small;
|
||||
}
|
||||
}
|
||||
209
frontend/resources/styles/main/partials/workspace-header.scss
Normal file
209
frontend/resources/styles/main/partials/workspace-header.scss
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
// 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>
|
||||
|
||||
.workspace-header {
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
padding: $x-small $medium $x-small 55px;
|
||||
position: relative;
|
||||
z-index: 12;
|
||||
justify-content: space-between;
|
||||
|
||||
.main-icon {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
|
||||
a {
|
||||
height: 30px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 30px;
|
||||
width: 28px;
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.menu-section {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.users-section {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.options-section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
> * {
|
||||
margin-left: $big;
|
||||
}
|
||||
|
||||
.zoom-dropdown {
|
||||
top: 45px;
|
||||
left: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
border-radius: $br-small;
|
||||
display: flex;
|
||||
margin-right: $x-small;
|
||||
padding: $x-small;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
fill: $color-gray-20;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-tree {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: $x-small;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 20px;
|
||||
margin-right: $small;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-white;
|
||||
font-size: $fs14;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.project-name {
|
||||
color: $color-gray-20;
|
||||
margin-right: $x-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-button {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 25px;
|
||||
justify-content: center;
|
||||
width: 25px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 230px;
|
||||
z-index: 12;
|
||||
@include animation(0,.2s,fadeInDown);
|
||||
|
||||
background-color: $color-white;
|
||||
border-radius: $br-small;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
font-size: $fs12;
|
||||
padding: $small $x-small;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-60;
|
||||
margin: 0 $x-small;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active-users {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin-left: $small;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
border: 3px solid #f3dd14;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -183,3 +183,28 @@
|
|||
fill: $color-primary-dark;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.multiuser-cursor {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 10000;
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
fill: #f3dd14;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
span {
|
||||
background-color: #f3dd14;
|
||||
border-radius: $br-small;
|
||||
color: $color-black;
|
||||
font-size: $fs12;
|
||||
margin-left: $small;
|
||||
padding: $x-small;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
45
frontend/resources/styles/main/partials/zoom-widget.scss
Normal file
45
frontend/resources/styles/main/partials/zoom-widget.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.zoom-widget {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
color: $color-gray-10;
|
||||
font-size: $fs14;
|
||||
margin-left: $x-small;
|
||||
}
|
||||
|
||||
.dropdown-button svg {
|
||||
fill: $color-gray-10;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.zoom-dropdown {
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
width: 150px;
|
||||
|
||||
background-color: $color-white;
|
||||
border-radius: $br-small;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
|
||||
li {
|
||||
color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
font-size: $fs12;
|
||||
display: flex;
|
||||
padding: $small;
|
||||
|
||||
span {
|
||||
color: $color-gray-40;
|
||||
font-size: $fs12;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.components.dropdown :refer [dropdown]]
|
||||
[uxbox.main.ui.workspace.header :refer [zoom-widget]]
|
||||
[uxbox.main.data.viewer :as dv]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
|
|
@ -28,34 +29,6 @@
|
|||
(:import goog.events.EventType
|
||||
goog.events.KeyCodes))
|
||||
|
||||
(mf/defc zoom-widget
|
||||
{:wrap [mf/memo]}
|
||||
[{:keys [zoom] :as props}]
|
||||
(let [show-dropdown? (mf/use-state false)
|
||||
increase #(st/emit! dv/increase-zoom)
|
||||
decrease #(st/emit! dv/decrease-zoom)
|
||||
zoom-to-50 #(st/emit! dv/zoom-to-50)
|
||||
zoom-to-100 #(st/emit! dv/reset-zoom)
|
||||
zoom-to-200 #(st/emit! dv/zoom-to-200)]
|
||||
[:div.zoom-widget
|
||||
[:span.add-zoom {:on-click decrease} "-"]
|
||||
[:div.input-container {:on-click #(reset! show-dropdown? true)}
|
||||
[:span {} (str (mth/round (* 100 zoom)) "%")]
|
||||
[:span.dropdown-button i/arrow-down]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close #(reset! show-dropdown? false)}
|
||||
[:ul.zoom-dropdown
|
||||
[:li {:on-click increase}
|
||||
"Zoom in" [:span "+"]]
|
||||
[:li {:on-click decrease}
|
||||
"Zoom out" [:span "-"]]
|
||||
[:li {:on-click zoom-to-50}
|
||||
"Zoom to 50%"]
|
||||
[:li {:on-click zoom-to-100}
|
||||
"Zoom to 100%" [:span "Shift + 0"]]
|
||||
[:li {:on-click zoom-to-200}
|
||||
"Zoom to 200%"]]]]
|
||||
[:span.remove-zoom {:on-click increase} "+"]]))
|
||||
|
||||
(mf/defc share-link
|
||||
[{:keys [page] :as props}]
|
||||
|
|
@ -123,8 +96,16 @@
|
|||
(when-not anonymous?
|
||||
[:& share-link {:page (:page data)}])
|
||||
(when-not anonymous?
|
||||
[:span.btn-primary {:on-click on-edit} "Edit page"])
|
||||
[:& zoom-widget {:zoom (:zoom local)}]
|
||||
[:a {:on-click on-edit} "Edit page"])
|
||||
|
||||
[:& zoom-widget
|
||||
{:zoom (:zoom local)
|
||||
:on-increase #(st/emit! dv/increase-zoom)
|
||||
:on-decrease #(st/emit! dv/decrease-zoom)
|
||||
:on-zoom-to-50 #(st/emit! dv/zoom-to-50)
|
||||
:on-zoom-to-100 #(st/emit! dv/reset-zoom)
|
||||
:on-zoom-to-200 #(st/emit! dv/zoom-to-200)}]
|
||||
|
||||
[:span.btn-fullscreen.tooltip.tooltip-bottom
|
||||
{:alt "Full Screen"
|
||||
:on-click toggle-fullscreen}
|
||||
|
|
|
|||
|
|
@ -30,33 +30,38 @@
|
|||
|
||||
(mf/defc zoom-widget
|
||||
{:wrap [mf/memo]}
|
||||
[props]
|
||||
(let [zoom (mf/deref refs/selected-zoom)
|
||||
show-dropdown? (mf/use-state false)
|
||||
increase #(st/emit! dw/increase-zoom)
|
||||
decrease #(st/emit! dw/decrease-zoom)
|
||||
zoom-to-50 #(st/emit! dw/zoom-to-50)
|
||||
zoom-to-100 #(st/emit! dw/reset-zoom)
|
||||
zoom-to-200 #(st/emit! dw/zoom-to-200)]
|
||||
[:div.zoom-input
|
||||
[:span.add-zoom {:on-click decrease} "-"]
|
||||
[:div {:on-click #(reset! show-dropdown? true)}
|
||||
[:span {} (str (mth/round (* 100 zoom)) "%")]
|
||||
[:span.dropdown-button i/arrow-down]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close #(reset! show-dropdown? false)}
|
||||
[:ul.zoom-dropdown
|
||||
[:li {:on-click increase}
|
||||
"Zoom in" [:span "+"]]
|
||||
[:li {:on-click decrease}
|
||||
"Zoom out" [:span "-"]]
|
||||
[:li {:on-click zoom-to-50}
|
||||
"Zoom to 50%" [:span "Shift + 0"]]
|
||||
[:li {:on-click zoom-to-100}
|
||||
"Zoom to 100%" [:span "Shift + 1"]]
|
||||
[:li {:on-click zoom-to-200}
|
||||
"Zoom to 200%" [:span "Shift + 2"]]]]]
|
||||
[:span.remove-zoom {:on-click increase} "+"]]))
|
||||
[{:keys [zoom
|
||||
on-increase
|
||||
on-decrease
|
||||
on-zoom-to-50
|
||||
on-zoom-to-100
|
||||
on-zoom-to-200]
|
||||
:as props}]
|
||||
(let [show-dropdown? (mf/use-state false)
|
||||
;; increase #(st/emit! dv/increase-zoom)
|
||||
;; decrease #(st/emit! dv/decrease-zoom)
|
||||
;; zoom-to-50 #(st/emit! dv/zoom-to-50)
|
||||
;; zoom-to-100 #(st/emit! dv/reset-zoom)
|
||||
;; zoom-to-200 #(st/emit! dv/zoom-to-200)
|
||||
]
|
||||
[:div.zoom-widget {:on-click #(reset! show-dropdown? true)}
|
||||
[:span {} (str (mth/round (* 100 zoom)) "%")]
|
||||
[:span.dropdown-button i/arrow-down]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close #(reset! show-dropdown? false)}
|
||||
[:ul.zoom-dropdown
|
||||
[:li {:on-click on-increase}
|
||||
"Zoom in" [:span "+"]]
|
||||
[:li {:on-click on-decrease}
|
||||
"Zoom out" [:span "-"]]
|
||||
[:li {:on-click on-zoom-to-50}
|
||||
"Zoom to 50%"]
|
||||
[:li {:on-click on-zoom-to-100}
|
||||
"Zoom to 100%" [:span "Shift + 0"]]
|
||||
[:li {:on-click on-zoom-to-200}
|
||||
"Zoom to 200%"]]]]))
|
||||
|
||||
|
||||
|
||||
;; --- Header Users
|
||||
|
||||
|
|
@ -77,7 +82,7 @@
|
|||
[props]
|
||||
(let [profile (mf/deref refs/profile)
|
||||
users (mf/deref refs/workspace-users)]
|
||||
[:ul.user-multi
|
||||
[:ul.active-users
|
||||
[:& user-widget {:user profile :self? true}]
|
||||
(for [id (->> (:active users)
|
||||
(remove #(= % (:id profile))))]
|
||||
|
|
@ -85,16 +90,22 @@
|
|||
:key id}])]))
|
||||
|
||||
(mf/defc menu
|
||||
[{:keys [layout] :as props}]
|
||||
[{:keys [layout project file] :as props}]
|
||||
(let [show-menu? (mf/use-state false)
|
||||
toggle-sitemap #(st/emit! (dw/toggle-layout-flag :sitemap))
|
||||
locale (i18n/use-locale)]
|
||||
|
||||
[:*
|
||||
[:div.menu-btn {:on-click #(reset! show-menu? true)} i/actions]
|
||||
[:div.menu-section
|
||||
[:div.menu-button {:on-click #(reset! show-menu? true)} i/actions]
|
||||
[:div.project-tree {:alt (t locale "header.sitemap")
|
||||
:class (classnames :selected (contains? layout :sitemap))
|
||||
:on-click toggle-sitemap}
|
||||
[:span.project-name (:name project) " /"]
|
||||
[:span (:name file)]]
|
||||
|
||||
[:& dropdown {:show @show-menu?
|
||||
:on-close #(reset! show-menu? false)}
|
||||
[:ul.workspace-menu
|
||||
[:ul.menu
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :rules))}
|
||||
[:span i/ruler]
|
||||
[:span
|
||||
|
|
@ -139,28 +150,33 @@
|
|||
|
||||
(mf/defc header
|
||||
[{:keys [page file layout project] :as props}]
|
||||
(let [go-to-dashboard #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))
|
||||
toggle-sitemap #(st/emit! (dw/toggle-layout-flag :sitemap))
|
||||
(let [locale (i18n/use-locale)
|
||||
go-to-dashboard #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))
|
||||
zoom (mf/deref refs/selected-zoom)
|
||||
locale (i18n/use-locale)
|
||||
router (mf/deref router-ref)
|
||||
view-url (rt/resolve router :viewer {:page-id (:id page)} {:index 0})]
|
||||
[:header.workspace-bar
|
||||
[:header.workspace-header
|
||||
[:div.main-icon
|
||||
[:a {:on-click go-to-dashboard} i/logo-icon]]
|
||||
|
||||
[:& menu {:layout layout}]
|
||||
[:& menu {:layout layout
|
||||
:project project
|
||||
:file file}]
|
||||
|
||||
[:div.project-tree-btn {:alt (tr "header.sitemap")
|
||||
:class (classnames :selected (contains? layout :sitemap))
|
||||
:on-click toggle-sitemap}
|
||||
[:span.project-name (:name project) " /"]
|
||||
[:span (:name file)]]
|
||||
|
||||
[:div.workspace-options
|
||||
[:div.users-section
|
||||
[:& active-users]]
|
||||
|
||||
[:& zoom-widget]
|
||||
[:div.options-section
|
||||
[:& zoom-widget
|
||||
{:zoom zoom
|
||||
:on-increase #(st/emit! dw/increase-zoom)
|
||||
:on-decrease #(st/emit! dw/decrease-zoom)
|
||||
:on-zoom-to-50 #(st/emit! dw/zoom-to-50)
|
||||
:on-zoom-to-100 #(st/emit! dw/reset-zoom)
|
||||
:on-zoom-to-200 #(st/emit! dw/zoom-to-200)}]
|
||||
|
||||
[:a.preview-button
|
||||
{;; :target "__blank"
|
||||
:href (str "#" view-url)} i/play]]]))
|
||||
|
||||
[:a.preview {
|
||||
;; :target "__blank"
|
||||
:href (str "#" view-url)} i/play]]))
|
||||
|
|
|
|||
Loading…
Reference in a new issue