mirror of https://github.com/requarks/wiki
NGPixel
7 years ago
parent
2d5a3203db
commit
8b30d31457
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 297 KiB |
|
After Width: | Height: | Size: 658 B |
|
Before Width: | Height: | Size: 586 B After Width: | Height: | Size: 587 B |
File diff suppressed because one or more lines are too long
@ -1,4 +1,5 @@
|
|||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
require('./scss/app.scss')
|
require('./scss/app.scss')
|
||||||
|
require('./js/compatibility.js')
|
||||||
require('./js/app.js')
|
require('./js/app.js')
|
||||||
|
|||||||
@ -0,0 +1,37 @@
|
|||||||
|
// =======================================
|
||||||
|
// Intl polyfill
|
||||||
|
// =======================================
|
||||||
|
// Requirement: Safari 9 and below
|
||||||
|
|
||||||
|
if (!global.Intl) {
|
||||||
|
require('intl')
|
||||||
|
require('intl/locale-data/jsonp/en')
|
||||||
|
require('intl/locale-data/jsonp/fr')
|
||||||
|
}
|
||||||
|
|
||||||
|
// =======================================
|
||||||
|
// Promise polyfill
|
||||||
|
// =======================================
|
||||||
|
// Requirement: IE 11 and below
|
||||||
|
|
||||||
|
if (!window.Promise) {
|
||||||
|
window.Promise = require('bluebird')
|
||||||
|
}
|
||||||
|
|
||||||
|
// =======================================
|
||||||
|
// Array.from polyfill
|
||||||
|
// =======================================
|
||||||
|
// Requirement: IE 11 and below
|
||||||
|
|
||||||
|
if (!Array.from) {
|
||||||
|
require('./polyfills/array-from')
|
||||||
|
}
|
||||||
|
|
||||||
|
// =======================================
|
||||||
|
// Fetch polyfill
|
||||||
|
// =======================================
|
||||||
|
// Requirement: Safari 9 and below, IE 11 and below
|
||||||
|
|
||||||
|
if (!window.fetch) {
|
||||||
|
require('whatwg-fetch')
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
.navigator
|
||||||
|
.navigator-bar
|
||||||
|
.navigator-fab
|
||||||
|
.navigator-fab-button(@click='toggleMainMenu')
|
||||||
|
svg.icons.is-24(role='img')
|
||||||
|
title Navigation
|
||||||
|
use(xlink:href='#gg-apps-grid')
|
||||||
|
.navigator-title
|
||||||
|
h1 {{ siteTitle }}
|
||||||
|
.navigator-subtitle(:class='subtitleClass')
|
||||||
|
|
||||||
|
svg.icons.is-24(role='img', v-if='subtitleIcon')
|
||||||
|
title {{subtitleText}}
|
||||||
|
use(:xlink:href='subtitleIconClass')
|
||||||
|
h2 {{subtitleText}}
|
||||||
|
.navigator-action
|
||||||
|
.navigator-action-item
|
||||||
|
svg.icons.is-32(role='img')
|
||||||
|
title User
|
||||||
|
use(xlink:href='#nc-user-circle')
|
||||||
|
.navigator-row
|
||||||
|
.navigator-nav
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/* global CONSTANTS, graphQL, siteConfig */
|
||||||
|
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'navigator',
|
||||||
|
data() {
|
||||||
|
return { }
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState('navigator', [
|
||||||
|
'subtitleShown',
|
||||||
|
'subtitleStyle',
|
||||||
|
'subtitleText',
|
||||||
|
'subtitleIcon'
|
||||||
|
]),
|
||||||
|
siteTitle() {
|
||||||
|
return siteConfig.title
|
||||||
|
},
|
||||||
|
subtitleClass() {
|
||||||
|
return {
|
||||||
|
'is-active': this.subtitleShown,
|
||||||
|
'is-error': this.subtitleStyle === 'error',
|
||||||
|
'is-warning': this.subtitleStyle === 'warning',
|
||||||
|
'is-success': this.subtitleStyle === 'success',
|
||||||
|
'is-info': this.subtitleStyle === 'info'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
subtitleIconClass() { return '#' + this.subtitleIcon }
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleMainMenu() {
|
||||||
|
this.$store.dispatch('navigator/alert', {
|
||||||
|
style: 'success',
|
||||||
|
icon: 'nc-check-simple',
|
||||||
|
msg: 'Changes were saved successfully!'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
// Production steps of ECMA-262, Edition 6, 22.1.2.1
|
||||||
|
if (!Array.from) {
|
||||||
|
Array.from = (function () {
|
||||||
|
var toStr = Object.prototype.toString
|
||||||
|
var isCallable = function (fn) {
|
||||||
|
return typeof fn === 'function' || toStr.call(fn) === '[object Function]'
|
||||||
|
}
|
||||||
|
var toInteger = function (value) {
|
||||||
|
var number = Number(value)
|
||||||
|
if (isNaN(number)) { return 0 }
|
||||||
|
if (number === 0 || !isFinite(number)) { return number }
|
||||||
|
return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number))
|
||||||
|
}
|
||||||
|
var maxSafeInteger = Math.pow(2, 53) - 1
|
||||||
|
var toLength = function (value) {
|
||||||
|
var len = toInteger(value)
|
||||||
|
return Math.min(Math.max(len, 0), maxSafeInteger)
|
||||||
|
}
|
||||||
|
|
||||||
|
// The length property of the from method is 1.
|
||||||
|
return function from (arrayLike/*, mapFn, thisArg */) {
|
||||||
|
// 1. Let C be the this value.
|
||||||
|
var C = this
|
||||||
|
|
||||||
|
// 2. Let items be ToObject(arrayLike).
|
||||||
|
var items = Object(arrayLike)
|
||||||
|
|
||||||
|
// 3. ReturnIfAbrupt(items).
|
||||||
|
if (arrayLike == null) {
|
||||||
|
throw new TypeError('Array.from requires an array-like object - not null or undefined')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. If mapfn is undefined, then let mapping be false.
|
||||||
|
var mapFn = arguments.length > 1 ? arguments[1] : void undefined
|
||||||
|
var T
|
||||||
|
if (typeof mapFn !== 'undefined') {
|
||||||
|
// 5. else
|
||||||
|
// 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
|
||||||
|
if (!isCallable(mapFn)) {
|
||||||
|
throw new TypeError('Array.from: when provided, the second argument must be a function')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
|
||||||
|
if (arguments.length > 2) {
|
||||||
|
T = arguments[2]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 10. Let lenValue be Get(items, "length").
|
||||||
|
// 11. Let len be ToLength(lenValue).
|
||||||
|
var len = toLength(items.length)
|
||||||
|
|
||||||
|
// 13. If IsConstructor(C) is true, then
|
||||||
|
// 13. a. Let A be the result of calling the [[Construct]] internal method
|
||||||
|
// of C with an argument list containing the single item len.
|
||||||
|
// 14. a. Else, Let A be ArrayCreate(len).
|
||||||
|
var A = isCallable(C) ? Object(new C(len)) : new Array(len)
|
||||||
|
|
||||||
|
// 16. Let k be 0.
|
||||||
|
var k = 0
|
||||||
|
// 17. Repeat, while k < len… (also steps a - h)
|
||||||
|
var kValue
|
||||||
|
while (k < len) {
|
||||||
|
kValue = items[k]
|
||||||
|
if (mapFn) {
|
||||||
|
A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k)
|
||||||
|
} else {
|
||||||
|
A[k] = kValue
|
||||||
|
}
|
||||||
|
k += 1
|
||||||
|
}
|
||||||
|
// 18. Let putStatus be Put(A, "length", len, true).
|
||||||
|
A.length = len
|
||||||
|
// 20. Return A.
|
||||||
|
return A
|
||||||
|
}
|
||||||
|
}())
|
||||||
|
}
|
||||||
@ -1,32 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
|
|
||||||
import debounce from 'lodash/debounce'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
state: {
|
|
||||||
shown: false,
|
|
||||||
style: 'green',
|
|
||||||
icon: 'check',
|
|
||||||
msg: ''
|
|
||||||
},
|
|
||||||
getters: {},
|
|
||||||
mutations: {
|
|
||||||
alertChange: (state, opts) => {
|
|
||||||
state.shown = (opts.shown === true)
|
|
||||||
state.style = opts.style || 'green'
|
|
||||||
state.icon = opts.icon || 'check'
|
|
||||||
state.msg = opts.msg || ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
alert({ commit, dispatch }, opts) {
|
|
||||||
opts.shown = true
|
|
||||||
commit('alertChange', opts)
|
|
||||||
dispatch('alertDismiss')
|
|
||||||
},
|
|
||||||
alertDismiss: debounce(({ commit }) => {
|
|
||||||
let opts = { shown: false }
|
|
||||||
commit('alertChange', opts)
|
|
||||||
}, 3000)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
import debounce from 'lodash/debounce'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state: {
|
||||||
|
subtitleShown: false,
|
||||||
|
subtitleStyle: '',
|
||||||
|
subtitleIcon: false,
|
||||||
|
subtitleText: '',
|
||||||
|
subtitleStatic: 'Welcome'
|
||||||
|
},
|
||||||
|
getters: {},
|
||||||
|
mutations: {
|
||||||
|
subtitleChange (state, opts) {
|
||||||
|
state.subtitleShown = (opts.shown === true)
|
||||||
|
state.subtitleStyle = opts.style || ''
|
||||||
|
state.subtitleIcon = opts.icon || false
|
||||||
|
state.subtitleText = opts.msg || ''
|
||||||
|
},
|
||||||
|
subtitleStatic (state, text) {
|
||||||
|
state.subtitleText = text
|
||||||
|
state.subtitleStatic = text
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
alert ({ commit, dispatch }, opts) {
|
||||||
|
opts.shown = true
|
||||||
|
commit('subtitleChange', opts)
|
||||||
|
dispatch('alertDismiss')
|
||||||
|
},
|
||||||
|
alertDismiss: debounce(({ commit, state }) => {
|
||||||
|
let opts = {
|
||||||
|
shown: false,
|
||||||
|
style: state.subtitleStyle,
|
||||||
|
msg: state.subtitleStatic
|
||||||
|
}
|
||||||
|
commit('subtitleChange', opts)
|
||||||
|
}, 5000)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,133 @@
|
|||||||
|
.navigator {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: stretch;
|
||||||
|
background-color: rgba(mc('grey', '900'), .7);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-fab {
|
||||||
|
|
||||||
|
&-button {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #FFF;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all .4s ease;
|
||||||
|
|
||||||
|
svg use {
|
||||||
|
transition: all .4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
svg use {
|
||||||
|
color: mc('blue', '500');
|
||||||
|
fill: mc('blue', '500');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
background-image: linear-gradient(to bottom right, mc('blue', '500') 0%, mc('blue', '700') 50%, mc('blue', '900') 100%);
|
||||||
|
background-size: 200%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
padding: 0 1rem;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all .4s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-position-y: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #FFF;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-subtitle {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position-x: -100vw;
|
||||||
|
color: #FFF;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 1rem;
|
||||||
|
transition: background-position-x 1s ease;
|
||||||
|
|
||||||
|
&.is-error {
|
||||||
|
background-image: linear-gradient(to right, rgba(mc('red', '500'), 1), rgba(mc('red', '500'), 0));
|
||||||
|
}
|
||||||
|
&.is-warning {
|
||||||
|
background-image: linear-gradient(to right, rgba(mc('orange', '500'), 1), rgba(mc('orange', '500'), 0));
|
||||||
|
}
|
||||||
|
&.is-success {
|
||||||
|
background-image: linear-gradient(to right, rgba(mc('green', '500'), 1), rgba(mc('green', '500'), 0));
|
||||||
|
}
|
||||||
|
&.is-info {
|
||||||
|
background-image: linear-gradient(to right, rgba(mc('blue', '500'), 1), rgba(mc('blue', '500'), 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
background-position-x: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
margin-right: .5rem;
|
||||||
|
animation: flash 1s linear;
|
||||||
|
|
||||||
|
use {
|
||||||
|
color: #FFF;
|
||||||
|
fill: #FFF;
|
||||||
|
stroke: #FFF;
|
||||||
|
transition: all .4s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-action {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
svg use {
|
||||||
|
color: #FFF;
|
||||||
|
fill: #FFF;
|
||||||
|
transition: all .4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
svg use {
|
||||||
|
color: mc('blue', '500');
|
||||||
|
fill: mc('blue', '500');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,131 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
/*!
|
|
||||||
* jQuery contextMenu - Plugin for simple contextMenu handling
|
|
||||||
*
|
|
||||||
* Version: v2.2.5-dev
|
|
||||||
*
|
|
||||||
* Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
|
|
||||||
* Web: http://swisnl.github.io/jQuery-contextMenu/
|
|
||||||
*
|
|
||||||
* Copyright (c) 2011-2016 SWIS BV and contributors
|
|
||||||
*
|
|
||||||
* Licensed under
|
|
||||||
* MIT License http://www.opensource.org/licenses/mit-license
|
|
||||||
*
|
|
||||||
* Date: 2016-08-27T11:09:08.919Z
|
|
||||||
*/
|
|
||||||
|
|
||||||
.context-menu-icon {
|
|
||||||
display: list-item;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
.context-menu-icon::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
width: 2em;
|
|
||||||
font-family: FontAwesome;
|
|
||||||
font-size: 14px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: 1;
|
|
||||||
color: mc('blue', '500');
|
|
||||||
text-align: center;
|
|
||||||
-webkit-transform: translateY(-50%);
|
|
||||||
-ms-transform: translateY(-50%);
|
|
||||||
-o-transform: translateY(-50%);
|
|
||||||
transform: translateY(-50%);
|
|
||||||
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
.context-menu-icon.context-menu-hover:before {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.context-menu-icon.context-menu-disabled::before {
|
|
||||||
color: #bbb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-list {
|
|
||||||
position: absolute;
|
|
||||||
display: inline-block;
|
|
||||||
min-width: 13em;
|
|
||||||
max-width: 26em;
|
|
||||||
padding: 0 0;
|
|
||||||
margin: .3em;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 14px;
|
|
||||||
list-style-type: none;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid mc('blue', '500');
|
|
||||||
border-radius: .2em;
|
|
||||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
|
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-item {
|
|
||||||
position: relative;
|
|
||||||
padding: 7px 2em;
|
|
||||||
color: #69707a;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
background-color: #fff;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-separator {
|
|
||||||
padding: 0;
|
|
||||||
margin: .35em 0;
|
|
||||||
border-bottom: 1px solid #e6e6e6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-item.context-menu-hover {
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: mc('blue', '500');
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-item.context-menu-disabled {
|
|
||||||
color: #bbb;
|
|
||||||
cursor: default;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-input.context-menu-hover {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-submenu:after {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: .5em;
|
|
||||||
z-index: 1;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
content: '';
|
|
||||||
border-color: transparent transparent transparent #2f2f2f;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: .25em 0 .25em .25em;
|
|
||||||
-webkit-transform: translateY(-50%);
|
|
||||||
-ms-transform: translateY(-50%);
|
|
||||||
-o-transform: translateY(-50%);
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-item > .context-menu-list {
|
|
||||||
top: .3em;
|
|
||||||
/* re-positioned by js */
|
|
||||||
right: -.3em;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-item.context-menu-visible > .context-menu-list {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-accesskey {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 30 KiB |
Loading…
Reference in new issue