diff --git a/resources/public/styles/partials/sidebar-sitemap.scss b/resources/public/styles/partials/sidebar-sitemap.scss index e69de29bb2..9fa576656e 100644 --- a/resources/public/styles/partials/sidebar-sitemap.scss +++ b/resources/public/styles/partials/sidebar-sitemap.scss @@ -0,0 +1,136 @@ +.sitemap { + + .project-title { + align-items: center; + border-bottom: 1px solid $soft-ui-border; + box-sizing: border-box; + display: flex; + padding: $x-small; + width: 100%; + + span { + color: $intense-ui-text; + font-size: $fs14; + font-weight: bold; + max-width: 80%; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .add-page { + align-items: center; + background-color: $main-ui-color; + border-radius: $br-small; + cursor: pointer; + display: flex; + justify-content: center; + margin-left: auto; + padding: $x-small; + + svg { + fill: $color-white; + height: 16px; + width: 16px; + } + + &:hover { + background-color: $intense-main-ui-color; + } + + } + + } + + .element-list { + + li { + align-items: center; + border-bottom: 1px solid $soft-ui-border; + box-sizing: border-box; + display: flex; + flex-direction: row; + padding: $x-small; + width: 100%; + + .page-icon { + + svg { + fill: $medium-ui-icons; + height: 15px; + margin-right: $x-small; + width: 15px; + } + + } + + span { + color: $medium-ui-text; + font-size: $fs14; + max-width: 75%; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .page-actions { + align-items: center; + display: flex; + margin-left: auto; + + a { + + svg { + fill: $medium-ui-icons; + height: 15px; + margin-left: $x-small; + width: 15px; + + &:hover { + fill: $intense-ui-icons; + } + + } + + } + + } + + &:hover { + + .page-icon { + + svg { + fill: $main-ui-color; + } + + } + + span { + color: $main-ui-color; + } + + } + + &.selected { + + .page-icon { + + svg { + fill: $main-ui-color; + } + + } + + span { + color: $main-ui-color; + font-weight: bold; + } + + } + + } + + } + +} diff --git a/src/uxbox/ui/workspace/sidebar/sitemap.cljs b/src/uxbox/ui/workspace/sidebar/sitemap.cljs index 127dfe5682..1c50465d2c 100644 --- a/src/uxbox/ui/workspace/sidebar/sitemap.cljs +++ b/src/uxbox/ui/workspace/sidebar/sitemap.cljs @@ -29,12 +29,18 @@ [:div.tool-window-icon i/project-tree] [:span (tr "ds.sitemap")] [:div.tool-window-close {:on-click close} i/close]] - [:div.tool-window-content {:style {:color "white"}} - [:div "Project name"] + [:div.tool-window-content + [:div.project-title + [:span "Project name"] + [:div.add-page i/close]] [:ul.element-list (for [i (range 10)] [:li {:key i :class (when (= i 2) "selected")} - (str "Page " i)]) + [:div.page-icon i/page] + [:span (str "Page " i)] + [:div.page-actions + [:a i/pencil] + [:a i/trash]]]) ]]]))) (def ^:static sitemap-toolbox