liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: navigator sd footer + setup icons fixes

Browse Source
This commit is contained in:
NGPixel 2018-01-01 01:52:28 -05:00
parent a155af20f5
commit 85717bd369
4 changed files with 108 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
client/js/components/navigator.vue
View File

@ -26,33 +26,46 @@
svg.icons.is-24(role='img')
title Search
use(xlink:href='#gg-search')
a(href='')
svg.icons.is-24(role='img', title='New Document')
a(href='', title='New Document')
svg.icons.is-24(role='img')
title New Document
use(xlink:href='#nc-plus-circle')
a(href='')
svg.icons.is-24(role='img', title='Edit Document')
a(href='', title='Edit Document')
svg.icons.is-24(role='img')
title Edit Document
use(xlink:href='#nc-pen-red')
a(href='')
svg.icons.is-24(role='img', title='History')
a(href='', title='History')
svg.icons.is-24(role='img')
title History
use(xlink:href='#nc-restore')
a(href='')
svg.icons.is-24(role='img', title='View Source')
a(href='', title='View Source')
svg.icons.is-24(role='img')
title View Source
use(xlink:href='#nc-code-editor')
a(href='')
svg.icons.is-24(role='img', title='Move Document')
a(href='', title='Move Document')
svg.icons.is-24(role='img')
title Move Document
use(xlink:href='#nc-move')
a(href='')
svg.icons.is-24(role='img', title='Delete Document')
a(href='', title='Delete Document')
svg.icons.is-24(role='img')
title Delete Document
use(xlink:href='#nc-trash')
.navigator-sd-search
input(type='text', placeholder='Search')
input(type='text', ref='iptSearch', placeholder='Search')
.navigator-sd-results
.navigator-sd-footer
a(href='', title='Settings')
svg.icons.is-24(role='img')
title Settings
use(xlink:href='#nc-gear')
a(href='', title='Users')
svg.icons.is-24(role='img')
title Users
use(xlink:href='#nc-users')
a(href='', title='Assets')
svg.icons.is-24(role='img')
title Assets
use(xlink:href='#nc-image')
</template>
<script>
@ -91,6 +104,11 @@ export default {
methods: {
toggleMainMenu() {
this.sdShown = !this.sdShown
if (this.sdShown) {
this.$nextTick(() => {
this.$refs.iptSearch.focus()
})
}
// this.$store.dispatch('navigator/alert', {
// style: 'success',
// icon: 'gg-check',

46
client/scss/components/navigator.scss
View File

@ -150,7 +150,6 @@
width: 350px;
background-color: #FFF;
border-radius: 0 0 5px 0;
padding: 0 0 1rem 0;
transition: all .4s ease;
transform-origin: top left;
@ -180,14 +179,6 @@
&:hover {
background-color: #FFF;
}
svg {
use {
color: mc('blue-grey', '500');
fill: mc('blue-grey', '500');
transition: all .4s ease;
}
}
}
}
@ -197,11 +188,12 @@
input {
display: block;
width: 100%;
padding: 0 1rem 0 1rem;
padding: 0 3rem 0 1rem;
height: 40px;
border: 0;
font-size: .9rem;
color: mc('grey', '700');
position: relative;
&:focus {
outline: none;
@ -209,17 +201,33 @@
}
}
svg {
&::after {
content: " ";
@include spinner(mc('blue', '200'),0.5s,18px);
position: absolute;
width: 20px;
height: 20px;
top: 9px;
left: 15px;
display: block;
top: 11px;
right: 1rem;
}
}
use {
color: mc('grey', '500');
fill: mc('grey', '500');
transition: all .4s ease;
&-footer {
background-color: mc('blue-grey', '100');
border-top: 5px solid mc('blue-grey', '200');
border-radius: 0 0 5px 0;
display: flex;
justify-content: center;
a {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
transition: all .4s ease;
&:hover {
background-color: mc('blue-grey', '200');
}
}
}

73
client/svg/icons.svg
View File

@ -7,7 +7,7 @@
</g>
</g>
</symbol>
<symbol id="nc-world-2" viewBox="0 0 64 64">
<symbol id="nc-world" viewBox="0 0 64 64">
<g>
<g class="nc-icon-wrapper">
<path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M9.6,12 c5.5,7.3,12.5,10,22.4,10c9.8,0,16.9-2.7,22.4-10" stroke-linejoin="miter" stroke-linecap="butt"/>
@ -20,7 +20,7 @@
</g>
</g>
</symbol>
<symbol id="nc-webpage-2" viewBox="0 0 48 48">
<symbol id="nc-webpage" viewBox="0 0 48 48">
<g>
<g class="nc-icon-wrapper">
<path fill="#E6E6E6" d="M45,2H3C1.89545,2,1,2.89539,1,4v3h46V4C47,2.89539,46.10455,2,45,2z"/>
@ -38,7 +38,7 @@
</g>
</g>
</symbol>
<symbol id="nc-square-remove-12" viewBox="0 0 48 48">
<symbol id="nc-square-remove" viewBox="0 0 48 48">
<g>
<g class="nc-icon-wrapper">
<path fill="#E86C60" d="M45,1H3C1.89543,1,1,1.89543,1,3v42c0,1.10457,0.89543,2,2,2h42c1.10457,0,2-0.89543,2-2V3 C47,1.89543,46.10457,1,45,1z"/>
@ -105,7 +105,7 @@
</g>
</g>
</symbol>
<symbol id="nc-home-52" viewBox="0 0 48 48">
<symbol id="nc-home" viewBox="0 0 48 48">
<g>
<g class="nc-icon-wrapper">
<path fill="#C9514B" d="M8,18V7c0-0.55228,0.44771-1,1-1h4c0.55229,0,1,0.44772,1,1v6.09091L8,18z"/>
@ -118,7 +118,7 @@
</g>
</g>
</symbol>
<symbol id="nc-dashboard-30" viewBox="0 0 48 48">
<symbol id="nc-dashboard" viewBox="0 0 48 48">
<g>
<g class="nc-icon-wrapper">
<path fill="#444444" d="M24,47C11.31738,47,1,36.68213,1,24S11.31738,1,24,1s23,10.31787,23,23S36.68262,47,24,47z"/>
@ -133,7 +133,7 @@
</g>
</g>
</symbol>
<symbol id="nc-cloud-download-95" viewBox="0 0 48 48">
<symbol id="nc-cloud-download" viewBox="0 0 48 48">
<g>
<g class="nc-icon-wrapper">
<path fill="#43A6DD" d="M38.86328,21.04102C37.89014,13.09766,31.08936,7,23,7C14.69971,7,7.84326,13.31836,7.08789,21.51074 C3.46875,22.74609,1,26.13867,1,30c0,4.96289,4.0376,9,9,9h28c4.9624,0,9-4.03711,9-9 C47,25.32812,43.42236,21.47656,38.86328,21.04102z"/>
@ -141,7 +141,7 @@
</g>
</g>
</symbol>
<symbol id="nc-cloud-upload-96" viewBox="0 0 48 48">
<symbol id="nc-cloud-upload" viewBox="0 0 48 48">
<g>
<g class="nc-icon-wrapper">
<path fill="#43A6DD" d="M38.86328,21.04102C37.89062,13.09766,31.08887,7,23,7C14.69922,7,7.84277,13.31836,7.08789,21.51074 C3.46875,22.74609,1,26.13867,1,30c0,4.96289,4.03711,9,9,9h28c4.96289,0,9-4.03711,9-9 C47,25.3291,43.42285,21.47754,38.86328,21.04102z"/>
@ -158,7 +158,7 @@
</g>
</g>
</symbol>
<symbol id="nc-chat-33" viewBox="0 0 48 48">
<symbol id="nc-chat" viewBox="0 0 48 48">
<g>
<g class="nc-icon-wrapper">
<path fill="#BADEFC" d="M47,29c0-7.168-7.626-13-17-13s-17,5.832-17,13s7.626,13,17,13c1.119,0,2.211-0.088,3.27-0.247l8.283,4.141 C41.694,45.965,41.847,46,42,46c0.183,0,0.365-0.05,0.526-0.149C42.82,45.668,43,45.347,43,45v-7.64C45.492,35.097,47,32.182,47,29z "/>
@ -166,7 +166,7 @@
</g>
</g>
</symbol>
<symbol id="nc-man-23" viewBox="0 0 48 48">
<symbol id="nc-man" viewBox="0 0 48 48">
<g>
<g class="nc-icon-wrapper">
<rect x="18" y="24" fill-rule="evenodd" clip-rule="evenodd" fill="#EAC3A2" width="12" height="15"/>
@ -202,7 +202,7 @@
</g>
</g>
</symbol>
<symbol id="nc-ms-dots" viewBox="0 0 100 100">
<symbol id="wk-msdots" viewBox="0 0 100 100">
<g>
<g class="nc-icon-wrapper">
<g transform="rotate(0)">
@ -245,7 +245,7 @@
</g>
</g>
</symbol>
<symbol id="nc-key-26" viewBox="0 0 48 48">
<symbol id="nc-key" viewBox="0 0 48 48">
<g>
<g class="nc-icon-wrapper">
<path fill="#C6C6C6" d="M23,34h-8c-0.55273,0-1-0.44775-1-1v-8c0-0.26514,0.10547-0.51953,0.29297-0.70703l22-22 C36.48047,2.10547,36.73438,2,37,2h8c0.55273,0,1,0.44775,1,1v8c0,0.26514-0.10547,0.51953-0.29297,0.70703l-3,3 C42.51953,14.89453,42.26562,15,42,15h-5v5c0,0.55225-0.44727,1-1,1h-5v5c0,0.26514-0.10547,0.51953-0.29297,0.70703l-7,7 C23.51953,33.89453,23.26562,34,23,34z"/>
@ -288,7 +288,7 @@
</g>
</g>
</symbol>
<symbol id="nc-man-38" viewBox="0 0 48 48">
<symbol id="nc-man" viewBox="0 0 48 48">
<g>
<g class="nc-icon-wrapper">
<rect x="17.9983292" y="24" fill-rule="evenodd" clip-rule="evenodd" fill="#EAC3A2" width="12" height="17"/>
@ -321,24 +321,6 @@
</g>
</g>
</symbol>
<symbol id="nc-webpage-2-2" viewBox="0 0 48 48">
<g>
<g class="nc-icon-wrapper">
<path fill="#E6E6E6" d="M45,2H3C1.89545,2,1,2.89539,1,4v3h46V4C47,2.89539,46.10455,2,45,2z"/>
<rect x="1" y="7" fill="#43A6DD" width="46" height="12"/>
<path fill="#E6E6E6" d="M16,19v27h29c1.10455,0,2-0.89545,2-2V19H16z"/>
<path fill="#444444" d="M1,19v25c0,1.10455,0.89545,2,2,2h13V19H1z"/>
<circle fill="#E6E6E6" cx="8" cy="13" r="3"/>
<path fill="#E6E6E6" d="M42,14h-4c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h4c0.55225,0,1,0.44727,1,1S42.55225,14,42,14z"/>
<path fill="#E6E6E6" d="M33,14h-9c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h9c0.55225,0,1,0.44727,1,1S33.55225,14,33,14z"/>
<path fill="#B3B3B3" d="M28.90455,36h-7.80911C20.49045,36,20,35.50955,20,34.90456v-9.80911C20,24.49045,20.49045,24,21.09545,24 h7.80911C29.50955,24,30,24.49045,30,25.09545v9.80911C30,35.50955,29.50955,36,28.90455,36z"/>
<path fill="#B3B3B3" d="M42,26h-8c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h8c0.55225,0,1,0.44727,1,1S42.55225,26,42,26z"/>
<path fill="#B3B3B3" d="M42,31h-8c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h8c0.55225,0,1,0.44727,1,1S42.55225,31,42,31z"/>
<path fill="#B3B3B3" d="M42,36h-8c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h8c0.55225,0,1,0.44727,1,1S42.55225,36,42,36z"/>
<path fill="#B3B3B3" d="M42,41H21c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h21c0.55225,0,1,0.44727,1,1S42.55225,41,42,41z"/>
</g>
</g>
</symbol>
<symbol id="gg-apps-grid" viewBox="0 0 48 48">
<g>
<g class="nc-icon-wrapper" fill="currentColor">
@ -427,4 +409,35 @@
<path fill="#444444" d="M47.658,13.247l-8-7c-0.294-0.257-0.715-0.32-1.071-0.157C38.229,6.252,38,6.607,38,7v5 c-8.829,0-14.21,5.382-19.414,10.586C13.745,27.427,9.171,32,2,32H1c-0.552,0-1,0.448-1,1v2c0,0.552,0.448,1,1,1h1 c8.829,0,14.21-5.382,19.414-10.586C26.255,20.573,30.829,16,38,16v5c0,0.393,0.229,0.748,0.587,0.91C38.719,21.971,38.86,22,39,22 c0.237,0,0.473-0.085,0.658-0.247l8-7C47.876,14.562,48,14.288,48,14S47.876,13.438,47.658,13.247z"></path>
</g>
</symbol>
<symbol id='nc-folder-image' viewBox="0 0 48 48">
<g class="nc-icon-wrapper">
<path fill="#F9D44C" d="M17,8l-4-4H3C1.895,4,1,4.895,1,6v34c0,2.209,1.791,4,4,4h38c2.209,0,4-1.791,4-4V12c0-2.209-1.791-4-4-4H17 z"></path>
<path fill="#C7AA3D" d="M47,14H1V6c0-1.105,0.895-2,2-2h10l4,4h26c2.209,0,4,1.791,4,4V14z"></path>
<circle fill="#C7AA3D" cx="20.5" cy="22.5" r="2.5"></circle>
<path fill="#C7AA3D" d="M34.79,33.386l-7-9c-0.194-0.248-0.477-0.37-0.81-0.386c-0.315,0.007-0.61,0.162-0.793,0.419l-4.313,6.039 l-3.166-3.165c-0.212-0.212-0.504-0.315-0.806-0.288c-0.298,0.029-0.567,0.191-0.733,0.44l-4,6c-0.205,0.307-0.224,0.701-0.05,1.026 C13.292,34.797,13.631,35,14,35h20c0.382,0,0.73-0.218,0.898-0.561C35.066,34.097,35.024,33.688,34.79,33.386z"></path>
</g>
</symbol>
<symbol id='nc-users' viewBox="0 0 48 48">
<g class="nc-icon-wrapper">
<circle fill="#5A7A84" cx="39" cy="10" r="5"></circle>
<circle fill="#5A7A84" cx="9" cy="10" r="5"></circle>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#5A7A84" d="M35.9966888,17C33.2370911,17,31,19.2295895,31,22.0038109 v6.7917995c0,0.5547104,0.4171391,1.1712494,0.9327698,1.3774986L34,31l0.9164581,10.9975281 C34.9626007,42.551178,35.4530411,43,35.9970284,43h6.0059433c0.5506401,0,1.0350075-0.455761,1.0805702-1.0024719L44,31 l2.0507812-0.6835899C46.5750198,30.1416607,47,29.5525093,47,29.0014992v-6.9939594C47,19.2419491,44.758419,17,42.0033112,17 H35.9966888z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#5A7A84" d="M5.996686,17C3.237092,17,1,19.2295895,1,22.0038109v6.7917995 c0,0.5547104,0.4171371,1.1712494,0.9327741,1.3774986L4,31l0.916461,10.9975281C4.9625978,42.551178,5.4530358,43,5.9970298,43 h6.00594c0.5506401,0,1.0350103-0.455761,1.0805702-1.0024719L14,31l2.0507812-0.6835899 C16.5750198,30.1416607,17,29.5525093,17,29.0014992v-6.9939594C17,19.2419491,14.75842,17,12.0033102,17H5.996686z"></path>
<circle fill="#335262" cx="24" cy="7" r="6"></circle>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#335262" d="M20.0006599,15C16.6865902,15,14,17.6780396,14,21.0033302v8.9958 c0,0.5527592,0.39816,1.1999512,0.8877296,1.4447289L18,33l1.0039997,13.0830002C19.0470009,46.6020012,19.4790001,47,20,47h8 c0.5209999,0,0.9529991-0.3979988,0.9960003-0.9169998l0.941-13.2870026l3.1410408-1.3884583 C33.5872307,31.1824608,34,30.5553703,34,29.9991302v-8.9958C34,17.6877804,31.3234596,15,27.9993401,15H20.0006599z"></path>
</g>
</symbol>
<symbol id='nc-image' viewBox="0 0 48 48">
<g class="nc-icon-wrapper">
<path fill="#223E49" d="M45,45H3c-1.105,0-2-0.895-2-2V5c0-1.105,0.895-2,2-2h42c1.105,0,2,0.895,2,2v38C47,44.105,46.105,45,45,45z "></path>
<circle fill="#EFD358" cx="21" cy="15" r="4"></circle>
<path fill="#5A7A84" d="M41.792,35.39l-10-13c-0.378-0.492-1.207-0.492-1.585,0l-8.243,10.715l-6.184-7.73 c-0.379-0.475-1.183-0.475-1.562,0l-8,10C5.697,36.028,6.161,37,7,37h34C41.829,37,42.298,36.047,41.792,35.39z"></path>
</g>
</symbol>
<symbol id='nc-gear' viewBox="0 0 48 48">
<g class="nc-icon-wrapper">
<path fill="#5A7A84" d="M46,19h-5.76807c-0.31299-1.01953-0.7207-2.00488-1.21777-2.94336l4.07764-4.07715 c0.1875-0.1875,0.29297-0.44141,0.29297-0.70703s-0.10547-0.51953-0.29297-0.70703L37.43506,4.9082 c-0.39062-0.39062-1.02344-0.39062-1.41406,0l-4.07812,4.07715C31.00488,8.48926,30.01953,8.08105,29,7.76855V2 c0-0.55273-0.44775-1-1-1h-8c-0.55225,0-1,0.44727-1,1v5.76855c-1.01953,0.3125-2.00488,0.7207-2.94287,1.2168L11.979,4.9082 c-0.39062-0.39062-1.02344-0.39062-1.41406,0L4.9082,10.56543c-0.1875,0.1875-0.29297,0.44141-0.29297,0.70703 s0.10547,0.51953,0.29297,0.70703l4.07764,4.07715C8.48877,16.99512,8.08105,17.98047,7.76807,19H2c-0.55225,0-1,0.44727-1,1v8 c0,0.55273,0.44775,1,1,1h5.76807c0.31299,1.01953,0.7207,2.00488,1.21777,2.94336L4.9082,36.02051 c-0.1875,0.1875-0.29297,0.44141-0.29297,0.70703s0.10547,0.51953,0.29297,0.70703l5.65674,5.65723 c0.39062,0.39062,1.02344,0.39062,1.41406,0l4.07812-4.07715c0.93799,0.49609,1.92334,0.9043,2.94287,1.2168V46 c0,0.55273,0.44775,1,1,1h8c0.55225,0,1-0.44727,1-1v-5.76855c1.01953-0.3125,2.00488-0.7207,2.94287-1.2168L36.021,43.0918 c0.39062,0.39062,1.02344,0.39062,1.41406,0l5.65674-5.65723c0.1875-0.1875,0.29297-0.44141,0.29297-0.70703 s-0.10547-0.51953-0.29297-0.70703l-4.07764-4.07715c0.49707-0.93848,0.90479-1.92383,1.21777-2.94336H46c0.55225,0,1-0.44727,1-1 v-8C47,19.44727,46.55225,19,46,19z M24,31c-3.86597,0-7-3.13403-7-7c0-3.86603,3.13403-7,7-7c3.86603,0,7,3.13397,7,7 C31,27.86597,27.86603,31,24,31z"></path>
<path fill="#335262" d="M24,13c-6.07513,0-11,4.92487-11,11s4.92487,11,11,11s11-4.92487,11-11S30.07513,13,24,13z M24,31 c-3.86597,0-7-3.13403-7-7c0-3.86603,3.13403-7,7-7c3.86603,0,7,3.13397,7,7C31,27.86597,27.86603,31,24,31z"></path>
</g>
</symbol>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 45 KiB

14
server/views/setup.pug
View File

@ -54,7 +54,7 @@ block body
.is-logo
svg.icons.is-64: use(xlink:href='#nc-metrics')
h4 System Check
p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href='#nc-ms-dots')] Checking your system for compatibility...
p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href='#wk-msdots')] Checking your system for compatibility...
p(v-if='!loading && syscheck.ok')
ul
li(v-for='rs in syscheck.results') #[svg.icons.is-18.is-text: use(xlink:href='#nc-check-bold')] {{rs}}
@ -81,7 +81,7 @@ block body
.panel-content.form-sections
section
.is-logo
svg.icons.is-64: use(xlink:href='#nc-webpage-2-2')
svg.icons.is-64: use(xlink:href='#nc-webpage')
h4 General Information
p.control.is-fullwidth
label.label Site Title
@ -249,14 +249,14 @@ block body
.is-logo
img(src='svg/logo-git.svg', alt='Git Logo')
h4 Git Repository Check
p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href='#nc-ms-dots')] Verifying Git repository settings...
p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href='#wk-msdots')] Verifying Git repository settings...
p(v-if='!loading && gitcheck.ok')
ul
li(v-for='rs in gitcheck.results') #[svg.icons.is-18.is-text: use(xlink:href='#nc-check-bold')] {{rs}}
p(v-if='!loading && gitcheck.ok')
svg.icons.is-18.is-text: use(xlink:href='#nc-check-bold')
strong Git settings are correct!
p(v-if='!loading && !gitcheck.ok') #[svg.icons.is-18.is-text: use(xlink:href='#nc-square-remove-12')] Error: {{ gitcheck.error }}
p(v-if='!loading && !gitcheck.ok') #[svg.icons.is-18.is-text: use(xlink:href='#nc-square-remove')] Error: {{ gitcheck.error }}
.panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back
@ -274,7 +274,7 @@ block body
i(v-if='loading')
.panel-content.is-text
.is-logo
svg.icons.is-64: use(xlink:href='#nc-man-38')
svg.icons.is-64: use(xlink:href='#nc-man')
h4 Administrator Account
p A root administrator account will be created for local authentication. From this account, you can create or authorize more users.
.panel-content.form-sections
@ -335,7 +335,7 @@ block body
i(v-if='loading')
.panel-content.is-text
.is-logo(v-if='loading')
svg.icons.is-64: use(xlink:href='#nc-ms-dots')
svg.icons.is-64: use(xlink:href='#wk-msdots')
h4 Finalizing your installation...
.is-logo(v-if='!loading && final.ok')
svg.icons.is-64: use(xlink:href='#nc-check-bold')
@ -343,7 +343,7 @@ block body
p(v-if='!loading && final.ok'): strong Wiki.js was configured successfully and is now ready for use.
p(v-if='!loading && final.ok')
| Click the <strong>Start</strong> button below to launch your newly configured wiki.
p(v-if='!loading && !final.ok') #[svg.icons.is-18.is-text: use(xlink:href='#nc-square-remove-12')] Error: {{ final.error }}
p(v-if='!loading && !final.ok') #[svg.icons.is-18.is-text: use(xlink:href='#nc-square-remove')] Error: {{ final.error }}
.panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToAdmin', v-bind:disabled='loading') Back