Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-14 07:51:35 -05:00
Code Issues Activity

add document history styles

Browse source
This commit is contained in:
Juan de la Cruz 2016-02-20 23:45:35 +01:00
parent 482bf4e5e1
commit 26247f86da
5 changed files with 174 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
resources/public/images/svg/pin.svg
View file

@ -1,49 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="499.17151"
id="Layer_1"
version="1.2"
viewBox="0 0 500 499.17151"
width="500"
xml:space="preserve"
sodipodi:docname="pin.svg"
inkscape:version="0.91 r13725"><metadata
id="metadata9"><rdf:RDF><cc:Work
rdf:about=""><dc:format>
image/svg+xml
</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs7" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
id="namedview5"
showgrid="false"
borderlayer="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.295"
inkscape:cx="-527.11864"
inkscape:cy="399.3372"
inkscape:window-width="1920"
inkscape:window-height="1056"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
d="m 325.31837,0.01188188 c -21.82819,-0.28305 -42.13868,15.33951012 -48.74148,35.79822012 -15.49713,31.78792 -36.61941,62.65613 -67.73679,80.851258 -46.01922,26.24621 -99.73104,35.5894 -152.187741,35.6499 -11.824304,-0.0272 -24.336736,1.56253 -34.001282,9.06349 C 4.6323372,173.86279 -4.8678964,198.33387 2.5189597,219.4091 6.670185,233.26068 17.358129,243.53542 27.71658,252.99227 58.217203,283.49249 83.717838,308.99269 114.21845,339.49292 84.486994,381.13603 30.991674,456.54267 1.2601344,498.18573 42.882791,468.45944 118.27039,414.97126 159.89226,385.24386 c 37.5422,36.61978 68.37301,70.02528 106.95586,105.55993 23.19531,15.98678 59.37703,8.33532 73.03488,-16.7224 7.60083,-12.73438 8.22477,-27.80576 7.50043,-42.231 1.3658,-50.12185 11.25009,-101.40472 37.67469,-144.66975 20.65799,-31.71465 53.5884,-52.97887 87.63506,-68.02402 20.97205,-10.42669 31.76052,-36.4126 25.5708,-58.77079 -2.66468,-11.11709 -9.64082,-20.30951 -17.89795,-27.87169 C 443.11547,95.918772 407.16559,58.018842 369.66538,21.674292 362.43928,15.080752 355.94776,6.9073419 346.39846,3.7696819 339.71622,1.1259319 332.50022,-0.13771812 325.31837,0.01188188 Z M 325.05664,36.848942 c 45.35182,46.8209 90.70532,93.640158 136.05715,140.461058 -40.43648,18.14924 -79.90691,42.18192 -106.30326,78.61287 -30.21683,43.44098 -43.97918,96.17766 -48.76543,148.34587 -1.85239,21.5434 -2.09664,43.25727 -1.72591,64.93459 C 212.77403,377.68259 121.23135,286.15937 29.686206,194.63862 c 60.078157,2.46294 121.695714,-4.11531 176.978884,-28.96583 38.7738,-15.76182 70.43783,-46.03212 91.71264,-81.660978 9.63775,-15.52096 17.81297,-31.90336 25.3614,-48.52336 z"
id="path3"
sodipodi:nodetypes="cccccccccccccccccccccccccccccc"
inkscape:connector-curvature="0" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="499.172" version="1.2" viewBox="0 0 500 499.17151" width="500"><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"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

1
resources/public/styles/main.scss
View file

@ -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';

100
resources/public/styles/partials/sidebar-document-history.scss Normal file
View file

@ -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;
}
}
}
}
}
}

11
src/uxbox/ui/icons.cljs
View file

@ -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"}]]]))

62
src/uxbox/ui/workspace/sidebar/document-history.cljs
View file

@ -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