Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-14 02:58:39 -05:00
Code Issues Activity

✨ Fix many visual issues on viewer share by link.

Browse source
This commit is contained in:
Andrey Antukh 2020-04-08 13:03:35 +02:00
parent d2e0913170
commit a038cb197b
3 changed files with 63 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/resources/styles/common/framework.scss
View file

@ -25,7 +25,7 @@
flex-shrink: 0;
}
&.btn-small {
font-size: $fs12;
font-size: $fs13;
padding: .7rem 1rem;
line-height: 1.15;
}

155
frontend/resources/styles/main/partials/viewer-header.scss
View file

@ -9,6 +9,10 @@
z-index: 12;
justify-content: space-between;
a {
font-size: $fs13;
}
.main-icon {
align-items: center;
background-color: $color-gray-60;
@ -85,9 +89,13 @@
align-items: center;
display: flex;
width: 300px;
justify-content: space-between;
justify-content: flex-end;
position: relative;
> * {
margin-left: $big;
}
.btn-share {
display: flex;
align-items: center;
@ -107,6 +115,10 @@
padding: 0.4rem 1rem;
}
.btn-primary.btn-small {
height: 25px;
}
.btn-fullscreen {
align-items: center;
background-color: $color-gray-60;
@ -134,23 +146,25 @@
}
.share-link-dropdown {
position: absolute;
left: -180px;
top: 45px;
background-color: $color-gray-50;
background-color: $color-white;
border-radius: $br-small;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
left: -180px;
position: absolute;
padding: 1rem;
top: 45px;
width: 400px;
.share-link-title {
font-size: 18px;
color: $color-black;
font-size: $fs15;
padding-bottom: 1rem;
}
.share-link-subtitle {
color: $color-gray-40;
padding-bottom: 1rem;
}
@ -168,111 +182,50 @@
}
.share-link-input {
display: flex;
justify-content: space-between;
padding: $small;
align-items: center;
border: 1px solid $color-gray-30;
border: 1px solid $color-gray-20;
border-radius: 3px;
display: flex;
height: 40px;
justify-content: space-between;
margin-bottom: 1rem;
padding: 9px $small;
overflow: hidden;
.link {
color: $color-gray-50;
line-height: 1.5;
user-select: all;
overflow: hidden;
}
svg {
width: 20px;
height: 20px;
fill: $color-gray-20;
stroke: $color-gray-20;
.link-button {
color: $color-primary-dark;
cursor: pointer;
flex-shrink: 0;
font-size: $fs15;
&:hover {
color: $color-black;
}
}
}
&:before {
background-color: $color-white;
content: "";
height: 16px;
left: 53%;
position: absolute;
transform: rotate(45deg);
top: -5px;
width: 16px;
}
}
.zoom-widget {
cursor: pointer;
align-items: center;
display: flex;
position: relative;
.input-container {
display: flex;
}
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: -25px;
top: 45px;
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;
}
}
}
.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%;
}
}
.zoom-dropdown {
left : 150px;
top: 45px;
}
.users-zone {

14
frontend/src/uxbox/main/ui/viewer/header.cljs
View file

@ -67,10 +67,10 @@
delete #(st/emit! dv/delete-share-link)
href (.-href js/location)]
[:*
[:span.btn-share.tooltip.tooltip-bottom
[:span.btn-primary.btn-small
{:alt "Share link"
:on-click #(swap! show-dropdown? not)}
i/exit]
"Share link"]
[:& dropdown {:show @show-dropdown?
:on-close #(swap! show-dropdown? not)
@ -80,8 +80,8 @@
[:div.share-link-input
(if (string? token)
[:span.link (str href "&token=" token)]
[:span "Share link will apear here"])
i/chain]
[:span.link-placeholder "Share link will apear here"])
[:span.link-button "Copy link"]]
[:span.share-link-subtitle "Anyone with the link will have access"]
[:div.share-link-buttons
(if (string? token)
@ -126,9 +126,11 @@
[:span.btn-primary {:on-click on-edit} "Edit page"])
[:& zoom-widget {:zoom (:zoom local)}]
[:span.btn-fullscreen.tooltip.tooltip-bottom
{:alt "Full screen"
{:alt "Full Screen"
:on-click toggle-fullscreen}
i/full-screen]
(if fullscreen?
i/full-screen-off
i/full-screen)]
]]))