diff --git a/frontend/resources/styles/main/partials/library-bar.scss b/frontend/resources/styles/main/partials/library-bar.scss index 291d77b1a..6d8079ee3 100644 --- a/frontend/resources/styles/main/partials/library-bar.scss +++ b/frontend/resources/styles/main/partials/library-bar.scss @@ -65,7 +65,7 @@ display: flex; flex-direction: column; flex-shrink: 0; - padding: $medium; + padding: $small $medium; span.element-title { color: $intense-ui-text; @@ -128,3 +128,80 @@ } } + +.projects-row { + align-items: center; + display: flex; + padding: $medium; + + span { + color: $color-gray-30; + font-size: $fs14; + } + + .add-project { + align-items: center; + background-color: $dark-ui-bg; + border-radius: $br-small; + border: 1px solid transparent; + cursor: pointer; + display: flex; + justify-content: center; + margin-left: auto; + padding: $x-small; + + svg { + fill: $soft-ui-icons; + height: 16px; + width: 16px; + } + + &:hover { + background-color: $main-ui-color; + + svg { + fill: $soft-ui-icons; + } + } + } +} + +.dashboard-search { + align-items: center; + border: 1px solid $color-gray-10; + display: flex; + margin: $medium; + + .input-text { + background: $color-white; + border: 0; + color: $intense-ui-text; + font-size: $fs14; + padding: 4px 8px; + margin: 0; + max-width: 170px; + width: 100%; + } + + .clear-search { + align-items: center; + cursor: pointer; + display: flex; + height: 28px; + padding: 0 5px; + + svg { + fill: $medium-ui-icons; + height: 15px; + transform: rotate(45deg); + width: 15px; + + &:hover { + fill: $color-danger; + } + + } + + } + +} \ No newline at end of file diff --git a/frontend/src/uxbox/main/ui/dashboard/projects.cljs b/frontend/src/uxbox/main/ui/dashboard/projects.cljs index 583158a4d..11d957f06 100644 --- a/frontend/src/uxbox/main/ui/dashboard/projects.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/projects.cljs @@ -107,15 +107,16 @@ ;; Search ;; TODO: convert to separate component? - [:form.dashboard-search - [:input.input-text - {:key :images-search-box - :type "text" - :on-change on-term-change - :auto-focus true - :placeholder (tr "ds.search.placeholder") - :value (or filtering "")}] - [:div.clear-search {:on-click on-clear} i/close]]]])) + ; [:form.dashboard-search + ; [:input.input-text + ; {:key :images-search-box + ; :type "text" + ; :on-change on-term-change + ; :auto-focus true + ; :placeholder (tr "ds.search.placeholder") + ; :value (or filtering "")}] + ; [:div.clear-search {:on-click on-clear} i/close]] + ]])) ;; --- Grid Item Thumbnail @@ -236,15 +237,27 @@ (sort-by :created-at))] [:div.library-bar [:div.library-bar-inside + [:form.dashboard-search + [:input.input-text + {:key :images-search-box + :type "text" + :auto-focus true + :placeholder (tr "ds.search.placeholder")}] + [:div.clear-search i/close]] [:ul.library-elements - [:li - [:a.btn-primary #_{:on-click #(st/emit! di/create-collection)} - "new project +"]] + ; [:li + ; [:a.btn-primary #_{:on-click #(st/emit! di/create-collection)} + ; "new project +"]] [:li.recent-projects {:on-click #(st/emit! (udp/go-to-project nil)) :class-name (when (nil? id) "current")} [:span.element-title "Recent"]] + [:div.projects-row + [:span "PROJECTS"] + [:a.add-project #_{:on-click #(st/emit! di/create-collection)} + i/close]] + (for [item projects] [:& nav-item {:id (:id item) :key (:id item) @@ -268,7 +281,7 @@ (let [opts (mf/deref opts-iref) files (mf/deref files-ref)] [:* - [:& menu {:id id :opts opts :files files}] + #_[:& menu {:id id :opts opts :files files}] [:section.dashboard-grid.library [:& grid {:id id :opts opts :files files}]]]))