diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 3cfb82e03..80db6b5fc 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -25,7 +25,7 @@ flex-shrink: 0; } &.btn-small { - font-size: $fs12; + font-size: $fs13; padding: .7rem 1rem; line-height: 1.15; } diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss index 130274e78..4372e4837 100644 --- a/frontend/resources/styles/main/partials/viewer-header.scss +++ b/frontend/resources/styles/main/partials/viewer-header.scss @@ -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 { diff --git a/frontend/src/uxbox/main/ui/viewer/header.cljs b/frontend/src/uxbox/main/ui/viewer/header.cljs index edea3af9c..3d4f419fb 100644 --- a/frontend/src/uxbox/main/ui/viewer/header.cljs +++ b/frontend/src/uxbox/main/ui/viewer/header.cljs @@ -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)] ]]))