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

feat: Integrate new svg icons set + config wiz UI improvements

Browse Source
This commit is contained in:
NGPixel 2017-10-29 01:30:46 -04:00
parent 51cd37fd05
commit 72e3bacc2e
14 changed files with 233 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/js/app.js
View File

@ -13,6 +13,7 @@ import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import store from './store'
import icons from '../svg/nc-icons.svg'
// ====================================
// Load Modules
@ -165,4 +166,10 @@ document.addEventListener('DOMContentLoaded', ev => {
}
})
// ====================================
// Load Icons
// ====================================
document.body.insertAdjacentHTML('beforeend', icons)
})

15
client/js/components/config-manager.component.js
View File

@ -46,6 +46,7 @@ export default {
gitAuthSSL: true,
gitShowUserEmail: true,
gitServerEmail: '',
mongo: 'mongodb://',
adminEmail: '',
adminPassword: '',
adminPasswordConfirm: ''
@ -82,6 +83,9 @@ export default {
case 'admin':
perc = '75%'
break
case 'upgrade':
perc = '85%'
break
}
return perc
}
@ -195,6 +199,17 @@ export default {
self.$validator.validateAll('admin')
})
},
proceedToUpgrade: function (ev) {
if (this.conf.upgrade) {
this.state = 'upgrade'
this.loading = false
this.$nextTick(() => {
this.$validator.validateAll('upgrade')
})
} else {
this.proceedToFinal()
}
},
proceedToFinal: function (ev) {
let self = this
self.state = 'final'

2
client/scss/app.scss
View File

@ -7,6 +7,7 @@ $primary: 'indigo';
@import "base/reset";
@import "base/mixins";
@import "base/fonts";
@import "base/icons";
@import "base/base";
@import "libs/animate";
@ -45,6 +46,5 @@ $primary: 'indigo';
@import 'layout/_rtl';
@import 'pages/login';
@import 'pages/welcome';
@import 'base/print';

48
client/scss/base/icons.scss Normal file
View File

@ -0,0 +1,48 @@
.icons {
display: inline-block;
color: mc('grey', '800');
&.is-text {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
position: relative;
top: -0.0625em;
stroke: none;
fill: none;
}
&.is-16 {
width: 16px;
height: 16px;
}
&.is-18 {
width: 18px;
height: 18px;
}
&.is-20 {
width: 20px;
height: 20px;
}
&.is-24 {
width: 24px;
height: 24px;
}
&.has-right-pad {
margin-right: .5rem;
}
&.is-outlined {
stroke-width: 2px;
use {
fill: inherit;
stroke: mc('grey', '800');
}
}
}

42
client/scss/components/config-manager.scss
View File

@ -1,11 +1,31 @@
.config-manager {
background-image: linear-gradient(to right, mc('indigo', '400'), mc('indigo', '600'));
width: 100%;
min-height: 100%;
padding-top: 1rem;
&::before {
content: '';
position: absolute;
background-image: url('../svg/login-bg.svg');
background-position: center bottom;
background-size: cover;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.welcome {
text-align: center;
padding: 50px 0 15px 0;
color: mc('grey', '700');
padding: 1rem 0 2rem 0;
border-bottom: 1px solid mc('indigo', '50');
margin-bottom: 1rem;
h2 {
margin: 0;
color: mc('indigo', '700');
font-weight: 500;
}
}
@ -14,30 +34,16 @@
display: inline-block;
color: mc('indigo', '500')
}
i.icon-check {
i.ui-1_check-simple {
color: mc('green', '500')
}
i.icon-square-cross {
i.ui-2_ban-bold {
color: mc('red', '500')
}
i.icon-warning-outline {
color: mc('orange', '500')
}
.tst-welcome-leave-active, .tst-welcome-enter-active {
transition: all .5s;
overflow-y: hidden;
}
.tst-welcome-leave, .tst-welcome-enter-to {
opacity: 1;
max-height: 200px;
}
.tst-welcome-leave-to, .tst-welcome-enter {
opacity: 0;
max-height: 0;
padding-top: 0;
}
.progress-bar {
width: 150px;
height: 10px;

4
client/scss/components/panel.scss
View File

@ -32,8 +32,8 @@
&.is-featured {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: mc($primary, '400');
border-bottom-color: mc($primary, '500');
background-color: mc('indigo', '400');
border-bottom-color: mc('indigo', '500');
color: #FFF;
> i::before {

81
client/scss/configure.scss
View File

@ -1,81 +0,0 @@
@charset "utf-8";
$primary: 'indigo';
@import "base/variables";
@import "base/colors";
@import "base/reset";
@import "base/mixins";
@import "base/fonts";
@import "base/base";
@import "libs/animate";
@import 'components/button';
@import 'components/footer';
@import 'components/form';
@import 'components/grid';
@import 'components/modal';
@import 'components/nav';
@import 'components/panel';
@import 'components/typography';
.welcome {
text-align: center;
padding: 50px 0 15px 0;
color: mc('grey', '700');
h2 {
margin: 0;
}
}
i.icon-loader {
display: inline-block;
color: mc('indigo', '500')
}
i.icon-check {
color: mc('green', '500')
}
i.icon-square-cross {
color: mc('red', '500')
}
i.icon-warning-outline {
color: mc('orange', '500')
}
.tst-welcome-leave-active, .tst-welcome-enter-active {
transition: all .5s;
overflow-y: hidden;
}
.tst-welcome-leave, .tst-welcome-enter-to {
opacity: 1;
max-height: 200px;
}
.tst-welcome-leave-to, .tst-welcome-enter {
opacity: 0;
max-height: 0;
padding-top: 0;
}
.progress-bar {
width: 150px;
height: 10px;
background-color: mc('indigo', '50');
border:1px solid mc('indigo', '100');
border-radius: 3px;
position: absolute;
left: 15px;
top: 21px;
padding: 1px;
> div {
width: 5px;
height: 6px;
background-color: mc('indigo', '200');
border-radius: 2px;
transition: all 1s ease;
}
}

22
client/scss/libs/animate.scss vendored
View File

@ -3483,4 +3483,26 @@
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
@keyframes spin {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -360deg);
transform: rotate3d(0, 0, 1, -360deg);
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
}
}
.spin {
-webkit-animation-name: spin;
animation-name: spin;
}

61
client/scss/libs/nucleo-icons-license.txt Normal file
View File

@ -0,0 +1,61 @@
# Standard License - nucleoapp.com
Github repo: https://github.com/NucleoApp/license-standard
By purchasing Nucleo you are being granted a license to use Nucleo icons (including the custom Nucleo icons created through the Nucleo applications) for specific uses under certain conditions.
You have rights to use Nucleo icons in unlimited personal and commercial projects for yourself or a client. Even if you don't renew the Basic license, you can still use the source files for as many projects as you want.
For each project, you can use a maximum of 250 Nucleo icons (intended per unique style: for example if you're using the same icon in both the outline and glyph styles, or in 2 different sizes, you're using 2 icons).
By purchasing Nucleo, you have the right to:
- Use Nucleo icons in unlimited personal and commercial projects.
- Use Nucleo icons in application/website/print/mobile/logo design.
- Modify Nucleo icons to create you own icon variations.
You don't have the right to:
- Sublicense, resell, share, transfer, or otherwise redistribute Nucleo icons (even for free or within a more complex downloadable file).
- Use more than 250 Nucleo icons in a single project.
- Use Nucleo icons in a product that is directly competitive with Nucleo.
## Freelance Projects & Contracted work
If you’re working on one or more projects for a client, you can share with your client a maximum of 250 Nucleo icons per project. You can’t share Nucleo source files, unless the client purchases a Nucleo license.
If the End Product you (or the team you’ve been part of) have created for the client is a product offered for sale, and the Nucleo icons contribute to the core value of the product being sold/shared, your client will have to buy an Extended License.
## End Product Users
If you're using Nucleo icons in apps, installable items or online products/services, there's no limit to the number of users/customers that can use the product you're developing (e.g. if you're developing a web application and you're using Nucleo icons throughout the design, there's no limit to the number of active users of the application).
## Templates, Themes, UI Kits & Plugins
If you’re using Nucleo icons in templates, themes or plugins offered for sale, or for free, (e.g. UI kits, Wordpress Themes, HTML/CSS Templates), you can include up to 100 icons in the downloadable source files. This limitation applies to the icon fonts as well.
The downloadable source file has to include [Nucleo license](https://github.com/NucleoApp/license-standard). No attribution or link back required, however any credit will be much appreciated.
If Nucleo icons contribute to the core value of the template, theme or plugin sold/shared (e.g. a theme builder where users can browse Nucleo icons and pick the ones to include in their design), you will need an Extended License.
## Open source projects
If you’re using Nucleo icons in open source projects, you can include up to 100 icons in the downloadable source files. This limitation applies to the icon fonts as well.
The downloadable source file has to include [Nucleo license](https://github.com/NucleoApp/license-standard). No attribution or link back required, however any credit will be much appreciated.
If Nucleo icons contribute to the core value of the open source project (e.g. a CMS where users can browse Nucleo icons and pick the ones to include in their design), you will need an Extended License.
## Extended License
If you're interested in using Nucleo icons in items offered for sale (or for free) where the Nucleo icons contribute to the core value of the product being sold/shared, you will need an Extended License.
By purchasing an Extended License, you’re also granted the right to:
- Use up to 500 icons in a single project (the one you’re purchasing the Extended License for) if the users/customers can access Nucleo source files (e.g. Nucleo icons are stored in a folder inside the downloadable file).
- Use unlimited icons if the users/customers cannot access Nucleo source files (e.g. Nucleo icons are encrypted and user can only use icons throughout the application).
The downloadable source file has to include [Nucleo Standard License](https://github.com/NucleoApp/license-standard), as well as Nucleo Extended License.
Example of products offered for sale (or for free) where Nucleo contributes to the core value of the product being sold/shared:
- Logo builder application that combines Nucleo icons to create a logo
- Theme builder where users can browse Nucleo icons and pick the ones to include in their design.
- Application used to create presentations, where users can pick Nucleo icons through the built-in presentation builder.
If you’re still unclear about what is or isn’t allowed under this license, please contact us at info@nucleoapp.com.

15
client/scss/pages/_welcome.scss
View File

@ -1,15 +0,0 @@
.welcome {
text-align: center;
padding: 50px 0;
color: mc('grey', '700');
h1 {
margin-top: 15px;
}
h2 {
margin-top: 15px;
margin-bottom: 50px;
}
}

1
client/svg/nc-icons.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

7
server/index.js
View File

@ -36,6 +36,13 @@ wiki.logger = require('./modules/logger').init()
wiki.telemetry = require('./modules/telemetry').init()
process.on('unhandledRejection', (err) => {
wiki.telemetry.sendError(err)
})
process.on('uncaughtException', (err) => {
wiki.telemetry.sendError(err)
})
// ----------------------------------------
// Init DB
// ----------------------------------------

64
server/views/configure/index.pug
View File

@ -6,10 +6,6 @@ block body
config-manager(inline-template)
div
.container
transition(name='tst-welcome')
.welcome(v-if='state === "welcome" || state === "restart"')
img(src='/images/logo.png', alt='Wiki.js')
h2 A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown
.content(v-cloak)
//- ==============================================
@ -22,11 +18,16 @@ block body
span Welcome!
i(v-if='loading')
.panel-content.is-text
.welcome
img(src='/images/logo.png', alt='Wiki.js')
h2 A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown
p This installation wizard will guide you through the steps needed to get your wiki up and running in no time!
p Detailed information about installation and usage can be found on the #[a(href='https://wiki.requarks.io/docs') official documentation site]. #[br] Should you have any question or would like to report something that doesn't look right, feel free to create a new issue on the #[a(href='https://github.com/Requarks/wiki/issues') GitHub project].
.panel-content.form-sections
section
p #[i.nc-icon-outline.tech_cd-reader] You are about to install Wiki.js #[strong= packageObj.version].
p
svg.icons.is-18.is-outlined.has-right-pad.is-text: use(xlink:href="#nc-cd-reader")
span You are about to install Wiki.js #[strong= packageObj.version].
section
p.control.is-fullwidth
input#ipt-telemetry(type='checkbox', v-model='conf.telemetry', name='ipt-telemetry')
@ -50,14 +51,14 @@ block body
span System Check
i(v-if='loading')
.panel-content.is-text
p(v-if='loading') #[i.icon-loader.animated.rotateIn.infinite] Checking your system for compatibility...
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 && syscheck.ok')
ul
li(v-for='rs in syscheck.results') #[i.icon-check] {{rs}}
li(v-for='rs in syscheck.results') #[svg.icons.is-18.is-text: use(xlink:href="#nc-check-bold")] {{rs}}
p(v-if='!loading && syscheck.ok')
i.icon-check
svg.icons.is-18.is-text: use(xlink:href="#nc-check-bold")
strong Looks good! No issues so far.
p(v-if='!loading && !syscheck.ok') #[i.icon-square-cross] Error: {{ syscheck.error }}
p(v-if='!loading && !syscheck.ok') #[svg.icons.is-18.is-text: use(xlink:href="#nc-square-remove-12")] Error: {{ syscheck.error }}
.panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToWelcome', v-bind:disabled='loading') Back
@ -128,7 +129,6 @@ block body
p
ul
li - Make sure the upload limit is sufficient. Most web servers have a low limit (e.g. 2 MB) by default.
li - Make sure your web server is configured to allow web sockets. Wiki.js will fallback to standard XHR queries if not available.
li - Do not rewrite URLs after the domain. This can cause unexpected issues in Wiki.js navigation.
li - Do not remove or alter the client IP when proxying the requests. This can cause the authentication brute force protection to engage unexpectedly.
template(v-if='considerations.https')
@ -137,9 +137,6 @@ block body
template(v-if='considerations.port')
h3 You are using a non-standard port.
p If you are not planning on using a web server / proxy in front of Wiki.js, be aware that users will need to specify the port when accessing the wiki. Make sure this is the intended behavior. Otherwise set a standard HTTP port such as 80.
template(v-if='considerations.localhost')
h3 Are you sure you want to use localhost as the host base URL? #[i.nc-icon-outline.ui-3_alert.animated.fadeOut.infinite]
p The host URL you specified is localhost. Unless you are a developer running Wiki.js locally on your machine, this is not recommended!
.panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToGeneral', v-bind:disabled='loading') Back
@ -221,14 +218,14 @@ block body
span Git Repository Check
i(v-if='loading')
.panel-content.is-text
p(v-if='loading') #[i.icon-loader.animated.rotateIn.infinite] Verifying Git repository settings...
p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href="#nc-ms-dots")] Verifying Git repository settings...
p(v-if='!loading && gitcheck.ok')
ul
li(v-for='rs in gitcheck.results') #[i.icon-check] {{rs}}
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')
i.icon-check
svg.icons.is-18.is-text: use(xlink:href="#nc-check-bold")
strong Git settings are correct!
p(v-if='!loading && !gitcheck.ok') #[i.icon-square-cross] Error: {{ gitcheck.error }}
p(v-if='!loading && !gitcheck.ok') #[svg.icons.is-18.is-text: use(xlink:href="#nc-square-remove-12")] 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
@ -245,7 +242,7 @@ block body
span Administrator Account
i(v-if='loading')
.panel-content.is-text
p An administrator account will be created for local authentication. From this account, you can create or authorize more users.
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
section
p.control.is-fullwidth
@ -266,7 +263,34 @@ block body
.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
button.button.is-small.is-light-blue(v-on:click='proceedToFinal', v-bind:disabled='loading || errors.any("admin")') Continue
button.button.is-small.is-light-blue(v-on:click='proceedToUpgrade', v-bind:disabled='loading || errors.any("admin")') Continue
//- ==============================================
//- UPGRADE FROM 1.x
//- ==============================================
template(v-else-if='state === "upgrade"')
.panel
h2.panel-title.is-featured
span Upgrade from Wiki.js 1.x
i(v-if='loading')
.panel-content.is-text
p Migrating from a Wiki.js 1.x installation is quick and simple.
.panel-content.form-sections
section
p.control.is-fullwidth
label.label Connection String to Wiki.js 1.x MongoDB database
input(type='text', placeholder='mongodb://', v-model='conf.mongo', data-vv-scope='mongo', name='ipt-mongo', v-validate='{ required: true, min: 2 }')
span.desc A MongoDB database connection string where a Wiki.js 1.x installation is located. #[strong No alterations will be made to this database. ]
section
p.control.is-fullwidth
input#ipt-public(type='checkbox', v-model='conf.public', data-vv-scope='general', name='ipt-public')
label.label(for='ipt-public') Create groups based on individual permissions
span.desc User groups will be created based on existing users permissions. If multiple users have the exact same permission rules, they will be put in the same user group.
.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
button.button.is-small.is-light-blue(v-on:click='proceedToFinal', v-bind:disabled='loading || errors.any("general")') Continue
//- ==============================================
//- FINAL
@ -307,5 +331,5 @@ block body
button.button.is-small.is-green(disabled='disabled') Start
.footer
small Wiki.js Configuration Manager
small Wiki.js Installation Wizard
small(v-if='conf.telemetry') Telemetry Client ID: !{telemetryClientID}

1
tools/fuse.js
View File

@ -100,6 +100,7 @@ globalTasks.then(() => {
style: scssChain
}),
scssChain,
fsbx.RawPlugin(['.svg']),
fsbx.BabelPlugin(babelrc),
fsbx.JSONPlugin()
],