diff --git a/resources/styles/main/partials/workspace-bar.scss b/resources/styles/main/partials/workspace-bar.scss index 10e58b214..4b1638deb 100644 --- a/resources/styles/main/partials/workspace-bar.scss +++ b/resources/styles/main/partials/workspace-bar.scss @@ -218,3 +218,55 @@ } } + +.options-btn { + align-items: center; + border-right: 4px double $soft-ui-border; + display: flex; + margin: 0; + + &:last-child { + border: none; + } + + li { + align-items: center; + background-color: $secondary-ui-bg; + 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: $intense-ui-icons; + height: 18px; + width: 18px; + } + + &:hover { + background-color: $color-white; + border-color: $soft-ui-border; + } + + &.selected { + background-color: $main-ui-color; + + svg { + fill: $color-white; + } + + } + + } + +} diff --git a/resources/styles/view/layouts/main-layout.scss b/resources/styles/view/layouts/main-layout.scss index ad0c7052b..eea6cb3f1 100644 --- a/resources/styles/view/layouts/main-layout.scss +++ b/resources/styles/view/layouts/main-layout.scss @@ -23,12 +23,65 @@ flex-shrink: 0; height: 55px; width: 100%; + @include bp(tablet) { border-right: 1px solid $soft-ui-border; border-top: 0; height: 100%; width: 70px; } + +} + +.view-options-btn { + align-items: center; + display: flex; + margin: auto; + + @include bp(tablet) { + flex-direction: column; + } + + li { + align-items: center; + background-color: $secondary-ui-bg; + border: 1px solid transparent; + border-radius: $br-small; + cursor: pointer; + display: flex; + flex-shrink: 0; + height: 40px; + justify-content: center; + margin: $small; + position: relative; + width: 40px; + + a { + padding-top: 6px; + } + + svg { + fill: $intense-ui-icons; + height: 24px; + width: 24px; + } + + &:hover { + background-color: $color-white; + border-color: $soft-ui-border; + } + + &.selected { + background-color: $main-ui-color; + + svg { + fill: $color-white; + } + + } + + } + } .view-canvas { diff --git a/src/uxbox/view/ui.cljs b/src/uxbox/view/ui.cljs index 17251bb7f..8caf7f41c 100644 --- a/src/uxbox/view/ui.cljs +++ b/src/uxbox/view/ui.cljs @@ -12,6 +12,7 @@ [uxbox.common.i18n :refer (tr)] ;; [uxbox.view.ui.loader :refer (loader)] ;; [uxbox.view.ui.lightbox :refer (lightbox)] + [uxbox.main.ui.icons :as i] [uxbox.common.ui.mixins :as mx])) ;; --- Main App (Component) @@ -20,7 +21,16 @@ [own] (html [:section.view-content - [:div.view-nav "NAV"] + [:div.view-nav + [:ul.view-options-btn + [:li.tooltip.tooltip-right + {:alt "sitemap"} i/project-tree] + [:li.tooltip.tooltip-right + {:alt "view interactions"} i/action] + [:li.tooltip.tooltip-right + {:alt "share"} i/export] + [:li.tooltip.tooltip-right + {:alt "save SVG"} i/save]]] [:div.view-canvas "VIEW CONTENT"] ] ))