From 26247f86dae5a6a2fec78858a2fc5df5f5542eca Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Sat, 20 Feb 2016 23:45:35 +0100 Subject: [PATCH] add document history styles --- resources/public/images/svg/pin.svg | 50 +-------- resources/public/styles/main.scss | 1 + .../partials/sidebar-document-history.scss | 100 ++++++++++++++++++ src/uxbox/ui/icons.cljs | 11 ++ .../workspace/sidebar/document-history.cljs | 62 ++++++++++- 5 files changed, 174 insertions(+), 50 deletions(-) create mode 100644 resources/public/styles/partials/sidebar-document-history.scss diff --git a/resources/public/images/svg/pin.svg b/resources/public/images/svg/pin.svg index 53ba1ed45..24bd063a3 100644 --- a/resources/public/images/svg/pin.svg +++ b/resources/public/images/svg/pin.svg @@ -1,49 +1 @@ - - - image/svg+xml - \ No newline at end of file + \ No newline at end of file diff --git a/resources/public/styles/main.scss b/resources/public/styles/main.scss index c492413f9..4b6e8d7ff 100644 --- a/resources/public/styles/main.scss +++ b/resources/public/styles/main.scss @@ -41,6 +41,7 @@ @import 'partials/sidebar-icons'; @import 'partials/sidebar-layers'; @import 'partials/sidebar-sitemap'; +@import 'partials/sidebar-document-history'; @import 'partials/dashboard-bar'; @import 'partials/dashboard-grid'; @import 'partials/activity-bar'; diff --git a/resources/public/styles/partials/sidebar-document-history.scss b/resources/public/styles/partials/sidebar-document-history.scss new file mode 100644 index 000000000..42928ffbe --- /dev/null +++ b/resources/public/styles/partials/sidebar-document-history.scss @@ -0,0 +1,100 @@ +.document-history { + + .history-tabs { + background-color: $secondary-ui-bg; + display: flex; + width: 100%; + + li { + background: darken($secondary-ui-bg, 12%); + border-top-right-radius: $br-small; + border-top-left-radius: $br-small; + color: $intense-ui-text; + cursor: pointer; + font-size: $fs14; + font-weight: bold; + justify-content: center; + margin: $x-small $x-small 0 $x-small; + padding: $x-small $small; + text-align: center; + width: 50%; + + &.selected { + background-color: $primary-ui-bg; + color: $main-ui-color; + } + + } + + } + + .history-content { + display: flex; + flex-direction: column; + width: 100%; + + li { + align-items: center; + border-bottom: 1px solid $soft-ui-border; + cursor: pointer; + display: flex; + font-size: $fs14; + width: 100%; + padding: $small; + + .pin-icon { + cursor: pointer; + + svg { + fill: $soft-ui-icons; + height: 12px; + margin-right: $small; + width: 12px; + + &:hover { + fill: $intense-ui-icons; + } + + } + + &.selected { + + svg { + fill: $intense-ui-icons; + } + + } + + } + + &:hover { + color: $main-ui-color; + } + + &.current { + color: $main-ui-color; + font-weight: bold; + + span { + align-items: center; + display: flex; + + &::before { + background-color: $main-ui-color; + border-radius: 50%; + content: ""; + height: 6px; + flex-shrink: 0; + margin: $x-small; + width: 6px; + } + + } + + } + + } + + } + +} diff --git a/src/uxbox/ui/icons.cljs b/src/uxbox/ui/icons.cljs index d96fdcda6..0606b1ee5 100644 --- a/src/uxbox/ui/icons.cljs +++ b/src/uxbox/ui/icons.cljs @@ -605,3 +605,14 @@ [:path {:d "M267.393 23.48c-88.18.946-172.42 59.717-204.148 141.947-5.39 13.265-9.62 26.997-12.712 40.976-14.833 1.077-31.187-2.467-45.38 3.705-7.584 5.314-6.272 17.125.517 22.538 18.722 23.626 37.06 47.815 58.234 69.276 9.942 5.903 22.776-.814 27.466-10.445 17.49-22.46 36.883-43.903 51.21-68.53 1.854-10.235-9.626-17.808-18.924-16.114-7.377-.535-14.79.508-22.153-.325 16.96-71.22 83.185-127.703 156.316-133.257 61.472-5.76 125.65 23.543 160.772 74.893 34.636 49.37 42.33 116.303 17.738 171.66-22.51 52.993-72.073 93.513-128.673 104.138-53.846 10.76-112.327-5.19-153.14-42.24-6.707-5.932-13.56-13.615-23.355-13.318-14.056-1.012-26.422 12.118-25.292 25.986.046 8.412 5.87 14.975 11.957 20.033 62.64 61.81 163.483 79.47 243.9 44.304 64.723-27.22 115.68-85.82 131.714-154.412 15.942-64.328 2.593-135.65-37.515-188.706C413.59 58.192 343.202 21.59 271.52 23.476c-1.377-.01-2.752-.01-4.127.003zm5 74.84c-14.593.034-25.925 15.445-22.93 29.44-.267 43.316-1.854 80.763.57 124.006 0 16.022 12.657 22.41 31.217 22.41 37.45.106 75.065 1.907 112.41-1.264 16.298-4.748 21.17-28.12 9.398-39.846-6.213-7.357-16.492-8.592-25.47-7.432l-79.22-.735c-.82-37.02 1.053-74.177-2.314-111.09-3.368-9.633-13.656-15.794-23.662-15.49z"}]]])) + +(def pin + (html + [:svg + {:viewBox "0 0 500.00001 500.00001" + :height "500" + :width "500"} + [:g + [:path + {:d + "M325.318.012c-21.828-.283-42.138 15.34-48.74 35.798-15.498 31.788-36.62 62.656-67.738 80.85-46.02 26.248-99.73 35.59-152.188 35.65-11.824-.026-24.336 1.564-34 9.065-18.02 12.488-27.52 36.96-20.133 58.034 4.15 13.85 14.838 24.125 25.197 33.582l86.5 86.5C84.488 381.137 30.993 456.543 1.26 498.187c41.623-29.727 117.01-83.215 158.632-112.942 37.542 36.62 68.373 70.025 106.956 105.56 23.195 15.987 59.377 8.335 73.035-16.723 7.6-12.733 8.225-27.804 7.5-42.23 1.366-50.12 11.25-101.404 37.675-144.67 20.658-31.714 53.59-52.978 87.635-68.023 20.972-10.427 31.76-36.413 25.57-58.77-2.664-11.118-9.64-20.31-17.897-27.873-37.25-36.595-73.2-74.495-110.7-110.84-7.227-6.593-13.718-14.767-23.268-17.904-6.682-2.644-13.898-3.908-21.08-3.758zm-.26 36.837c45.35 46.82 90.704 93.64 136.056 140.46-40.437 18.15-79.907 42.182-106.303 78.613-30.216 43.44-43.98 96.178-48.765 148.346-1.852 21.542-2.097 43.256-1.726 64.933-91.546-91.52-183.09-183.044-274.634-274.564 60.078 2.462 121.696-4.117 176.98-28.967 38.773-15.762 70.437-46.032 91.712-81.66 9.637-15.522 17.813-31.905 25.36-48.525z"}]]])) diff --git a/src/uxbox/ui/workspace/sidebar/document-history.cljs b/src/uxbox/ui/workspace/sidebar/document-history.cljs index fa053cf84..ea3114f90 100644 --- a/src/uxbox/ui/workspace/sidebar/document-history.cljs +++ b/src/uxbox/ui/workspace/sidebar/document-history.cljs @@ -30,7 +30,67 @@ [:span (tr "ds.document-history")] [:div.tool-window-close {:on-click close} i/close]] [:div.tool-window-content - [:span "DOCUMENT HISTORY CONTENT"] + [:ul.history-tabs + [:li.selected "History"] + [:li "Pinned"]] + [:ul.history-content + [:li.current + [:div.pin-icon i/pin] + [:span "Current version"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]] + [:li + [:div.pin-icon i/pin] + [:span "Version 02/02/2016 12:33h"]]] ]]))) (def ^:static document-history-toolbox