diff --git a/backend/src/uxbox/services/mutations/files.clj b/backend/src/uxbox/services/mutations/files.clj index 3b1e2ee23..99435223e 100644 --- a/backend/src/uxbox/services/mutations/files.clj +++ b/backend/src/uxbox/services/mutations/files.clj @@ -41,8 +41,8 @@ (s/def ::is-shared ::us/boolean) (s/def ::create-file - (s/keys :req-un [::profile-id ::name ::project-id ::is-shared] - :opt-un [::id])) + (s/keys :req-un [::profile-id ::name ::project-id] + :opt-un [::id ::is-shared])) (sm/defmutation ::create-file [{:keys [profile-id project-id] :as params}] @@ -61,7 +61,9 @@ :can-edit true})) (defn create-file - [conn {:keys [id profile-id name project-id is-shared] :as params}] + [conn {:keys [id profile-id name project-id is-shared] + :or {is-shared false} + :as params}] (let [id (or id (uuid/next)) file (db/insert! conn :file {:id id diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index c5a90280b..627e2165d 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -23,11 +23,12 @@ //################################################# @import 'common/base'; -@import 'main/layouts/main-layout'; @import 'main/layouts/login'; +@import 'main/layouts/main-layout'; @import 'main/layouts/projects-page'; @import 'main/layouts/libraries-page'; @import 'main/layouts/recent-files-page'; +@import 'main/layouts/search-page'; @import "main/layouts/not-found"; @import "main/layouts/viewer"; diff --git a/frontend/resources/styles/main/layouts/libraries-page.scss b/frontend/resources/styles/main/layouts/libraries-page.scss index c9e39c846..dc614aafc 100644 --- a/frontend/resources/styles/main/layouts/libraries-page.scss +++ b/frontend/resources/styles/main/layouts/libraries-page.scss @@ -1,5 +1,6 @@ .libraries-page { - padding: 1rem; - height: 100%; - background-color: $color-white; + padding: 1rem; + background-color: $color-white; + flex: 1 0 0; + overflow-y: auto; } diff --git a/frontend/resources/styles/main/layouts/main-layout.scss b/frontend/resources/styles/main/layouts/main-layout.scss index 7f4599edc..0852beb6f 100644 --- a/frontend/resources/styles/main/layouts/main-layout.scss +++ b/frontend/resources/styles/main/layouts/main-layout.scss @@ -31,6 +31,8 @@ .dashboard-content { background-color: lighten($color-gray-10, 5%); + display: flex; + flex-direction: column; } .verify-token { diff --git a/frontend/resources/styles/main/layouts/projects-page.scss b/frontend/resources/styles/main/layouts/projects-page.scss index c1341fbf0..3b9394058 100644 --- a/frontend/resources/styles/main/layouts/projects-page.scss +++ b/frontend/resources/styles/main/layouts/projects-page.scss @@ -1,5 +1,6 @@ .projects-page { - padding: 1rem; - height: 100%; - background-color: $color-white; + padding: 1rem; + background-color: $color-white; + flex: 1 0 0; + overflow-y: auto; } diff --git a/frontend/resources/styles/main/layouts/recent-files-page.scss b/frontend/resources/styles/main/layouts/recent-files-page.scss index 61c5b426a..b87226bb8 100644 --- a/frontend/resources/styles/main/layouts/recent-files-page.scss +++ b/frontend/resources/styles/main/layouts/recent-files-page.scss @@ -1,41 +1,41 @@ .recent-files-page { - overflow: scroll; - height: 100%; - background-color: $color-white; + background-color: $color-white; + flex: 1 0 0; + overflow-y: auto; } .recent-files-row { - padding: 1rem; - border-top: 1px solid $color-gray-10; + padding: 1rem; + border-top: 1px solid $color-gray-10; - &.first { - border-top: none; - } + &.first { + border-top: none; + } } .recent-files-row-title { - display: flex; - flex-direction: row; - margin-left: $medium; - margin-top: $medium; + display: flex; + flex-direction: row; + margin-left: $medium; + margin-top: $medium; } .recent-files-row-title-name, .recent-files-row-title-info { - font-size: 15px; - line-height: 1rem; - font-weight: unset; + font-size: 15px; + line-height: 1rem; + font-weight: unset; } .recent-files-row-title-name { - color: black; - margin-right: $medium; + color: black; + margin-right: $medium; } .recent-files-row-title-info { - color: $color-gray-30 + color: $color-gray-30 } .recent-files-empty { - margin: 30px; - font-size: 20px + margin: 30px; + font-size: 20px } diff --git a/frontend/resources/styles/main/layouts/search-page.scss b/frontend/resources/styles/main/layouts/search-page.scss index 146e3269e..37e17f2a9 100644 --- a/frontend/resources/styles/main/layouts/search-page.scss +++ b/frontend/resources/styles/main/layouts/search-page.scss @@ -1,3 +1,6 @@ .search-page { - padding: 1rem; + padding: 1rem; + background-color: $color-white; + flex: 1 0 0; + overflow-y: auto; } diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss index cca4904a8..0ed99bda1 100644 --- a/frontend/resources/styles/main/partials/dashboard-grid.scss +++ b/frontend/resources/styles/main/partials/dashboard-grid.scss @@ -6,10 +6,7 @@ // Copyright (c) 2015-2016 Juan de la Cruz .dashboard-grid { - display: flex; - flex-direction: column; font-size: $fs14; - height: 100%; .dashboard-title { position: relative; @@ -68,284 +65,277 @@ } - .dashboard-grid-content { + .dashboard-grid-row { display: flex; - height: 100%; + flex-wrap: wrap; width: 100%; + align-content: flex-start; + } - .dashboard-grid-row { - display: flex; - flex-wrap: wrap; + .grid-item { + align-items: center; + border: 1px solid lighten($color-gray-20, 13%); + border-radius: $br-small; + cursor: pointer; + display: flex; + flex-direction: column; + flex-shrink: 0; + height: 200px; + margin: $medium; + max-width: 300px; + min-width: 260px; + position: relative; + text-align: center; + width: 18%; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); + + & .overlay { + border-radius: 4px; + border: 2px solid $color-primary; + height: 100%; + opacity: 0; + pointer-events: none; + position: absolute; width: 100%; - align-content: flex-start; + z-index: 1; + } + &:hover .overlay { + display: block; + opacity: 1; } - .grid-item { - align-items: center; - border: 1px solid lighten($color-gray-20, 13%); - border-radius: $br-small; - cursor: pointer; + &.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; - flex-shrink: 0; - height: 200px; - margin: $medium; - max-width: 300px; - min-width: 260px; - position: relative; - text-align: center; - width: 18%; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); + left: 0; + padding: $small; + position: absolute; + text-align: left; + width: 100%; - & .overlay { - border-radius: 4px; - border: 2px solid $color-primary; - height: 100%; - opacity: 0; - pointer-events: none; - position: absolute; + h3 { + color: $color-gray-60; + font-size: $fs15; + font-weight: 400; + overflow: hidden; + padding: 0; + padding-right: $small; + text-overflow: ellipsis; width: 100%; - z-index: 1; - } - &:hover .overlay { - display: block; - opacity: 1; + white-space: nowrap; } - &.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; + span.date { + color: $color-gray-20; + font-size: $fs12; + overflow: hidden; + text-overflow: ellipsis; width: 100%; - - h3 { - color: $color-gray-60; - font-size: $fs15; - font-weight: 400; - overflow: hidden; - padding: 0; - padding-right: $small; - text-overflow: ellipsis; - width: 100%; - white-space: nowrap; - } - - span.date { - color: $color-gray-20; - font-size: $fs12; - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - } - } - .item-badge { - background-color: $color-white; - border: 1px solid $color-gray-20; - border-radius: 4px; - position: absolute; - top: $x-small; - right: $x-small; - height: 32px; - width: 32px; - display: flex; - align-items: center; - justify-content: center; + } - svg { - fill: $color-gray-30; - height: 16px; - width: 16px; - } - } - - &.add-file { - border: 1px dashed $color-gray-20; - justify-content: center; - box-shadow: none; - - span { - color: $color-gray-60; - font-size: $fs15; - } - - &:hover { - background-color: $color-white; - border: 2px solid $color-primary; - } - - } - - // PROJECTS, ELEMENTS & ICONS GRID - &.project-th { + .item-badge { background-color: $color-white; - // border: 2px solid $color-gray-10; - - &:hover { - border-color: $color-primary; - - .project-th-actions { - display: flex; - } - } - - .project-th-actions { - align-items: center; - bottom: 0; - display: none; - left: 0; - justify-content: flex-end; - padding: $small; - position: absolute; - width: 100%; - - svg { - fill: $color-gray-20; - height: 14px; - margin-right: $x-small; - width: 14px; - } - - span { - color: $color-black; - } - - .project-th-icon { - align-items: center; - display: flex; - margin-right: $small; - - &.menu { - margin-right: 0; - - svg { - fill: $color-gray-30; - margin-right: 0; - } - - &:hover { - transform: scale(1.4); - - svg { - fill: $color-primary-dark; - } - - } - - } - - &.delete { - margin-right: 0; - - svg { - fill: $color-gray-30; - margin-right: 0; - } - - &:hover { - transform: scale(1.4); - - svg { - fill: $color-danger; - } - - } - - } - - &.edit { - margin-right: 0; - - svg { - fill: $color-gray-30; - } - - &:hover { - transform: scale(1.4); - - svg { - fill: $color-gray-60; - } - - } - - } - - } - - } - - .project-th-actions.force-display { - display: flex; - } - - } - - // IMAGES SECTION - &.images-th { - border: 1px dashed $color-gray-20; - border-bottom: 2px solid lighten($color-gray-20, 12%); - - &:hover { - border-color: $color-primary; - } - - } - - .grid-item-image { + border: 1px solid $color-gray-20; + border-radius: 4px; + position: absolute; + top: $x-small; + right: $x-small; + height: 32px; + width: 32px; + display: flex; + align-items: center; + justify-content: center; svg { - max-height: 100px; - max-width: 100px; - min-height: 40px; - min-width: 40px; - width: 8vw; + fill: $color-gray-30; + height: 16px; + width: 16px; } + } + &.add-file { + border: 1px dashed $color-gray-20; + justify-content: center; + box-shadow: none; + + span { + color: $color-gray-60; + font-size: $fs15; } - .color-swatch { - border-top-left-radius: $br-medium; - border-top-right-radius: $br-medium; - height: 25%; + &:hover { + background-color: $color-white; + border: 2px solid $color-primary; + } + + } + + // PROJECTS, ELEMENTS & ICONS GRID + &.project-th { + background-color: $color-white; + // border: 2px solid $color-gray-10; + + &:hover { + border-color: $color-primary; + + .project-th-actions { + display: flex; + } + } + + .project-th-actions { + align-items: center; + bottom: 0; + display: none; left: 0; + justify-content: flex-end; + padding: $small; position: absolute; - top: 0; width: 100%; - } - .color-data { - color: $color-gray-30; - margin-top: 15px; - } - - .input-checkbox { - margin: 0; - position: absolute; - top: 10px; - right: 5px; - - label { - margin: 0; + svg { + fill: $color-gray-20; + height: 14px; + margin-right: $x-small; + width: 14px; } + span { + color: $color-black; + } + + .project-th-icon { + align-items: center; + display: flex; + margin-right: $small; + + &.menu { + margin-right: 0; + + svg { + fill: $color-gray-30; + margin-right: 0; + } + + &:hover { + transform: scale(1.4); + + svg { + fill: $color-primary-dark; + } + + } + + } + + &.delete { + margin-right: 0; + + svg { + fill: $color-gray-30; + margin-right: 0; + } + + &:hover { + transform: scale(1.4); + + svg { + fill: $color-danger; + } + + } + + } + + &.edit { + margin-right: 0; + + svg { + fill: $color-gray-30; + } + + &:hover { + transform: scale(1.4); + + svg { + fill: $color-gray-60; + } + + } + + } + + } + + } + + .project-th-actions.force-display { + display: flex; + } + + } + + // IMAGES SECTION + &.images-th { + border: 1px dashed $color-gray-20; + border-bottom: 2px solid lighten($color-gray-20, 12%); + + &:hover { + border-color: $color-primary; + } + + } + + .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-30; + margin-top: 15px; + } + + .input-checkbox { + margin: 0; + position: absolute; + top: 10px; + right: 5px; + + label { + margin: 0; } } @@ -476,7 +466,6 @@ height: fit-content; margin: $size-4; padding: 3rem; - width: 100%; .grid-files-desc { color: $color-gray-60; diff --git a/frontend/src/uxbox/main/ui/dashboard/grid.cljs b/frontend/src/uxbox/main/ui/dashboard/grid.cljs index 5af487ad4..8c5d278d6 100644 --- a/frontend/src/uxbox/main/ui/dashboard/grid.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/grid.cljs @@ -141,7 +141,6 @@ (dom/prevent-default %) (st/emit! (dsh/create-file id)))] [:section.dashboard-grid - [:div.dashboard-grid-content (if (> (count files) 0) [:div.dashboard-grid-row (when (not hide-new?) @@ -152,4 +151,4 @@ [:div.grid-files-empty [:div.grid-files-desc (t locale "dashboard.grid.empty-files")] [:div.grid-files-link - [:a.btn-secondary.btn-small {:on-click on-click} (t locale "ds.new-file")]]])]])) + [:a.btn-secondary.btn-small {:on-click on-click} (t locale "ds.new-file")]]])])) diff --git a/frontend/src/uxbox/main/ui/dashboard/search.cljs b/frontend/src/uxbox/main/ui/dashboard/search.cljs index 4669e7170..15e371607 100644 --- a/frontend/src/uxbox/main/ui/dashboard/search.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/search.cljs @@ -33,7 +33,6 @@ [:section.search-page [:section.dashboard-grid - [:div.dashboard-grid-content (cond (empty? search-term) [:div.grid-files-empty @@ -48,5 +47,5 @@ [:div.grid-files-desc (t locale "dashboard.search.no-matches-for" search-term)]] :else - [:& grid { :files search-result :hide-new? true}])]]])) + [:& grid { :files search-result :hide-new? true}])]]))