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'
|
||||
|
||||
require('./scss/app.scss')
|
||||
require('./js/compatibility.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