add projects search styles

This commit is contained in:
Juan de la Cruz 2016-02-18 16:33:54 +01:00
parent b131dea579
commit 5d0e57acb7
2 changed files with 37 additions and 18 deletions

View file

@ -28,22 +28,44 @@
} }
.dashboard-search { .dashboard-search {
cursor: pointer; align-items: center;
margin-left: $big; display: flex;
margin-left: $small;
svg { .input-text {
fill: $color-gray-dark; background: rgba(255,255,255,.4);
height: 20px; border: 0;
width: 20px; color: $dark-ui-text;
padding: 4px 8px;
margin: 0;
max-width: 160px;
}
.clear-search {
align-items: center;
background: rgba(255,255,255,.4);
cursor: pointer;
display: flex;
height: 28px;
padding: 0 5px;
svg {
fill: $light-ui-icons;
height: 15px;
transform: rotate(45deg);
width: 15px;
&:hover {
fill: $color-danger;
}
&:hover {
fill: $color-gray-darker;
} }
} }
} }
&.library-gap { &.library-gap {
padding: $small $medium $small 270px; padding: $small $medium $small 270px;
} }

View file

@ -192,16 +192,16 @@
(let [change-term #(rs/emit! (dd/set-project-filtering (.-value (.-target %)))) (let [change-term #(rs/emit! (dd/set-project-filtering (.-value (.-target %))))
clear-term #(rs/emit! (dd/clear-project-filtering))] clear-term #(rs/emit! (dd/clear-project-filtering))]
(html (html
[:form [:form.dashboard-search
[:input [:input.input-text
{:type "text" {:type "text"
:on-change change-term :on-change change-term
:auto-focus true :auto-focus true
:placeholder "Search..."
:value (rum/react project-filtering-l)}] :value (rum/react project-filtering-l)}]
[:input [:div.clear-search
{:type "button" {:on-click clear-term}
:on-click clear-term i/close]])))
:value "X"}]])))
(def project-search (def project-search
(mx/component (mx/component
@ -218,9 +218,7 @@
[:div.dashboard-info [:div.dashboard-info
[:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))] [:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))]
(project-sorting) (project-sorting)
(project-search)] (project-search)]])))
[:div.dashboard-search
i/search]])))
(def menu (def menu
(mx/component (mx/component
@ -299,4 +297,3 @@
{:render grid-render {:render grid-render
:name "grid" :name "grid"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))