mirror of https://github.com/rancher/dashboard.git
KeyValue, Cluster switch/import
This commit is contained in:
Vincent Fiduccia
parent
2237bef8ef
commit
20640bcf4c
|
|
@ -6,7 +6,6 @@
|
|||
<title>logos-registered</title>
|
||||
<path class="cls-1" d="M200.21,20.64L198,7.61C197.34,3.42,195.71,0,194.41,0s-2.35,3.47-2.35,7.71v3.41a7.73,7.73,0,0,1-7.71,7.71h-3.41l-0.73,0v9.37l0.73,0h12.82a6.33,6.33,0,0,0,6.44-7.61"/>
|
||||
<path class="cls-1" d="M169.47,9.61H148.69l-0.51,0H126.83a4.71,4.71,0,0,0-.73.06v-2C126.1,3.47,125,0,123.74,0s-2.92,3.42-3.62,7.61l-2.17,13a6.33,6.33,0,0,0,6.44,7.61h12.82a11.69,11.69,0,0,0,3.65-.57,4.71,4.71,0,0,1-4.62,3.84h-18A4.71,4.71,0,0,1,113.63,26l1.82-10.92a4.71,4.71,0,0,0-4.64-5.48H21.33A4.7,4.7,0,0,0,17,12.4L0.19,38a1.17,1.17,0,0,0,.09,1.4l3.27,3.86a1.17,1.17,0,0,0,1.62.16l11.45-9V89.26A4.71,4.71,0,0,0,21.33,94h25.4a4.71,4.71,0,0,0,4.71-4.71V70.19a4.71,4.71,0,0,1,4.71-4.71h63.41a4.71,4.71,0,0,1,4.71,4.71V89.26A4.71,4.71,0,0,0,129,94h25.4a4.71,4.71,0,0,0,4.71-4.71V68.74H145.59A7.73,7.73,0,0,1,137.88,61V47.83a7.7,7.7,0,0,1,3.1-6.16V57.42a7.73,7.73,0,0,0,7.71,7.71h20.79a7.73,7.73,0,0,0,7.71-7.71V17.32a7.73,7.73,0,0,0-7.71-7.71"/>
|
||||
<path class="cls-1" d="M201.63,4.92a4.9,4.9,0,1,1,9.8,0A4.9,4.9,0,0,1,201.63,4.92Zm8.62,0A3.52,3.52,0,0,0,206.53,1a3.56,3.56,0,0,0-3.76,3.87,3.54,3.54,0,0,0,3.76,3.83A3.5,3.5,0,0,0,210.25,4.9Zm-5.34-2.44h1.72c0.88,0,1.77.25,1.77,1.49a1.26,1.26,0,0,1-1.16,1.28l1.16,2h-1.05L206.28,5.3h-0.42V7.21h-0.95V2.46Zm1.81,2.17a0.7,0.7,0,0,0,.76-0.69,0.64,0.64,0,0,0-.76-0.63h-0.86V4.62h0.86Z"/>
|
||||
<path class="cls-1" d="M216.94,13.07h28.55c13.56,0,22.7,6.57,22.7,19.31,0,10.37-7.09,16.64-14,18.8A20.57,20.57,0,0,1,259,57.75c2.88,5.85,4.83,12.32,10.89,12.32a8,8,0,0,0,2.77-.51l-1.34,12.22a33.6,33.6,0,0,1-6.88.92c-8.22,0-12.94-3.18-17.77-14.17C244.67,63.6,241.79,55,238,55h-3.9V82.4H216.94V13.07ZM234.09,25.5v17h6.16c4.93,0,10.68-1.54,10.68-8.93,0-6.06-3.9-8.12-8.63-8.12h-8.22Z"/>
|
||||
<path class="cls-1" d="M291.39,13.07h17.36L332.17,82.4H314.81L310.5,69.25H287.29L283.07,82.4h-15Zm0,43.45h14.89l-4.72-14.58A67.81,67.81,0,0,1,299.2,30h-0.41a87.92,87.92,0,0,1-2.57,11.81Z"/>
|
||||
<path class="cls-1" d="M332.88,13.07h18.39l18.18,34.41c1.54,3,3.59,8.22,5.24,12.32h0.41c-0.2-3.9-.72-9.45-0.72-13.45V13.07h14.07V82.4h-18l-18.9-34.31a96,96,0,0,1-5-11.3h-0.41c0.31,3.9.82,8.53,0.82,12.32V82.4H332.88V13.07Z"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 3.9 KiB |
|
|
@ -42,6 +42,11 @@ export default {
|
|||
default: 'ProTip: Paste lines of <code>key=value</code> or <code>key: value</code> into any key field for easy bulk entry',
|
||||
},
|
||||
|
||||
padLeft: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
||||
keyLabel: {
|
||||
type: String,
|
||||
default: 'Key',
|
||||
|
|
@ -153,6 +158,14 @@ export default {
|
|||
isView() {
|
||||
return this.mode === _VIEW;
|
||||
},
|
||||
|
||||
showAdd() {
|
||||
return this.isEditing && this.addAllowed;
|
||||
},
|
||||
|
||||
showRemove() {
|
||||
return this.isEditing && this.removeAllowed;
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
|
|
@ -163,6 +176,12 @@ export default {
|
|||
add() {
|
||||
this.rows.push({ key: '', value: '' });
|
||||
this.queueUpdate();
|
||||
|
||||
this.$nextTick(() => {
|
||||
const inputs = this.$refs.key;
|
||||
|
||||
inputs[inputs.length - 1].focus();
|
||||
});
|
||||
},
|
||||
|
||||
remove(idx) {
|
||||
|
|
@ -208,12 +227,13 @@ export default {
|
|||
<i v-if="readIcon" :class="{'icon': true, [readIcon]: true}" />
|
||||
{{ readLabel }}
|
||||
</button>
|
||||
<h2>{{ title }}</h2>
|
||||
<h2>{{ title }} <i v-tooltip="protip" class="icon icon-info text-small" /></h2>
|
||||
</div>
|
||||
|
||||
<table class="fixed">
|
||||
<table v-if="rows.length" class="fixed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-if="padLeft" class="left"></th>
|
||||
<th class="key">
|
||||
{{ keyLabel }}
|
||||
</th>
|
||||
|
|
@ -221,7 +241,7 @@ export default {
|
|||
<th class="value">
|
||||
{{ valueLabel }}
|
||||
</th>
|
||||
<th class="remove"></th>
|
||||
<th v-if="showRemove" class="remove"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -229,9 +249,10 @@ export default {
|
|||
v-for="(row, idx) in rows"
|
||||
:key="idx"
|
||||
>
|
||||
<td v-if="padLeft" class="left"></td>
|
||||
<td class="key">
|
||||
<span v-if="isView">{{ row.key }}</span>
|
||||
<input v-else v-model="row.key" @input="queueUpdate" />
|
||||
<input v-else ref="key" v-model="row.key" @input="queueUpdate" />
|
||||
</td>
|
||||
<td class="separator">
|
||||
{{ separatorLabel }}
|
||||
|
|
@ -240,8 +261,8 @@ export default {
|
|||
<span v-if="isView">{{ row.value }}</span>
|
||||
<input v-else v-model="row.value" @input="queueUpdate" />
|
||||
</td>
|
||||
<td class="remove">
|
||||
<button v-if="isEditing && removeAllowed" type="button" class="btn bg-primary" @click="remove(idx)">
|
||||
<td v-if="showRemove" class="remove">
|
||||
<button type="button" class="btn bg-primary" @click="remove(idx)">
|
||||
<i v-if="removeIcon" :class="{'icon': true, [removeIcon]: true}" />
|
||||
{{ removeLabel }}
|
||||
</button>
|
||||
|
|
@ -249,13 +270,11 @@ export default {
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="footer clearfix">
|
||||
<button v-if="addAllowed" type="button" class="btn bg-primary add" @click="add">
|
||||
<div v-if="showAdd" class="footer">
|
||||
<button type="button" class="btn bg-primary add" @click="add">
|
||||
<i v-if="addIcon" :class="{'icon': true, [addIcon]: true}" />
|
||||
{{ addLabel }}
|
||||
</button>
|
||||
<span v-if="protip" class="protip" v-html="protip" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -282,7 +301,11 @@ export default {
|
|||
|
||||
.separator {
|
||||
width: #{$separator}px;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: #{$remove}px;
|
||||
}
|
||||
|
||||
.remove {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
<script>
|
||||
import { CLUSTER } from '@/store/prefs';
|
||||
// import { CLOUD } from '@/utils/types';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
value: {
|
||||
get() {
|
||||
const value = this.$store.getters['prefs/get'](CLUSTER);
|
||||
|
||||
return value || 'local';
|
||||
},
|
||||
|
||||
set(neu) {
|
||||
this.$store.dispatch('switchClusters', neu);
|
||||
}
|
||||
},
|
||||
|
||||
clusters() {
|
||||
return [
|
||||
{ id: 'local', label: 'Local' },
|
||||
{ id: 'c1', label: 'Cluster 1' },
|
||||
{ id: 'c2', label: 'Cluster 2' },
|
||||
{ id: 'c3', label: 'Cluster 3' },
|
||||
{ id: 'c4', label: 'Cluster 4' },
|
||||
];
|
||||
|
||||
/*
|
||||
const choices = this.$store.getters['cluster/all'](CLOUD.CLUSTER);
|
||||
|
||||
return choices.map((obj) => {
|
||||
return {
|
||||
id: obj.id,
|
||||
label: obj.nameDisplay,
|
||||
};
|
||||
});
|
||||
*/
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="filter">
|
||||
<v-popover
|
||||
placement="bottom"
|
||||
offset="-10"
|
||||
trigger="click"
|
||||
:delay="{show: 0, hide: 200}"
|
||||
:popper-options="{modifiers: { flip: { enabled: false } } }"
|
||||
>
|
||||
<div class="btn cluster-dropdown bg-info">
|
||||
Cluster: Local
|
||||
</div>
|
||||
|
||||
<template slot="popover">
|
||||
<ul class="list-unstyled cluster-list dropdown" style="margin: -14px;">
|
||||
<li v-for="c of clusters" :key="c.id">
|
||||
<a href="#">{{ c.label }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="clearfix">
|
||||
<nuxt-link tag="button" :to="{name: 'clusters-import'}" class="btn bg-primary pull-right">
|
||||
<i class="icon icon-plus" /> Import
|
||||
</nuxt-link>
|
||||
<nuxt-link tag="button" :to="{name: 'clusters'}" class="btn bg-link">
|
||||
View All
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cluster-dropdown {
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
width: 230px;
|
||||
height: 40px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
|
||||
&:after {
|
||||
content: '\e908';
|
||||
right: 10px;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
font-family: 'icons';
|
||||
}
|
||||
}
|
||||
|
||||
.cluster-list {
|
||||
padding-bottom: 30px;
|
||||
width: 210px;
|
||||
|
||||
LI A {
|
||||
display: block;
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,12 +6,16 @@ import { explorerPackage, rioPackage } from '@/utils/packages';
|
|||
import { mapPref, THEME, EXPANDED_GROUPS } from '@/store/prefs';
|
||||
import ActionMenu from '@/components/ActionMenu';
|
||||
import NamespaceFilter from '@/components/nav/NamespaceFilter';
|
||||
import ClusterSwitcher from '@/components/nav/ClusterSwitcher';
|
||||
import Group from '@/components/nav/Group';
|
||||
import { COUNT } from '@/utils/types';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ActionMenu, NamespaceFilter, Group
|
||||
ClusterSwitcher,
|
||||
NamespaceFilter,
|
||||
ActionMenu,
|
||||
Group
|
||||
},
|
||||
|
||||
middleware: ['authenticated'],
|
||||
|
|
@ -106,12 +110,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<header>
|
||||
<div class="dashboard-root">
|
||||
<div class="top">
|
||||
<div class="header-left">
|
||||
<n-link to="/">
|
||||
<img src="~/assets/images/logo.svg" alt="logo" width="100%" />
|
||||
</n-link>
|
||||
<ClusterSwitcher />
|
||||
</div>
|
||||
|
||||
<div class="header-middle">
|
||||
|
|
@ -139,7 +141,7 @@ export default {
|
|||
</ul>
|
||||
</template>
|
||||
</v-popover>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<NamespaceFilter class="mt-20 mb-0" />
|
||||
|
|
@ -161,6 +163,12 @@ export default {
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="logo">
|
||||
<n-link to="/">
|
||||
<img src="~/assets/images/logo.svg" alt="logo" width="100%" />
|
||||
</n-link>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<nuxt />
|
||||
</main>
|
||||
|
|
@ -169,115 +177,96 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
$header-height: 60px;
|
||||
$nav-width: 250px;
|
||||
$right-width: 60px;
|
||||
$logo-height: 40px;
|
||||
$logo-height: 50px;
|
||||
|
||||
.dashboard {
|
||||
.dashboard-root {
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"nav main";
|
||||
"nav main"
|
||||
"logo main";
|
||||
grid-template-columns: $nav-width auto;
|
||||
grid-template-rows: $header-height auto;
|
||||
}
|
||||
grid-template-rows: $header-height auto $logo-height;
|
||||
|
||||
.theme-picker {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
.top {
|
||||
background-color: var(--header-bg);
|
||||
grid-area: header;
|
||||
display: grid;
|
||||
grid-template-areas: "header-left header-middle header-right";
|
||||
grid-template-columns: $nav-width auto $right-width;
|
||||
|
||||
.light {
|
||||
color: white !important;
|
||||
.header-left {
|
||||
grid-area: header-left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
padding: 10px 0;
|
||||
grid-area: header-middle;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
grid-area: header-right;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
NAV {
|
||||
grid-area: nav;
|
||||
position: relative;
|
||||
background-color: var(--nav-bg);
|
||||
padding: 0 10px;
|
||||
overflow-y: auto;
|
||||
|
||||
HEADER {
|
||||
background-color: var(--header-bg);
|
||||
grid-area: header;
|
||||
display: grid;
|
||||
grid-template-areas: "header-left header-middle header-right";
|
||||
grid-template-columns: $nav-width auto $right-width;
|
||||
}
|
||||
.package:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
padding: 20px 10px 0;
|
||||
grid-area: header-left;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
padding: 10px 0;
|
||||
grid-area: header-middle;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
grid-area: header-right;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collection {
|
||||
&::v-deep > .body {
|
||||
margin-left: 10px;
|
||||
border-left: solid thin var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
NAV {
|
||||
grid-area: nav;
|
||||
position: relative;
|
||||
background-color: var(--nav-bg);
|
||||
padding: 0 10px;
|
||||
overflow-y: auto;
|
||||
|
||||
.package:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
H6 {
|
||||
margin: 0;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
H6 {
|
||||
margin: 0;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: initial;
|
||||
.logo {
|
||||
grid-area: logo;
|
||||
text-align: center;
|
||||
border-top: solid thin var(--border);
|
||||
background-color: var(--nav-bg);
|
||||
padding: 0 13px;
|
||||
line-height: $logo-height;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
grid-area: logo;
|
||||
text-align: center;
|
||||
border-top: solid thin var(--border);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
MAIN {
|
||||
grid-area: main;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
MAIN HEADER {
|
||||
display: grid;
|
||||
grid-template-areas: "title actions";
|
||||
grid-template-columns: "auto min-content";
|
||||
margin-bottom: 20px;
|
||||
HEADER {
|
||||
display: grid;
|
||||
grid-template-areas: "title actions";
|
||||
grid-template-columns: "auto min-content";
|
||||
margin-bottom: 20px;
|
||||
|
||||
H1 {
|
||||
grid-area: title;
|
||||
margin: 0;
|
||||
padding-top: 4px;
|
||||
}
|
||||
H1 {
|
||||
grid-area: title;
|
||||
margin: 0;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
grid-area: actions;
|
||||
text-align: right;
|
||||
padding-top: 10px;
|
||||
.actions {
|
||||
grid-area: actions;
|
||||
text-align: right;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
<script>
|
||||
import { allHash } from '@/utils/promise';
|
||||
import { CLOUD } from '@/utils/types';
|
||||
import LabeledInput from '@/components/form/LabeledInput';
|
||||
|
||||
const RESOURCE = CLOUD.REGISTRATION_TOKEN;
|
||||
|
||||
export default {
|
||||
components: { LabeledInput },
|
||||
|
||||
data() {
|
||||
return {
|
||||
step: 1,
|
||||
name: '',
|
||||
baseUrl: 'https://api.rio.rancher.cloud',
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
name(neu, old) {
|
||||
if ( old && !neu ) {
|
||||
this.step = 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async asyncData(ctx) {
|
||||
const hash = await allHash({ tokens: ctx.store.dispatch('cluster/findAll', { type: RESOURCE }) });
|
||||
|
||||
const token = hash.tokens[0].spec.token;
|
||||
|
||||
return { token };
|
||||
},
|
||||
|
||||
methods: {
|
||||
goToStepTwo() {
|
||||
this.step = 2;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<header>
|
||||
<h1>Import Cluster</h1>
|
||||
</header>
|
||||
|
||||
<form>
|
||||
<h3 class="mb-40">
|
||||
Step 1: Give it a name
|
||||
</h3>
|
||||
<LabeledInput
|
||||
v-model="name"
|
||||
label="New Cluster Name"
|
||||
placeholder="e.g. my-prod-cluster"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<div v-if="step === 2" class="mt-40">
|
||||
<h3>Step 2: Run this command to import your cluster</h3>
|
||||
<pre
|
||||
class="p-20 m-20"
|
||||
style="background-color: #333"
|
||||
><code v-trim-whitespace>kubectl apply -f {{ baseUrl }}/import/{{ token }}?name={{ name }}</code></pre>
|
||||
|
||||
<button
|
||||
class="btn bg-primary ml-20"
|
||||
>
|
||||
<i class="icon icon-copy" /> Copy to Clipboard
|
||||
</button>
|
||||
|
||||
<h3 class="mt-40">
|
||||
Step 3: There is no step 3
|
||||
</h3>
|
||||
</pre>
|
||||
</div>
|
||||
<div v-else>
|
||||
<button type="button" class="btn btn-lg bg-primary" @click="goToStepTwo">
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
Clusters
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
/*body {
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
|
|
@ -150,4 +150,3 @@ p {
|
|||
font-size: 32px;
|
||||
}
|
||||
|
||||
*/
|
||||
|
|
@ -1,33 +1,30 @@
|
|||
if (!('boxShadow' in document.body.style)) {
|
||||
document.body.setAttribute('class', 'noBoxShadow');
|
||||
document.body.setAttribute('class', 'noBoxShadow');
|
||||
}
|
||||
|
||||
document.body.addEventListener('click', (e) => {
|
||||
const target = e.target;
|
||||
|
||||
if (
|
||||
target.tagName === 'INPUT' &&
|
||||
target.getAttribute('class').indexOf('liga') === -1
|
||||
) {
|
||||
target.select();
|
||||
}
|
||||
})
|
||||
;(function() {
|
||||
const fontSize = document.getElementById('fontSize');
|
||||
const testDrive = document.getElementById('testDrive');
|
||||
const testText = document.getElementById('testText');
|
||||
|
||||
function updateTest() {
|
||||
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
||||
if (window.icomoonLiga) {
|
||||
window.icomoonLiga(testDrive);
|
||||
document.body.addEventListener("click", function(e) {
|
||||
var target = e.target;
|
||||
if (target.tagName === "INPUT" &&
|
||||
target.getAttribute('class').indexOf('liga') === -1) {
|
||||
target.select();
|
||||
}
|
||||
}
|
||||
function updateSize() {
|
||||
testDrive.style.fontSize = `${ fontSize.value }px`;
|
||||
}
|
||||
fontSize.addEventListener('change', updateSize, false);
|
||||
testText.addEventListener('input', updateTest, false);
|
||||
testText.addEventListener('change', updateTest, false);
|
||||
updateSize();
|
||||
})();
|
||||
});
|
||||
|
||||
(function() {
|
||||
var fontSize = document.getElementById('fontSize'),
|
||||
testDrive = document.getElementById('testDrive'),
|
||||
testText = document.getElementById('testText');
|
||||
function updateTest() {
|
||||
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
||||
if (window.icomoonLiga) {
|
||||
window.icomoonLiga(testDrive);
|
||||
}
|
||||
}
|
||||
function updateSize() {
|
||||
testDrive.style.fontSize = fontSize.value + 'px';
|
||||
}
|
||||
fontSize.addEventListener('change', updateSize, false);
|
||||
testText.addEventListener('input', updateTest, false);
|
||||
testText.addEventListener('change', updateTest, false);
|
||||
updateSize();
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -0,0 +1,500 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IcoMoon Demo</title>
|
||||
<meta name="description" content="An Icon Font Generated By IcoMoon.io">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="demo-files/demo.css">
|
||||
<link rel="stylesheet" href="style.css"></head>
|
||||
<body>
|
||||
<div class="bgc1 clearfix">
|
||||
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icons <small class="fgc1">(Glyphs: 30)</small></h1>
|
||||
</div>
|
||||
<div class="clearfix mhl ptl">
|
||||
<h1 class="mvm mtn fgc1">Grid Size: 16</h1>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-minus"></span>
|
||||
<span class="mls"> icon-minus</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91d" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-plus"></span>
|
||||
<span class="mls"> icon-plus</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91e" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-circle-plus"></span>
|
||||
<span class="mls"> icon-circle-plus</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91f" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-file"></span>
|
||||
<span class="mls"> icon-file</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e900" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-folder"></span>
|
||||
<span class="mls"> icon-folder</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e901" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-list-flat"></span>
|
||||
<span class="mls"> icon-list-flat</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e902" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-list-grouped"></span>
|
||||
<span class="mls"> icon-list-grouped</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e903" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-close"></span>
|
||||
<span class="mls"> icon-close</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e904" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-x"></span>
|
||||
<span class="mls"> icon-x</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e904" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-info"></span>
|
||||
<span class="mls"> icon-info</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e905" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-chevron-right"></span>
|
||||
<span class="mls"> icon-chevron-right</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e906" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-chevron-left"></span>
|
||||
<span class="mls"> icon-chevron-left</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e907" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-chevron-down"></span>
|
||||
<span class="mls"> icon-chevron-down</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e908" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-chevron-up"></span>
|
||||
<span class="mls"> icon-chevron-up</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e909" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-spinner"></span>
|
||||
<span class="mls"> icon-spinner</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90a" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-external-link"></span>
|
||||
<span class="mls"> icon-external-link</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90b" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-download"></span>
|
||||
<span class="mls"> icon-download</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90c" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-copy"></span>
|
||||
<span class="mls"> icon-copy</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90d" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-edit"></span>
|
||||
<span class="mls"> icon-edit</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90e" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-trash"></span>
|
||||
<span class="mls"> icon-trash</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90f" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-delete"></span>
|
||||
<span class="mls"> icon-delete</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90f" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-gear"></span>
|
||||
<span class="mls"> icon-gear</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e910" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-search"></span>
|
||||
<span class="mls"> icon-search</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e911" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-actions"></span>
|
||||
<span class="mls"> icon-actions</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e912" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-vertical-ellipsis"></span>
|
||||
<span class="mls"> icon-vertical-ellipsis</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e912" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-dot-half"></span>
|
||||
<span class="mls"> icon-dot-half</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e913" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-error"></span>
|
||||
<span class="mls"> icon-error</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e914" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-dot-open"></span>
|
||||
<span class="mls"> icon-dot-open</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e915" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-dot"></span>
|
||||
<span class="mls"> icon-dot</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e916" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-user"></span>
|
||||
<span class="mls"> icon-user</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e917" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-sort-down"></span>
|
||||
<span class="mls"> icon-sort-down</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e918" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-sort-up"></span>
|
||||
<span class="mls"> icon-sort-up</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e919" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon icon-sort"></span>
|
||||
<span class="mls"> icon-sort</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91a" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--[if gt IE 8]><!-->
|
||||
<div class="mhl clearfix mbl">
|
||||
<h1>Font Test Drive</h1>
|
||||
<label>
|
||||
Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
|
||||
min="8" value="48" />
|
||||
px
|
||||
</label>
|
||||
<input id="testText" type="text" class="phl size1of1 mvl"
|
||||
placeholder="Type some text to test..." value=""/>
|
||||
<div id="testDrive" class="icon" style="font-family: icons">
|
||||
</div>
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
<div class="bgc1 clearfix">
|
||||
<p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
|
||||
</div>
|
||||
|
||||
<script src="demo-files/demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,10 +8,10 @@
|
|||
"fontFamily": "icons",
|
||||
"majorVersion": 1,
|
||||
"minorVersion": 0,
|
||||
"fontURL": "https://github.com/rancherlabs/rio-ui",
|
||||
"copyright": "2018 Rancher Labs, Inc.",
|
||||
"fontURL": "https://github.com/rancherlabs/dashboard",
|
||||
"copyright": "2019 Rancher Labs, Inc.",
|
||||
"designer": "Lauren Harden",
|
||||
"license": "Apache 2",
|
||||
"license": "Proprietary",
|
||||
"version": "Version 1.0",
|
||||
"fontId": "icons",
|
||||
"psName": "icons",
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<glyph unicode="" glyph-name="list-flat" data-tags="list-flat" d="M375.296 371.2h478.208c9.049 0 16.384-7.335 16.384-16.384v-69.632c0-9.049-7.335-16.384-16.384-16.384h-478.208c-9.049 0-16.384 7.335-16.384 16.384v69.632c0 9.049 7.335 16.384 16.384 16.384zM304.929 320c0-41.647-33.762-75.409-75.409-75.409s-75.409 33.762-75.409 75.409c0 41.647 33.762 75.409 75.409 75.409s75.409-33.762 75.409-75.409zM375.296 576h478.208c9.049 0 16.384-7.335 16.384-16.384v-69.632c0-9.049-7.335-16.384-16.384-16.384h-478.208c-9.049 0-16.384 7.335-16.384 16.384v69.632c0 9.049 7.335 16.384 16.384 16.384zM304.929 524.8c0-41.647-33.762-75.409-75.409-75.409s-75.409 33.762-75.409 75.409c0 41.647 33.762 75.409 75.409 75.409s75.409-33.762 75.409-75.409zM375.296 166.4h478.208c9.049 0 16.384-7.335 16.384-16.384v-69.632c0-9.049-7.335-16.384-16.384-16.384h-478.208c-9.049 0-16.384 7.335-16.384 16.384v69.632c0 9.049 7.335 16.384 16.384 16.384zM304.929 115.2c0-41.647-33.762-75.409-75.409-75.409s-75.409 33.762-75.409 75.409c0 41.647 33.762 75.409 75.409 75.409s75.409-33.762 75.409-75.409z" />
|
||||
<glyph unicode="" glyph-name="list-grouped" data-tags="list-grouped" d="M375.296 576h478.208c9.049 0 16.384-7.335 16.384-16.384v-69.632c0-9.049-7.335-16.384-16.384-16.384h-478.208c-9.049 0-16.384 7.335-16.384 16.384v69.632c0 9.049 7.335 16.384 16.384 16.384zM304.929 524.8c0-41.647-33.762-75.409-75.409-75.409s-75.409 33.762-75.409 75.409c0 41.647 33.762 75.409 75.409 75.409s75.409-33.762 75.409-75.409zM528.896 371.2h324.608c9.049 0 16.384-7.335 16.384-16.384v-69.632c0-9.049-7.335-16.384-16.384-16.384h-324.608c-9.049 0-16.384 7.335-16.384 16.384v69.632c0 9.049 7.335 16.384 16.384 16.384zM458.529 320c0-41.647-33.762-75.409-75.409-75.409s-75.409 33.762-75.409 75.409c0 41.647 33.762 75.409 75.409 75.409s75.409-33.762 75.409-75.409zM528.896 166.4h324.608c9.049 0 16.384-7.335 16.384-16.384v-69.632c0-9.049-7.335-16.384-16.384-16.384h-324.608c-9.049 0-16.384 7.335-16.384 16.384v69.632c0 9.049 7.335 16.384 16.384 16.384zM458.529 115.2c0-41.647-33.762-75.409-75.409-75.409s-75.409 33.762-75.409 75.409c0 41.647 33.762 75.409 75.409 75.409s75.409-33.762 75.409-75.409z" />
|
||||
<glyph unicode="" glyph-name="close, x" data-tags="close" d="M569.927 320l159.296 159.296c7.413 7.412 11.998 17.653 11.998 28.964 0 22.622-18.339 40.961-40.961 40.961-11.311 0-21.551-4.584-28.963-11.997l-159.297-159.297-159.297 159.297c-7.412 7.412-17.652 11.997-28.963 11.997-22.622 0-40.961-18.339-40.961-40.961 0-11.311 4.585-21.552 11.998-28.964l159.296-159.296-159.296-159.296c-7.413-7.412-11.998-17.653-11.998-28.964 0-22.622 18.339-40.961 40.961-40.961 11.311 0 21.551 4.584 28.963 11.997l159.297 159.297 159.297-159.297c7.412-7.412 17.652-11.997 28.963-11.997 22.622 0 40.961 18.339 40.961 40.961 0 11.311-4.585 21.552-11.998 28.964v0z" />
|
||||
<glyph unicode="" d="M921.6 320c0-226.216-183.384-409.6-409.6-409.6s-409.6 183.384-409.6 409.6c0 226.216 183.384 409.6 409.6 409.6s409.6-183.384 409.6-409.6z" />
|
||||
<glyph unicode="" glyph-name="info" data-tags="info" d="M512 780.8c254.492 0 460.8-206.308 460.8-460.8 0-127.246-51.576-242.448-134.966-325.836v0c-83.388-83.388-198.588-134.966-325.834-134.966-254.492 0-460.8 206.308-460.8 460.8 0 127.246 51.576 242.446 134.966 325.834v0c82.93 83.37 197.732 134.968 324.584 134.968 0.44 0 0.88 0 1.318-0.002h-0.068zM512 832c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM641.854 45.504h-259.706c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h259.706c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM512 45.504c-14.138 0-25.6 11.462-25.6 25.6v0 267.202h-85.082c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h110.68c14.138 0 25.6-11.462 25.6-25.6v0-292.802c0-14.138-11.462-25.6-25.6-25.6v0zM563.2 517.694c0-28.276-22.924-51.2-51.2-51.2s-51.2 22.924-51.2 51.2c0 28.276 22.924 51.2 51.2 51.2s51.2-22.924 51.2-51.2z" />
|
||||
<glyph unicode="" glyph-name="chevron-right" data-tags="chevron-right" d="M403.389 61.816c-0.001 0-0.001 0-0.002 0-22.622 0-40.96 18.338-40.96 40.96 0 11.311 4.585 21.552 11.998 28.964l188.262 188.26-188.262 188.26c-7.413 7.413-11.997 17.653-11.997 28.964 0 22.622 18.339 40.961 40.961 40.961 11.311 0 21.551-4.585 28.964-11.997l217.224-217.224c7.412-7.413 11.997-17.653 11.997-28.964s-4.585-21.551-11.997-28.964l-217.224-217.224c-7.394-7.411-17.618-11.996-28.913-11.996-0.018 0-0.036 0-0.053 0h0.003z" />
|
||||
<glyph unicode="" glyph-name="chevron-left" data-tags="chevron-left" d="M620.612 61.816c-0.015 0-0.033 0-0.051 0-11.295 0-21.519 4.585-28.913 11.995l-217.225 217.225c-7.412 7.413-11.997 17.653-11.997 28.964s4.585 21.551 11.997 28.964l217.224 217.224c7.413 7.413 17.653 11.997 28.964 11.997 22.622 0 40.961-18.339 40.961-40.961 0-11.311-4.585-21.551-11.997-28.964l-188.262-188.26 188.262-188.26c7.413-7.412 11.998-17.653 11.998-28.964 0-22.622-18.338-40.96-40.96-40.96-0.001 0-0.001 0-0.002 0v0z" />
|
||||
<glyph unicode="" glyph-name="chevron-down" data-tags="chevron-down" d="M512 170.428c-11.311 0-21.55 4.584-28.963 11.996l-217.223 217.224c-7.413 7.412-11.998 17.653-11.998 28.964 0 22.622 18.339 40.961 40.961 40.961 11.311 0 21.551-4.584 28.963-11.997l188.26-188.262 188.26 188.262c7.412 7.412 17.652 11.997 28.963 11.997 22.622 0 40.961-18.339 40.961-40.961 0-11.311-4.585-21.552-11.998-28.964l-217.223-217.224c-7.413-7.412-17.652-11.996-28.963-11.996v0z" />
|
||||
|
|
@ -54,8 +54,6 @@
|
|||
<glyph unicode="" glyph-name="sort-down" data-tags="sort-down" d="M512-89.6c-0.016 0-0.035 0-0.054 0-11.293 0-21.516 4.585-28.907 11.996l-229.817 229.816c-7.412 7.412-11.997 17.652-11.997 28.963 0 22.621 18.338 40.959 40.959 40.959 11.31 0 21.55-4.584 28.962-11.996l200.854-200.852 200.854 200.852c7.412 7.412 17.652 11.996 28.962 11.996 22.621 0 40.959-18.338 40.959-40.959 0-11.311-4.585-21.551-11.997-28.963l-229.816-229.815c-7.392-7.412-17.615-11.997-28.908-11.997-0.019 0-0.038 0-0.057 0h0.003z" />
|
||||
<glyph unicode="" glyph-name="sort-up" data-tags="sort-up" d="M741.816 417.865c-0.016 0-0.035 0-0.053 0-11.294 0-21.517 4.585-28.909 11.996l-200.854 200.853-200.853-200.852c-7.41-7.401-17.642-11.977-28.944-11.977-22.622 0-40.96 18.338-40.96 40.96 0 11.301 4.577 21.533 11.978 28.944v0l229.816 229.815c7.412 7.412 17.652 11.997 28.963 11.997s21.551-4.585 28.963-11.997l229.816-229.815c7.412-7.412 11.997-17.652 11.997-28.963 0-22.622-18.338-40.96-40.96-40.96v0z" />
|
||||
<glyph unicode="" glyph-name="sort" data-tags="sort" d="M511.991-89.6c-0.016 0-0.035 0-0.053 0-11.294 0-21.517 4.585-28.909 11.996l-229.817 229.816c-7.401 7.41-11.977 17.642-11.977 28.944 0 22.622 18.338 40.96 40.96 40.96 11.301 0 21.533-4.577 28.944-11.978v0l200.853-200.852 200.853 200.852c7.41 7.401 17.642 11.977 28.944 11.977 22.622 0 40.96-18.338 40.96-40.96 0-11.301-4.577-21.533-11.978-28.944v0l-229.816-229.815c-7.393-7.412-17.616-11.997-28.91-11.997-0.019 0-0.037 0-0.056 0h0.003zM741.807 417.865c-0.016 0-0.035 0-0.053 0-11.294 0-21.517 4.585-28.909 11.996l-200.854 200.853-200.853-200.852c-7.41-7.401-17.642-11.977-28.944-11.977-22.622 0-40.96 18.338-40.96 40.96 0 11.301 4.577 21.533 11.978 28.944v0l229.816 229.815c7.412 7.412 17.652 11.997 28.963 11.997s21.551-4.585 28.963-11.997l229.816-229.815c7.412-7.412 11.997-17.652 11.997-28.963 0-22.622-18.338-40.96-40.96-40.96v0z" />
|
||||
<glyph unicode="" d="M634.88 145.92h-81.92v235.52c0 0 0 0 0 0.001 0 22.621-18.338 40.959-40.959 40.959 0 0 0 0-0.001 0h-122.88c-22.622 0-40.96-18.338-40.96-40.96s18.338-40.96 40.96-40.96v0h81.92v-194.56h-81.92c-22.622 0-40.96-18.338-40.96-40.96s18.338-40.96 40.96-40.96v0h245.76c22.622 0 40.96 18.338 40.96 40.96s-18.338 40.96-40.96 40.96v0z" />
|
||||
<glyph unicode="" d="M573.44 545.28c0-33.932-27.508-61.44-61.44-61.44s-61.44 27.508-61.44 61.44c0 33.932 27.508 61.44 61.44 61.44s61.44-27.508 61.44-61.44z" />
|
||||
<glyph unicode="" glyph-name="minus" data-tags="minus" d="M778.24 279.039h-532.48c-22.622 0-40.96 18.338-40.96 40.96s18.338 40.96 40.96 40.96v0h532.48c22.622 0 40.96-18.338 40.96-40.96s-18.338-40.96-40.96-40.96v0z" />
|
||||
<glyph unicode="" glyph-name="plus" data-tags="plus" d="M778.24 360.959h-225.28v225.28c0 22.622-18.338 40.96-40.96 40.96s-40.96-18.338-40.96-40.96v0-225.28h-225.28c-22.622 0-40.96-18.338-40.96-40.96s18.338-40.96 40.96-40.96v0h225.28v-225.28c0-22.622 18.338-40.96 40.96-40.96s40.96 18.338 40.96 40.96v0 225.28h225.28c22.622 0 40.96 18.338 40.96 40.96s-18.338 40.96-40.96 40.96v0z" />
|
||||
<glyph unicode="" glyph-name="circle-plus" data-tags="circle-plus" d="M512 729.6c-226.216 0-409.6-183.384-409.6-409.6s183.384-409.6 409.6-409.6 409.6 183.384 409.6 409.6c0 226.216-183.384 409.6-409.6 409.6zM675.84 279.039h-122.88v-122.88c0-22.622-18.338-40.96-40.96-40.96s-40.96 18.338-40.96 40.96v0 122.88h-122.88c-22.622 0-40.96 18.338-40.96 40.96s18.338 40.96 40.96 40.96v0h122.88v122.88c0 22.622 18.338 40.96 40.96 40.96s40.96-18.338 40.96-40.96v0-122.88h122.88c22.622 0 40.96-18.338 40.96-40.96s-18.338-40.96-40.96-40.96v0z" />
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +1,12 @@
|
|||
@font-face {
|
||||
font-family: 'icons';
|
||||
src:
|
||||
url('fonts/icons.ttf?kpnfba') format('truetype'),
|
||||
url('fonts/icons.woff?kpnfba') format('woff'),
|
||||
url('fonts/icons.svg?kpnfba#icons') format('svg');
|
||||
url('fonts/icons.ttf?et2mic') format('truetype'),
|
||||
url('fonts/icons.woff?et2mic') format('woff'),
|
||||
url('fonts/icons.svg?et2mic#icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -50,19 +51,8 @@
|
|||
.icon-x:before {
|
||||
content: "\e904";
|
||||
}
|
||||
.icon-info .path1:before {
|
||||
.icon-info:before {
|
||||
content: "\e905";
|
||||
color: rgb(35, 31, 32);
|
||||
}
|
||||
.icon-info .path2:before {
|
||||
content: "\e91b";
|
||||
margin-left: -1em;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.icon-info .path3:before {
|
||||
content: "\e91c";
|
||||
margin-left: -1em;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.icon-chevron-right:before {
|
||||
content: "\e906";
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@
|
|||
@font-face {
|
||||
font-family: '#{$icomoon-font-family}';
|
||||
src:
|
||||
url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?kpnfba') format('truetype'),
|
||||
url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?kpnfba') format('woff'),
|
||||
url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?kpnfba##{$icomoon-font-family}') format('svg');
|
||||
url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?et2mic') format('truetype'),
|
||||
url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?et2mic') format('woff'),
|
||||
url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?et2mic##{$icomoon-font-family}') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -70,24 +71,9 @@
|
|||
content: $icon-x;
|
||||
}
|
||||
}
|
||||
.icon-info .path1 {
|
||||
.icon-info {
|
||||
&:before {
|
||||
content: $icon-info-path1;
|
||||
color: rgb(35, 31, 32);
|
||||
}
|
||||
}
|
||||
.icon-info .path2 {
|
||||
&:before {
|
||||
content: $icon-info-path2;
|
||||
margin-left: -1em;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
.icon-info .path3 {
|
||||
&:before {
|
||||
content: $icon-info-path3;
|
||||
margin-left: -1em;
|
||||
color: rgb(255, 255, 255);
|
||||
content: $icon-info;
|
||||
}
|
||||
}
|
||||
.icon-chevron-right {
|
||||
|
|
|
|||
|
|
@ -10,9 +10,7 @@ $icon-list-flat: "\e902";
|
|||
$icon-list-grouped: "\e903";
|
||||
$icon-close: "\e904";
|
||||
$icon-x: "\e904";
|
||||
$icon-info-path1: "\e905";
|
||||
$icon-info-path2: "\e91b";
|
||||
$icon-info-path3: "\e91c";
|
||||
$icon-info: "\e905";
|
||||
$icon-chevron-right: "\e906";
|
||||
$icon-chevron-left: "\e907";
|
||||
$icon-chevron-down: "\e908";
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import Norman from '@/plugins/norman';
|
||||
import { COUNT, NAMESPACE } from '@/utils/types';
|
||||
import { NAMESPACES } from '@/store/prefs';
|
||||
import { CLUSTER as CLUSTER_PREF, NAMESPACES } from '@/store/prefs';
|
||||
|
||||
export const plugins = [
|
||||
Norman({ namespace: 'cluster', baseUrl: '/v1' }),
|
||||
// Norman({ namespace: 'cloud', baseUrl: '/v1' }),
|
||||
Norman({ namespace: 'cluster', baseUrl: '/v1' }), // @TODO cluster-specific URL
|
||||
Norman({ namespace: 'rancher', baseUrl: '/v3' })
|
||||
];
|
||||
|
||||
|
|
@ -35,6 +36,10 @@ export const mutations = {
|
|||
|
||||
updateNamespaces(state, neu) {
|
||||
state.namespaces = neu;
|
||||
},
|
||||
|
||||
updateCluster(state, neu) {
|
||||
state.cluster = neu;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -70,6 +75,11 @@ export const actions = {
|
|||
commit('updateNamespaces', val);
|
||||
},
|
||||
|
||||
switchClusters({ commit }, val) {
|
||||
commit('prefs/set', { key: CLUSTER_PREF, val });
|
||||
commit('updateCluster', val);
|
||||
},
|
||||
|
||||
nuxtClientInit(ctx) {
|
||||
/*
|
||||
const state = ctx.state;
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ export const mapPref = function(name) {
|
|||
// --------------------
|
||||
const parseJSON = true; // Shortcut for setting it below
|
||||
|
||||
export const CLUSTER = create('cluster', 'local'); // @TODO remember last cluster, handle if missing, combine with namespacess
|
||||
export const NAMESPACES = create('ns', [], { parseJSON });
|
||||
export const EXPANDED_GROUPS = create('open_groups', ['rio'], { parseJSON });
|
||||
export const GROUP_RESOURCES = create('group_by', 'namespace');
|
||||
|
|
|
|||
|
|
@ -6,6 +6,11 @@ export const NAMESPACE = 'core.v1.namespace';
|
|||
export const CONFIG_MAP = 'core.v1.configmap';
|
||||
export const SECRET = 'core.v1.secret';
|
||||
|
||||
export const CLOUD = {
|
||||
CLUSTER: 'cloud.rio.rancher.io.v1.cluster',
|
||||
REGISTRATION_TOKEN: 'cloud.rio.rancher.io.v1.registrationtoken',
|
||||
};
|
||||
|
||||
export const RIO = {
|
||||
CLUSTER_DOMAIN: 'admin.rio.cattle.io.v1.clusterdomain',
|
||||
FEATURE: 'admin.rio.cattle.io.v1.feature',
|
||||
|
|
@ -20,7 +25,6 @@ export const RIO = {
|
|||
};
|
||||
|
||||
export const RANCHER = {
|
||||
CLUSTER: 'cluster',
|
||||
PRINCIPAL: 'principal',
|
||||
USER: 'user',
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue