diff --git a/backend/bin/start-dev b/backend/bin/start-dev index 1ea95d260..dea5773d8 100755 --- a/backend/bin/start-dev +++ b/backend/bin/start-dev @@ -8,6 +8,6 @@ if [ ! -e ~/local/.fixtures-loaded ]; then touch ~/local/.fixtures-loaded fi -clojure ${CLOJURE_OPTS} -m uxbox.main +clojure -m uxbox.main diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss index fcd376d95..3e31e56a3 100644 --- a/frontend/resources/styles/common/base.scss +++ b/frontend/resources/styles/common/base.scss @@ -6,7 +6,7 @@ // Copyright (c) 2015-2016 Juan de la Cruz body { - background-color: $secondary-ui-bg; + background-color: lighten($dark-ui-bg, 5%); color: $medium-ui-text; display: flex; flex-direction: column; diff --git a/frontend/resources/styles/common/dependencies/uxbox-light.scss b/frontend/resources/styles/common/dependencies/uxbox-light.scss index 1f0e32736..e07c314df 100644 --- a/frontend/resources/styles/common/dependencies/uxbox-light.scss +++ b/frontend/resources/styles/common/dependencies/uxbox-light.scss @@ -21,7 +21,7 @@ $ui-flavour: $color-gray; // Background colors $primary-ui-bg: $color-gray-50; $secondary-ui-bg: $color-gray-60; -$dark-ui-bg: $color-gray-40; +$dark-ui-bg: $color-gray-10; // Border color $intense-ui-border: $color-gray-40; diff --git a/frontend/resources/styles/main/layouts/main-layout.scss b/frontend/resources/styles/main/layouts/main-layout.scss index 24ad47943..bb7b7ee50 100644 --- a/frontend/resources/styles/main/layouts/main-layout.scss +++ b/frontend/resources/styles/main/layouts/main-layout.scss @@ -12,10 +12,10 @@ } .dashboard-content { - background-image: url("../images/dashboard-img.svg"); - background-position: bottom center; - background-repeat: no-repeat; - background-size: 100%; + // background-image: url("../images/dashboard-img.svg"); + // background-position: bottom center; + // background-repeat: no-repeat; + // background-size: 100%; display: flex; flex-direction: column; height: calc(100vh - 60px); diff --git a/frontend/resources/styles/main/partials/dashboard-bar-v2.scss b/frontend/resources/styles/main/partials/dashboard-bar-v2.scss new file mode 100644 index 000000000..b2d32457d --- /dev/null +++ b/frontend/resources/styles/main/partials/dashboard-bar-v2.scss @@ -0,0 +1,91 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) 2015-2016 Andrey Antukh +// Copyright (c) 2015-2016 Juan de la Cruz + +.dashboard-bar { + align-items: center; + display: flex; + font-size: $fs14; + padding: $small $medium $small $x-big*2; + + .dashboard-images { + flex-basis: 70px; + } + + .dashboard-info { + align-items: center; + display: flex; + width: 500px; + justify-content: space-around; + + .dashboard-projects { + font-weight: bold; + margin-right: $medium; + } + + .sort-by { + margin-left: $small; + } + + .input-select { + background-color: transparent; + border-color: $soft-ui-border; + font-size: $fs14; + margin-bottom: 0; + margin-left: $medium; + padding: 3px 25px 3px 3px; + + option { + color: $intense-ui-text; + background: $secondary-ui-bg; + } + } + + } + + .dashboard-search { + align-items: center; + display: flex; + margin-left: $small; + + .input-text { + background: $input-bg; + border: 0; + color: $intense-ui-text; + padding: 4px 8px; + margin: 0; + max-width: 160px; + } + + .clear-search { + align-items: center; + background: $input-bg; + 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; + } + + } + + } + + } + + &.library-gap { + padding: $small $medium $small 270px; + } + +} diff --git a/frontend/resources/styles/main/partials/dashboard-grid-v2.scss b/frontend/resources/styles/main/partials/dashboard-grid-v2.scss new file mode 100644 index 000000000..3d0cb407c --- /dev/null +++ b/frontend/resources/styles/main/partials/dashboard-grid-v2.scss @@ -0,0 +1,419 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) 2015-2016 Andrey Antukh +// Copyright (c) 2015-2016 Juan de la Cruz + +.dashboard-grid { + align-items: center; + display: flex; + flex-direction: column; + font-size: $fs14; + height: 100%; + padding: $medium; + // ACTIVITY BAR PADDING + //padding: $medium 250px $medium $medium; + + .dashboard-title { + margin: $medium 0; + position: relative; + width: 100%; + + h2 { + text-align: center; + width: 100%; + .edit { + padding: 5px 10px; + background: $primary-ui-bg; + border: none; + height: 100%; + } + .close { + padding: 5px 10px; + background: $primary-ui-bg; + cursor: pointer; + svg { + transform: rotate(45deg); + fill: $color-gray; + height: 20px; + width: 20px; + } + } + } + + .edition { + align-items: center; + display: flex; + position: absolute; + right: 40px; + top: 0; + + span { + cursor: pointer; + + svg { + fill: $color-gray; + height: 20px; + margin: 0 10px; + width: 20px; + } + + &:hover { + + svg { + fill: $color-gray-darker; + } + + } + + } + + } + + } + + .dashboard-grid-content { + display: flex; + height: 100%; + min-height: 60vh; + overflow: scroll; + width: 100%; + + .dashboard-grid-row { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: auto; + width: 100%; + } + + .grid-item { + align-items: center; + border-radius: $br-medium; + cursor: pointer; + display: flex; + flex-direction: column; + flex-shrink: 0; + height: 200px; + margin: $medium $medium 0 $medium; + max-width: 300px; + min-width: 260px; + position: relative; + text-align: center; + width: 18%; + + &.small-item { + max-width: 12%; + min-width: 190px; + padding: $medium; + justify-content: center; + } + + .grid-item-icon { + width:90px; + height:90px; + } + + .item-info { + bottom: 0; + display: flex; + flex-direction: column; + left: 0; + padding: $small; + position: absolute; + text-align: left; + width: 100%; + + h3 { + color: $intense-ui-text; + font-size: $fs16; + font-weight: 400; + overflow: hidden; + padding: 0; + padding-right: $small; + text-overflow: ellipsis; + width: 100%; + white-space: nowrap; + } + + span.date { + color: $soft-ui-text; + font-size: $fs12; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + } + + } + + &.add-project { + border: 2px dashed $color-gray-light; + box-shadow: inset 0 0 0 transparent; + justify-content: center; + + span { + background-color: $color-primary-light; + border-radius: 5px; + color: $color-white; + font-size: $fs24; + padding: $small $medium; + } + + &:hover { + background-color: $color-primary-light; + border: 2px solid $color-white; + + span { + color: $color-white; + } + + } + + } + + // PROJECTS, ELEMENTS & ICONS GRID + &.project-th { + background-color: $primary-ui-bg; + border-bottom: 2px solid lighten($soft-ui-border, 12%); + + &:hover { + border-color: $main-ui-color; + + h3 { + color: $main-ui-color; + } + + } + + .project-th-actions { + align-items: center; + bottom: 0; + display: flex; + left: 0; + justify-content: flex-end; + padding: $small; + position: absolute; + width: 100%; + + svg { + fill: $color-gray-light; + height: 14px; + margin-right: $x-small; + width: 14px; + } + + span { + color: $color-gray-light; + } + + .project-th-icon { + align-items: center; + display: flex; + margin-right: $small; + + &.delete { + margin-right: 0; + + svg { + fill: $medium-ui-icons; + margin-right: 0; + } + + &:hover { + transform: scale(1.4); + + svg { + fill: $color-danger; + } + + } + + } + + &.edit { + margin-right: 0; + + svg { + fill: $medium-ui-icons; + } + + &:hover { + transform: scale(1.4); + + svg { + fill: $color-primary; + } + + } + + } + + } + + } + + } + + // IMAGES SECTION + &.images-th { + background-color: $primary-ui-bg; + border-bottom: 2px solid lighten($color-gray-light, 12%); + + &:hover { + border-color: $main-ui-color; + } + + } + + .grid-item-image { + + svg { + max-height: 100px; + max-width: 100px; + min-height: 40px; + min-width: 40px; + width: 8vw; + } + + } + + .color-swatch { + border-top-left-radius: $br-medium; + border-top-right-radius: $br-medium; + height: 25%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + + .color-data { + color: $color-gray; + margin-top: 15px; + } + + .input-checkbox { + margin: 0; + position: absolute; + top: 10px; + right: 5px; + + label { + margin: 0; + } + + } + + } + + } + + // STYLES FOR LIBRARIES + &.library { + padding: $medium $medium $medium 250px; + } + +} + +.grid-item-th { + background-position: center; + background-size: auto 80%; + background-repeat: no-repeat; + border-top-left-radius: $br-medium; + border-top-right-radius: $br-medium; + height: 70%; + overflow: hidden; + position: relative; + width: 100%; + + .img-th { + height: auto; + width: 100%; + } + +} + +// MULTISELECT OPTIONS BAR +.multiselect-bar { + @include animation(0,.5s,fadeInUp); + align-items: center; + background-color: $primary-ui-bg; + display: flex; + left: 0; + justify-content: center; + padding: $medium; + position: absolute; + width: 100%; + bottom: 0; + + .multiselect-nav { + align-items: center; + display: flex; + justify-content: center; + margin-left: 10%; + width: 110px; + + span { + margin-right: 1.5rem; + &:last-child { + margin-right: 0; + } + } + + svg { + cursor: pointer; + fill: $medium-ui-icons; + height: 20px; + width: 20px; + + &:hover { + fill: $intense-ui-icons; + } + + } + + span.delete { + + &:hover { + + svg{ + fill: $color-danger-light; + } + + } + + } + + } + +} + +.move-item { + position: relative; + + .move-list { + background-color: $dark-ui-bg; + border-radius: $br-small; + bottom: 30px; + display: flex; + flex-direction: column; + left: -30px; + max-height: 260px; + overflow-y: scroll; + padding: $medium; + position: absolute; + width: 260px; + + li { + padding-bottom: $medium; + + &.title { + color: $color-gray-darker; + } + + } + + } + +} diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss index 3d0cb407c..d8438c8b2 100644 --- a/frontend/resources/styles/main/partials/dashboard-grid.scss +++ b/frontend/resources/styles/main/partials/dashboard-grid.scss @@ -83,14 +83,13 @@ .dashboard-grid-row { display: flex; flex-wrap: wrap; - justify-content: center; - margin: auto; + margin-bottom: auto; width: 100%; } .grid-item { align-items: center; - border-radius: $br-medium; + border-radius: $br-small; cursor: pointer; display: flex; flex-direction: column; @@ -138,7 +137,7 @@ } span.date { - color: $soft-ui-text; + color: $medium-ui-text; font-size: $fs12; overflow: hidden; text-overflow: ellipsis; @@ -148,42 +147,28 @@ } &.add-project { - border: 2px dashed $color-gray-light; - box-shadow: inset 0 0 0 transparent; + border: 1px dashed $color-gray-light; justify-content: center; span { - background-color: $color-primary-light; - border-radius: 5px; - color: $color-white; - font-size: $fs24; - padding: $small $medium; + color: $intense-ui-text; + font-size: $fs15; } &:hover { - background-color: $color-primary-light; - border: 2px solid $color-white; - - span { - color: $color-white; - } - + background-color: $color-white; + border: 2px solid $main-ui-color; } } // PROJECTS, ELEMENTS & ICONS GRID &.project-th { - background-color: $primary-ui-bg; - border-bottom: 2px solid lighten($soft-ui-border, 12%); + background-color: $color-white; + border: 2px solid $dark-ui-bg; &:hover { border-color: $main-ui-color; - - h3 { - color: $main-ui-color; - } - } .project-th-actions { @@ -204,7 +189,7 @@ } span { - color: $color-gray-light; + color: $color-black; } .project-th-icon { @@ -242,7 +227,7 @@ transform: scale(1.4); svg { - fill: $color-primary; + fill: $soft-ui-icons; } } @@ -311,7 +296,7 @@ // STYLES FOR LIBRARIES &.library { - padding: $medium $medium $medium 250px; + padding: $medium $medium $medium 230px; } } @@ -320,8 +305,8 @@ background-position: center; background-size: auto 80%; background-repeat: no-repeat; - border-top-left-radius: $br-medium; - border-top-right-radius: $br-medium; + border-top-left-radius: $br-small; + border-top-right-radius: $br-small; height: 70%; overflow: hidden; position: relative; diff --git a/frontend/resources/styles/main/partials/library-bar-v2.scss b/frontend/resources/styles/main/partials/library-bar-v2.scss new file mode 100644 index 000000000..650a270ee --- /dev/null +++ b/frontend/resources/styles/main/partials/library-bar-v2.scss @@ -0,0 +1,123 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) 2015-2016 Andrey Antukh +// Copyright (c) 2015-2016 Juan de la Cruz + +.library-bar { + background-color: $primary-ui-bg; + bottom: 0; + height: 100%; + left: 0; + position: fixed; + width: 250px; + + .library-bar-inside { + display: flex; + flex-direction: column; + height: 100%; + padding-top: 60px; + + .library-tabs { + align-items: center; + background-color: $secondary-ui-bg; + display: flex; + justify-content: space-around; + margin: 0; + padding-top: 12px; + + li { + background-color: darken($secondary-ui-bg, 10%); + border-top-left-radius: 3px; + border-top-right-radius: 3px; + color: $color-gray; + cursor: pointer; + font-weight: bold; + font-size: $fs14; + padding: .6rem; + text-align: center; + width: 118px; + + &:hover { + color: $color-white; + } + + &.current { + background-color: $primary-ui-bg; + color: $main-ui-color; + } + + } + + } + + .library-elements { + display: flex; + flex-direction: column; + height: calc(95% - 1rem); + margin-bottom: 1rem; + overflow-y: auto; + padding-bottom: 20px; + + li { + border-bottom: 1px solid $secondary-ui-bg; + cursor: pointer; + display: flex; + flex-direction: column; + flex-shrink: 0; + padding: 10px; + + span.element-title { + color: $color-gray-dark; + font-weight: bold; + margin-bottom: 5px; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + input.element-title { + border: 0; + height: 30px; + padding: 5px; + } + + .close { + background: $primary-ui-bg; + cursor: pointer; + padding: 5px 10px; + + svg { + fill: $color-gray; + height: 20px; + transform: rotate(45deg) translateY(7px); + width: 20px; + } + } + + .element-subtitle { + color: $color-gray-light; + font-style: italic; + } + + &:hover, + &.current { + background-color: $main-ui-color; + + span.element-title, + .element-subtitle { + color: $color-white; + } + input.element-title { + color: $color-gray-dark; + } + } + + } + + } + + } + +} diff --git a/frontend/resources/styles/main/partials/library-bar.scss b/frontend/resources/styles/main/partials/library-bar.scss index 650a270ee..6e413a561 100644 --- a/frontend/resources/styles/main/partials/library-bar.scss +++ b/frontend/resources/styles/main/partials/library-bar.scss @@ -6,12 +6,12 @@ // Copyright (c) 2015-2016 Juan de la Cruz .library-bar { - background-color: $primary-ui-bg; + background-color: $color-white; bottom: 0; height: 100%; left: 0; position: fixed; - width: 250px; + width: 230px; .library-bar-inside { display: flex; diff --git a/frontend/resources/styles/main/partials/main-bar.scss b/frontend/resources/styles/main/partials/main-bar.scss index 42432cfc0..457579356 100644 --- a/frontend/resources/styles/main/partials/main-bar.scss +++ b/frontend/resources/styles/main/partials/main-bar.scss @@ -9,17 +9,18 @@ align-items: center; background-color: $primary-ui-bg; display: flex; - height: 60px; + height: 40px; padding: $x-small $medium; position: relative; z-index: 10; .main-logo { + padding-top: $x-small; svg { - fill: $medium-ui-icons; - height: 40px; - width: 120px; + fill: $intense-ui-icons; + height: 30px; + width: 100px; } } @@ -29,17 +30,19 @@ .main-nav { align-items: center; display: flex; - height: 50px; + font-size: $fs15; + height: 35px; margin: 0 0 0 120px; li { a { + border-bottom: 2px solid transparent; color: $soft-ui-text; - padding: 1rem; + margin: $x-small $big; &:hover { - color: $intense-ui-text; + border-color: $main-ui-color; } } @@ -47,7 +50,7 @@ &.current { a { - color: $intense-ui-text; + border-color: $main-ui-color; } } diff --git a/frontend/src/uxbox/main/locales/en.cljs b/frontend/src/uxbox/main/locales/en.cljs index 3095db29f..f1b6194e0 100644 --- a/frontend/src/uxbox/main/locales/en.cljs +++ b/frontend/src/uxbox/main/locales/en.cljs @@ -15,6 +15,7 @@ "ds.num-files" ["No files" "%s file" "%s files"] + "ds.new-file" "+ New File" "ds.project-title" "Your projects" "ds.project-new" "+ New project" "ds.project-thumbnail.alt" "Project title" diff --git a/frontend/src/uxbox/main/ui/dashboard/projects.cljs b/frontend/src/uxbox/main/ui/dashboard/projects.cljs index 1a136b356..fc23d3ffe 100644 --- a/frontend/src/uxbox/main/ui/dashboard/projects.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/projects.cljs @@ -160,9 +160,9 @@ (str (tr "ds.updated-at" (dt/timeago (:modified-at file))))]] [:div.project-th-actions - [:div.project-th-icon.pages - i/page - #_[:span (:total-pages project)]] + ;; [:div.project-th-icon.pages + ;; i/page + ;; #_[:span (:total-pages project)]] #_[:div.project-th-icon.comments i/chat [:span "0"]] @@ -188,11 +188,11 @@ #_(udl/open! :create-project)) ] [:section.dashboard-grid - [:h2 (tr "ds.projects.file-name")] + ;; [:h2 (tr "ds.projects.file-name")] [:div.dashboard-grid-content [:div.dashboard-grid-row [:div.grid-item.add-project #_{:on-click on-click} - [:span (tr "ds.project-file")]] + [:span (tr "ds.new-file")]] (for [item files] [:& grid-item {:file item :key (:id item)}])]]]))