menus, better routes, dev tools, styling
This commit is contained in:
STEINNI
@@ -1,101 +1,65 @@
|
||||
[
|
||||
{
|
||||
"label": "Bypass",
|
||||
"label": "Live Arena",
|
||||
"icon": "icon-bolt",
|
||||
"collapsed": true,
|
||||
"collapsed": false,
|
||||
"access": ["*"],
|
||||
"items": [
|
||||
{
|
||||
"label": "Monitoring",
|
||||
"icon": "icon-dashboard",
|
||||
"route": "/bypass",
|
||||
"access": [ "BP_PO", "BP_HoU" ]
|
||||
"label": "Space view",
|
||||
"icon": "icon-website",
|
||||
"route": "/live/spaceViewer",
|
||||
"access": ["*"]
|
||||
},
|
||||
{
|
||||
"label": "EIC Fast Track",
|
||||
"icon": "icon-dashboard",
|
||||
"route": "/bypass/fast-tracks",
|
||||
"access": [ "BP_SPOC_FastTrack" ]
|
||||
"label": "Spacetime explorer",
|
||||
"icon": "icon-hour-glass",
|
||||
"route": "/live/stats",
|
||||
"access": ["*"]
|
||||
},
|
||||
{
|
||||
"label": "EIC Plug In",
|
||||
"icon": "icon-dashboard",
|
||||
"route": "/bypass/plugins",
|
||||
"access": [ "BP_SPOC_Plugin" ]
|
||||
"label": "Agent processes",
|
||||
"icon": "icon-cogs",
|
||||
"route": "/live/dashboards/agents",
|
||||
"access": ["*"]
|
||||
},
|
||||
{
|
||||
"label": "Guidelines",
|
||||
"icon": "icon-help",
|
||||
"route": "/bypass/guidelines",
|
||||
"access": [ "BP_PO", "BP_HoU","BP_SPOC_Plugin","BP_SPOC_FastTrack" ]
|
||||
"label": "System",
|
||||
"icon": "icon-dashboard",
|
||||
"route": "/live/dashboards/system",
|
||||
"access": ["*"]
|
||||
},
|
||||
{
|
||||
"label": "Statistics",
|
||||
"icon": "icon-stats",
|
||||
"route": "/live/stats",
|
||||
"access": ["*"]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "My EIC",
|
||||
"icon": "icon-home",
|
||||
"label": "Arenas recorder",
|
||||
"icon": "icon-history",
|
||||
"collapsed": true,
|
||||
"access": ["*"],
|
||||
"items": [
|
||||
{
|
||||
"label": "Overview",
|
||||
"icon": "icon-dashboard",
|
||||
"route": "/applicant",
|
||||
"access": [ "Org_Member" ]
|
||||
}
|
||||
]
|
||||
"label": "Space view",
|
||||
"icon": "icon-website",
|
||||
"route": "/records/spaceViewer",
|
||||
"access": ["*"]
|
||||
},
|
||||
{
|
||||
"label": "ICMP",
|
||||
"icon": "icon-company",
|
||||
"items": [
|
||||
{
|
||||
"label": "Monitoring",
|
||||
"icon": "icon-dashboard",
|
||||
"route": "/icmp",
|
||||
"access": [ "PROJECT_PO", "PROJECT_FIO" ]
|
||||
"label": "Statistics",
|
||||
"icon": "icon-stats",
|
||||
"route": "/records/stats",
|
||||
"access": ["*"]
|
||||
},
|
||||
{
|
||||
"label": "Dashboard",
|
||||
"icon": "icon-dashboard",
|
||||
"route": "/icmp",
|
||||
"access": [ "PROJECT_TechDDExpert" ]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "SoE",
|
||||
"icon": "icon-star-full",
|
||||
"collapsed": true,
|
||||
"items": [
|
||||
{
|
||||
"label": "Overview",
|
||||
"icon": "icon-dashboard",
|
||||
"route": "/soe",
|
||||
"access": [ "EIC_dev", "EIC_Admin", "SOE_National", "SOE_Admin" ]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "Coachings",
|
||||
"icon": "icon-coaching",
|
||||
"collapsed": true,
|
||||
"items": [
|
||||
{
|
||||
"label": "Admin dashboard",
|
||||
"icon": "icon-dashboard",
|
||||
"route": "/coachings/admin",
|
||||
"access": [ "EIC_Dev", "EIC_Admin" ]
|
||||
},
|
||||
{
|
||||
"label": "Coach dashboard",
|
||||
"icon": "icon-dashboard",
|
||||
"route": "/coachings/coach",
|
||||
"access": [ "EIC_Dev", "EIC_Admin" ]
|
||||
},
|
||||
{
|
||||
"label": "Applicant coaching",
|
||||
"icon": "icon-coaching",
|
||||
"route": "/coachings/coaching/1234",
|
||||
"access": [ "EIC_Dev", "EIC_Admin" ]
|
||||
"label": "Keyframe editor",
|
||||
"icon": "icon-edit",
|
||||
"route": "/records/editor",
|
||||
"access": ["*"]
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -103,73 +67,25 @@
|
||||
"label": "Dev tools",
|
||||
"icon": "icon-cogs",
|
||||
"collapsed": true,
|
||||
"access": ["admin"],
|
||||
"items": [
|
||||
{
|
||||
"label": "System Health Check",
|
||||
"label": "Client Health Check",
|
||||
"icon": "icon-health",
|
||||
"route": "/system/healthcheck",
|
||||
"access": [ "EIC_Dev" ]
|
||||
"access": [ "admin" ]
|
||||
},
|
||||
{
|
||||
"label": "App Style Guide",
|
||||
"icon": "icon-image",
|
||||
"route": "/system/styleguide",
|
||||
"access": [ "EIC_Dev" ]
|
||||
"access": [ "admin" ]
|
||||
},
|
||||
{
|
||||
"label": "EICUI Components",
|
||||
"icon": "icon-cogs",
|
||||
"route": "/system/eicui",
|
||||
"access": [ "EIC_Dev" ]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "Communication",
|
||||
"icon": "icon-share",
|
||||
"items": [
|
||||
{
|
||||
"label": "Platform Control",
|
||||
"icon": "icon-logoff",
|
||||
"route": "/system/control",
|
||||
"access": [ "EIC_Dev" ]
|
||||
},
|
||||
{
|
||||
"label": "Mailings",
|
||||
"icon": "icon-envelope",
|
||||
"route": "/mailings",
|
||||
"access": [ "MAIL_Editor", "MAIL_Reviewer", "MAIL_Sender", "EIC_Dev", "EIC_Admin" ]
|
||||
},
|
||||
{
|
||||
"label": "Templates",
|
||||
"icon": "icon-edit",
|
||||
"route": "/templates",
|
||||
"access": [ "TEMPLATE_Editor", "TEMPLATE_Reviewer", "EIC_Dev", "EIC_Admin" ]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "Fun stuffs",
|
||||
"icon": "icon-face-smile",
|
||||
"collapsed": true,
|
||||
"items": [
|
||||
{
|
||||
"label": "CarmeloMatic 3000",
|
||||
"icon": "icon-coaching",
|
||||
"route": "/system/sampler",
|
||||
"access": [ "EIC_Dev" ]
|
||||
},
|
||||
{
|
||||
"label": "Magic Chalkboard",
|
||||
"icon": "icon-edit",
|
||||
"route": "/system/chalkboard",
|
||||
"access": [ "EIC_Dev" ]
|
||||
},
|
||||
{
|
||||
"label": "Data explorer",
|
||||
"icon": "icon-servers",
|
||||
"route": "/system/explorer",
|
||||
"access": [ "EIC_Dev" ]
|
||||
"access": [ "admin" ]
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -177,17 +93,18 @@
|
||||
"label": "About",
|
||||
"icon": "icon-info",
|
||||
"collapsed": true,
|
||||
"access": ["*"],
|
||||
"items": [
|
||||
{
|
||||
"label": "Legal notice",
|
||||
"icon": "icon-info",
|
||||
"route": "/about/legalnotice",
|
||||
"label": "Help center",
|
||||
"icon": "icon-help",
|
||||
"route": "/about/help",
|
||||
"access": [ "*" ]
|
||||
},
|
||||
{
|
||||
"label": "Support",
|
||||
"icon": "icon-help",
|
||||
"route": "/about/support",
|
||||
"label": "About",
|
||||
"icon": "icon-info",
|
||||
"route": "/about/about",
|
||||
"access": [ "*" ]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
"position.y": "coords.z"
|
||||
},
|
||||
"tween": true,
|
||||
"tweenDelay": 1000
|
||||
"tweenDelay": 200
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -238,7 +238,10 @@ body[eicapp] {
|
||||
}
|
||||
[eicapp] .app-content-thesaurus [eicchip] label { cursor: pointer; }
|
||||
|
||||
|
||||
[eicapp] article[eiccard] {
|
||||
background-color: #1d261d;
|
||||
color:#EEE;
|
||||
}
|
||||
[eicapp] [eicdialog][device="tablet"] > [eiccard] {
|
||||
max-height: 95vh;
|
||||
max-width: 95vw;
|
||||
@@ -310,3 +313,17 @@ div.window > section:first-of-type > article[eiccard]:first-of-type{
|
||||
div.window header .controls menu[data-output="settingsMenu"]{
|
||||
background: var(--app-color-secondary)
|
||||
}
|
||||
|
||||
menu[eicmenu] [menuitem] .nolink label {
|
||||
color: #CFC;
|
||||
}
|
||||
menu[eicmenu] [menuitem] a label {
|
||||
color: #4E4;
|
||||
}
|
||||
menu[eicmenu] [menuitem] i[class^="icon-"] {
|
||||
color:white;
|
||||
}
|
||||
/*
|
||||
[eicdropdown] > menu{
|
||||
|
||||
}*/
|
||||
@@ -12,18 +12,18 @@
|
||||
"method": "_401"
|
||||
},
|
||||
{
|
||||
"url": "/dashboard",
|
||||
"role": [ "admin" ],
|
||||
"controller" : "/dashboard/DashboardsController"
|
||||
"url": "/live",
|
||||
"role": [ "*" ],
|
||||
"controller" : "/live/DashboardsController"
|
||||
},
|
||||
{
|
||||
"url": "/",
|
||||
"role": "admin",
|
||||
"exturl": "/dashboard"
|
||||
"url": "/system",
|
||||
"role": "*",
|
||||
"controller" : "/system/systemController"
|
||||
},
|
||||
{
|
||||
"url": "/",
|
||||
"role": [ "*" ],
|
||||
"exturl": "/dashboard"
|
||||
"exturl": "/live"
|
||||
}
|
||||
]
|
||||
+1
-1
@@ -11,7 +11,7 @@ class DashboardsController extends EICController {
|
||||
*
|
||||
* @returns
|
||||
*/
|
||||
index() {
|
||||
spaceViewer() {
|
||||
const models = {
|
||||
}
|
||||
|
||||
+8
-3
@@ -2,9 +2,14 @@
|
||||
"routes": [
|
||||
{
|
||||
"url": "/",
|
||||
"role": [ "admin" ],
|
||||
"controller" : "/dashboard/DashboardsController",
|
||||
"method": "index"
|
||||
"role": [ "*" ],
|
||||
"exturl": "/live/spaceviewer"
|
||||
},
|
||||
{
|
||||
"url": "/spaceviewer",
|
||||
"role": [ "*" ],
|
||||
"controller" : "/live/DashboardsController",
|
||||
"method": "spaceViewer"
|
||||
}
|
||||
],
|
||||
"models": [
|
||||
Executable
+107
@@ -0,0 +1,107 @@
|
||||
class systemController extends EICController {
|
||||
|
||||
/**
|
||||
* Platform access control
|
||||
*
|
||||
* @param {*} params
|
||||
*/
|
||||
control() {
|
||||
app.meta.add('user-roles', app.Assets.Store.json['user-roles']);
|
||||
app.meta.add('user-messages', app.Assets.Store.json['user-messages']);
|
||||
let models = {
|
||||
platform: new PlatformModel()
|
||||
}
|
||||
|
||||
this.loadWindow(
|
||||
'system/admin/platform-control/AdminAccessControlView',
|
||||
{ title: 'Platform Control', static: true, expanded: true },
|
||||
{ models: models }
|
||||
);
|
||||
}
|
||||
|
||||
explore() {
|
||||
|
||||
|
||||
app.User.getBusinessPermissions([ '/storage/entities' ], 'EIC_Admin')
|
||||
.then(payload => {
|
||||
|
||||
console.log(payload)
|
||||
|
||||
let models = {
|
||||
ml: new MarklogicModel(payload['/storage/entities'].permissions)
|
||||
}
|
||||
|
||||
this.loadWindow(
|
||||
'system/admin/explorer/DataExplorerView',
|
||||
{ title: 'Data explorer', static: true, expanded: true },
|
||||
{ models: models }
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* System Health check content
|
||||
*
|
||||
* @param {*} params
|
||||
*/
|
||||
healthcheck() {
|
||||
|
||||
this.loadWindow('system/tools/statusView', {
|
||||
title: 'Health Check',
|
||||
static: true,
|
||||
expanded: true
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
async styleguide() {
|
||||
|
||||
await Loader.loadViews(["system/tools/styleguideView"]);
|
||||
|
||||
this.loadWindow('system/tools/styleguideView', {
|
||||
title: 'Style guide',
|
||||
static: true,
|
||||
expanded: true
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
async eicui() {
|
||||
|
||||
await Loader.loadViews(["system/tools/EICUIView"]);
|
||||
|
||||
this.loadWindow(
|
||||
'system/tools/EICUIView',
|
||||
{ title: 'EICUI', static: true, expanded: true}
|
||||
);
|
||||
}
|
||||
|
||||
sampler(params) {
|
||||
this.loadWindow(
|
||||
'system/lab/SamplerView',
|
||||
{ title: 'SAMPLER3000', static: true, expanded: true }
|
||||
);
|
||||
}
|
||||
|
||||
chalkboard(params) {
|
||||
this.loadWindow(
|
||||
'system/lab/ChalkboardView',
|
||||
{ title: 'Chalkboard', static: true, expanded: true }
|
||||
);
|
||||
}
|
||||
|
||||
components(params) {
|
||||
this.loadWindow('system/lab/ComponentLabView', {
|
||||
title: 'Component Lab',
|
||||
static: true,
|
||||
expanded: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
app.registerClass('systemController', systemController);
|
||||
Executable
+48
@@ -0,0 +1,48 @@
|
||||
{
|
||||
"routes": [
|
||||
{
|
||||
"url": "/healthcheck",
|
||||
"role": "*",
|
||||
"controller" : "/system/systemController",
|
||||
"method": "healthcheck"
|
||||
},
|
||||
{
|
||||
"url": "/styleguide",
|
||||
"role": "*",
|
||||
"controller" : "/system/systemController",
|
||||
"method": "styleguide"
|
||||
},
|
||||
{
|
||||
"url": "/eicui",
|
||||
"role": "*",
|
||||
"controller" : "/system/systemController",
|
||||
"method": "eicui"
|
||||
}
|
||||
],
|
||||
"models": [
|
||||
],
|
||||
"views": [
|
||||
"system/tools/statusView",
|
||||
"system/tools/dialogs/codeTemplateDialog"
|
||||
],
|
||||
"controllerDependencies": [
|
||||
"/thirdparty/eicui/plugins/FileUpload/FileUpload",
|
||||
"/thirdparty/eicui/plugins/Charts/Charts",
|
||||
"/thirdparty/beautify/beautify.min",
|
||||
"/thirdparty/beautify/beautify.html.min",
|
||||
"/thirdparty/beautify/beautify.css.min",
|
||||
"/thirdparty/highlight/highlight.min",
|
||||
"/helpers/basicDialogs"
|
||||
],
|
||||
"assets": {
|
||||
"styles": [
|
||||
{ "name":"FileUpload.css", "path":"/app/thirdparty/eicui/plugins/FileUpload/" },
|
||||
{ "name":"Charts.css", "path":"/app/thirdparty/eicui/plugins/Charts/" },
|
||||
{ "name":"monokai.min.css", "path":"/app/thirdparty/highlight/styles/" }
|
||||
],
|
||||
"json": [
|
||||
{ "id": "user-roles", "name": "global/user-roles.json" },
|
||||
{ "id": "user-messages", "name": "system/user-messages.json" }
|
||||
]
|
||||
}
|
||||
}
|
||||
+1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
Vendored
+5
-5
@@ -842,12 +842,12 @@ label[secondary],p[secondary],b[secondary],span[secondary] { color: var(--eicui-
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
[eicapp] table tbody tr:nth-of-type(odd) { background-color: var(--eicui-base-color-white); }
|
||||
[eicapp] table tbody tr:nth-of-type(odd) { background-color: var(--eicui-base-color-grey-75); }
|
||||
[eicapp] table tr > td { padding: var(--eicui-base-spacing-2xs) var(--eicui-base-spacing-s); }
|
||||
|
||||
[eicapp] table tbody tr:nth-of-type(2n),
|
||||
[eicapp] table tbody tr:nth-of-type(odd):hover {
|
||||
background-color: var(--eicui-base-color-grey-5);
|
||||
background-color: var(--eicui-base-color-grey-100);
|
||||
}
|
||||
|
||||
[eicapp] blockquote {
|
||||
@@ -2649,11 +2649,11 @@ menu[eicmenu][collapsed]:not(:hover) [menuitem] > a > label {
|
||||
}
|
||||
[eicdatagrid] .dataset .row {
|
||||
cursor:pointer;
|
||||
background-color: var(--eicui-base-color-white);
|
||||
background-color: var(--eicui-base-color-grey-75);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
[eicdatagrid] .dataset .row:nth-child(odd) {
|
||||
background-color: var(--eicui-base-color-grey-10);
|
||||
background-color: var(--eicui-base-color-grey-100);
|
||||
}
|
||||
[eicdatagrid] .dataset .row[accent] {
|
||||
border-left: 3px solid var(--app-color-accent);
|
||||
@@ -2726,7 +2726,7 @@ menu[eicmenu][collapsed]:not(:hover) [menuitem] > a > label {
|
||||
}
|
||||
[eicdatagrid] footer {
|
||||
border: 1px solid var(--eicui-base-color-grey-10);
|
||||
background: var(--eicui-base-color-grey-5);
|
||||
background: var(--eicui-base-color-grey-90);
|
||||
position: relative !important;
|
||||
min-height: 30px;
|
||||
border-top: 1px solid var(--eicui-base-color-grey-35) !important;
|
||||
|
||||
+5
-2
@@ -1,8 +1,8 @@
|
||||
[eicbarchart] {
|
||||
position: relative;
|
||||
}
|
||||
[eicbarchart] svg .title text {
|
||||
stroke: var(--card-font-color);
|
||||
[eicbarchart] svg text {
|
||||
stroke: var(--eicui-base-color-grey-25);
|
||||
}
|
||||
[eicbarchart] svg .plot rect {
|
||||
fill: var(--eicui-base-color-grey-10);
|
||||
@@ -32,6 +32,9 @@
|
||||
transition: all 0.5s;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
[eiclinechart] svg text {
|
||||
stroke: var(--eicui-base-color-grey-25);
|
||||
}
|
||||
[eiclinechart] svg .plot[primary] path {
|
||||
stroke: var(--eicui-base-color-primary-100);
|
||||
}
|
||||
|
||||
+446
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
|
||||
/*!
|
||||
Theme: Default
|
||||
Description: Original highlight.js style
|
||||
Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
|
||||
Maintainer: @highlightjs/core-team
|
||||
Website: https://highlightjs.org/
|
||||
License: see project LICENSE
|
||||
Touched: 2021
|
||||
*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
|
||||
@@ -0,0 +1 @@
|
||||
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#272822;color:#ddd}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-selector-tag,.hljs-strong,.hljs-tag{color:#f92672}.hljs-code{color:#66d9ef}.hljs-attribute,.hljs-link,.hljs-regexp,.hljs-symbol{color:#bf79db}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-emphasis,.hljs-section,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-string,.hljs-subst,.hljs-template-tag,.hljs-template-variable,.hljs-title,.hljs-type,.hljs-variable{color:#a6e22e}.hljs-class .hljs-title,.hljs-title.class_{color:#fff}.hljs-comment,.hljs-deletion,.hljs-meta,.hljs-quote{color:#75715e}.hljs-doctag,.hljs-keyword,.hljs-literal,.hljs-section,.hljs-selector-id,.hljs-selector-tag,.hljs-title,.hljs-type{font-weight:700}
|
||||
@@ -0,0 +1,658 @@
|
||||
<style type="text/css">
|
||||
.eicui-components > header {
|
||||
background: url('/app/assets/images/cards/eicui-banner.jpg');
|
||||
}
|
||||
.eicui-components button.show-code{
|
||||
width: min-content;
|
||||
float: right;
|
||||
}
|
||||
[eicdialog]>article { margin: auto; }
|
||||
|
||||
.eicui-components code {
|
||||
white-space: pre-wrap
|
||||
}
|
||||
</style>
|
||||
<article eiccard media class="eicui-components">
|
||||
<header>
|
||||
<h1>EICUI Components</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<p>
|
||||
The EICUI component library is a complete portage of the EUI component library.
|
||||
Despite the fact that it sticks to the design and behaviour of the original components, there are some major technical differences:
|
||||
</p>
|
||||
<ul bulleted>
|
||||
<li>The library is written in vanilla JS. So, it can virtually be embedded in any environment or framework, not limited only to AngularJS</li>
|
||||
<li>The library code is much lighter than the original EUI (about 15 times lighter)</li>
|
||||
<li>Components can be declared either through tags (for basic components) or by code (class instanciation)</li>
|
||||
<li>Some misleading or useless components options have been discarded.</li>
|
||||
<li>The icon library has been reduced and aligned to the EIC interface needs.</li>
|
||||
</ul>
|
||||
<h4>Main principles</h4>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Basic components</h3>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Alert messages</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="alertsexample"></button>
|
||||
<br>
|
||||
<h6>Default</h6>
|
||||
<div class="alertsexample" data-codetitle="Alert messages" eicalert>Sample text</div>
|
||||
<h6>Closable</h6>
|
||||
<div class="alertsexample" data-codetitle="Alert messages (closable)" eicalert closable>Sample text</div>
|
||||
<h6>Severities</h6>
|
||||
<div class="alertsexample" data-codetitle="Alert messages (info)" eicalert info>"info" message (default)</div>
|
||||
<div class="alertsexample" data-codetitle="Alert messages (success)" eicalert success>"success" message</div>
|
||||
<div class="alertsexample" data-codetitle="Alert messages (secondary)" eicalert secondary>"secondary" message</div>
|
||||
<div class="alertsexample" data-codetitle="Alert messages (warning)" eicalert warning>"warning" message</div>
|
||||
<div class="alertsexample" data-codetitle="Alert messages (danger)" eicalert danger>"danger" message</div>
|
||||
<h6>Muted</h6>
|
||||
<div class="alertsexample" data-codetitle="Alert messages (info - muted)" eicalert info muted>"info" message (default)</div>
|
||||
<div class="alertsexample" data-codetitle="Alert messages (success - muted)" eicalert success muted>"success" message</div>
|
||||
<div class="alertsexample" data-codetitle="Alert messages (secondary - muted)" eicalert secondary muted>"secondary" message</div>
|
||||
<div class="alertsexample" data-codetitle="Alert messages (warning - muted)" eicalert warning muted>"warning" message</div>
|
||||
<div class="alertsexample" data-codetitle="Alert messages (danger - muted)" eicalert danger muted>"danger" message</div>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Badges</h1>
|
||||
<h2>
|
||||
<span eicchip xsmall info><label>severity</label></span>
|
||||
<span eicchip xsmall info><label>size</label></span>
|
||||
</h2>
|
||||
</header>
|
||||
<section>
|
||||
<h6>Default usage</h6>
|
||||
<p>Use one of the available icon-* class to display the desired icon :</p>
|
||||
<span eicbadge>9</span>
|
||||
<span eicbadge>hello</span>
|
||||
<h6>Color variants</h6>
|
||||
<p>Using one of the attribute option : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
|
||||
<pre> <span <strong>eicbadge</strong>>value</span> </pre>
|
||||
<span eicbadge primary>9</span>
|
||||
<span eicbadge secondary>9</span>
|
||||
<span eicbadge info>9</span>
|
||||
<span eicbadge success>9</span>
|
||||
<span eicbadge warning>9</span>
|
||||
<span eicbadge danger>9</span>
|
||||
<span eicbadge accent>9</span>
|
||||
<h6>Sizing</h6>
|
||||
<span eicbadge xxsmall>9</span>
|
||||
<span eicbadge xsmall>9</span>
|
||||
<span eicbadge small>9</span>
|
||||
<span eicbadge medium>9</span>
|
||||
<span eicbadge large>9</span>
|
||||
<span eicbadge xlarge>9</span>
|
||||
<span eicbadge xxlarge>9</span>
|
||||
<span eicbadge xxxlarge>9</span>
|
||||
<span eicbadge xxxxlarge>9</span>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Buttons</h1>
|
||||
<h2>
|
||||
<span eicchip xsmall info><label>severity</label></span>
|
||||
<span eicchip xsmall info><label>size</label></span>
|
||||
<span eicchip xsmall info><label>badge</label></span>
|
||||
</h2>
|
||||
</header>
|
||||
<section>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="buttons"></button>
|
||||
|
||||
<h6>Default button</h6>
|
||||
<button eicbutton class="buttons" data-codetitle="button">Base button</button>
|
||||
<h6>Color semantics</h6>
|
||||
<p>Using one of the attribute option : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
|
||||
<button eicbutton class="buttons" data-codetitle="button">Base button</button>
|
||||
<button eicbutton primary class="buttons" data-codetitle="button">Primary button</button>
|
||||
<button eicbutton secondary class="buttons" data-codetitle="button">Secondary button</button>
|
||||
<button eicbutton info class="buttons" data-codetitle="button">Info button</button>
|
||||
<button eicbutton success class="buttons" data-codetitle="button">Success button</button>
|
||||
<button eicbutton warning class="buttons" data-codetitle="button">Warning button</button>
|
||||
<button eicbutton danger class="buttons" data-codetitle="button">Dangerous button</button>
|
||||
<button eicbutton accent class="buttons" data-codetitle="button">Accent button</button>
|
||||
<h6>Rounded buttons</h6>
|
||||
<p>Using the attribute option : <code>rounded</code></p>
|
||||
<button eicbutton rounded class="buttons" data-codetitle="button">Base button</button>
|
||||
<button eicbutton rounded primary class="buttons" data-codetitle="button">Primary button</button>
|
||||
<button eicbutton rounded secondary class="buttons" data-codetitle="button">Secondary button</button>
|
||||
<button eicbutton rounded danger class="buttons" data-codetitle="button">Dangerous button</button>
|
||||
<button eicbutton rounded warning class="buttons" data-codetitle="button">Dangerous button</button>
|
||||
<button eicbutton rounded info class="buttons" data-codetitle="button">Dangerous button</button>
|
||||
<h6>Disabled buttons</h6>
|
||||
<p>Disable a button by adding a <code>disabled</code> attribute </p>
|
||||
<button eicbutton disabled class="buttons" data-codetitle="button">Base button</button>
|
||||
<button eicbutton disabled small danger rounded class="buttons" data-codetitle="button">Base button</button>
|
||||
<button eicbutton disabled rounded large class="buttons" data-codetitle="button">Base button</button>
|
||||
<h6>Sizes</h6>
|
||||
<p>Adapt specific sizes by using the attribute option : <code>small</code> | <code>large</code></p>
|
||||
<button eicbutton xsmall class="buttons" data-codetitle="button">XSmall button</button>
|
||||
<button eicbutton small class="buttons" data-codetitle="button">Small button</button>
|
||||
<button eicbutton class="buttons" data-codetitle="button">Medium (default) button</button>
|
||||
<button eicbutton large class="buttons" data-codetitle="button">Large button</button>
|
||||
<h6>With badge</h6>
|
||||
<p>Add abadge using attribute : <code>badge="value"</code></p>
|
||||
<button eicbutton badge="99" class="buttons" data-codetitle="button">Badged button</button>
|
||||
<button eicbutton badge="!" class="buttons" data-codetitle="button">Badged button</button>
|
||||
<h6>Loader state</h6>
|
||||
<p>Set button under a loading state using attribute : <code>loading="true"</code></p>
|
||||
<p>Please note that buttons under loading state are also automaticaly disabled</p>
|
||||
<button eicbutton loading="true" primary class="buttons" data-codetitle="button">I'm waiting for something</button>
|
||||
<button eicbutton loading="true" primary icon="icon-search" class="buttons" data-codetitle="button"></button>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>CHiPs (tadataladaaaa)</h1>
|
||||
<h2>
|
||||
<span eicchip xsmall info><label>severity</label></span>
|
||||
<span eicchip xsmall info><label>size</label></span>
|
||||
</h2>
|
||||
</header>
|
||||
<section>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="chips"></button>
|
||||
<h6>Default</h6>
|
||||
<div class="chips" data-codetitle="CHiPs basic patrol">
|
||||
<span eicchip><label>I'm Poncherello</label></span>
|
||||
<span eicchip><label>I'm Baker (the other guy)</label></span>
|
||||
</div>
|
||||
<h6>Color semantics</h6>
|
||||
<p>Using one of the attribute option : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
|
||||
<div class="chips" data-codetitle="CHiPs patrol with colors">
|
||||
<span eicchip primary><label>Primary</label></span>
|
||||
<span eicchip secondary><label>Secondary</label></span>
|
||||
<span eicchip info><label>Info</label></span>
|
||||
<span eicchip warning><label>Warning</label></span>
|
||||
<span eicchip danger><label>Danger</label></span>
|
||||
<span eicchip success><label>Success</label></span>
|
||||
<span eicchip accent><label>Accent</label></span>
|
||||
</div>
|
||||
<h6>Destroyable</h6>
|
||||
<p>Using the attribute option : <code>destroyable</code></p>
|
||||
<div class="chips" data-codetitle="CHiPs destroy patrol (only for bad guys of course)">
|
||||
<span eicchip destroyable><label>Zombie</label></span>
|
||||
<span eicchip destroyable><label>Mosquito</label></span>
|
||||
</div>
|
||||
<h6>With icon</h6>
|
||||
<p>Using the attribute option : <code>icon="..."</code>. See available icons in the styleguide</p>
|
||||
<div class="chips" data-codetitle="CHiPs patrol with icon">
|
||||
<span eicchip danger icon="icon-user"><label>Zombie</label></span>
|
||||
<span eicchip warning destroyable icon="icon-warning"><label>Mosquito</label></span>
|
||||
</div>
|
||||
<h6>Sizes</h6>
|
||||
<div class="chips" data-codetitle="CHiPs patrol where size matters">
|
||||
<span eicchip xxsmall><label>xxsmall</label></span>
|
||||
<span eicchip xsmall><label>xsmall</label></span>
|
||||
<span eicchip small><label>small</label></span>
|
||||
<span eicchip><label>medium (default)</label></span>
|
||||
<span eicchip large><label>large</label></span>
|
||||
<span eicchip xlarge><label>xlarge</label></span>
|
||||
<span eicchip xxlarge><label>xxlarge</label></span>
|
||||
</div>
|
||||
<h6>Sizes with icons</h6>
|
||||
<div class="chips" data-codetitle="CHiPs patrol with sizes and icons">
|
||||
<span eicchip xxsmall icon="icon-user" destroyable><label>xxsmall</label></span>
|
||||
<span eicchip xsmall icon="icon-user" destroyable><label>xsmall</label></span>
|
||||
<span eicchip small icon="icon-user" destroyable><label>small</label></span>
|
||||
<span eicchip icon="icon-user" destroyable><label>medium (default)</label></span>
|
||||
<span eicchip large icon="icon-user" destroyable><label>large chip</label></span>
|
||||
<span eicchip xlarge icon="icon-user" destroyable><label>xlarge chip</label></span>
|
||||
<span eicchip xxlarge icon="icon-user" destroyable><label>xxlarge chip</label></span>
|
||||
</div>
|
||||
<h6>Outline variant</h6>
|
||||
<p>Using the attribute option : <code>outline</code></p>
|
||||
<div class="chips" data-codetitle="CHiPs patrol with attribute options">
|
||||
<span eicchip outline primary><label>Primary</label></span>
|
||||
<span eicchip outline secondary><label>Secondary</label></span>
|
||||
<span eicchip outline info><label>Info</label></span>
|
||||
<span eicchip outline warning><label>Warning</label></span>
|
||||
<span eicchip outline danger><label>Danger</label></span>
|
||||
<span eicchip outline success><label>Success</label></span>
|
||||
<span eicchip outline accent><label>Accent</label></span>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Drop-down Menus</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<p>to be described</p>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Growler</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="growlerexample"></button>
|
||||
<br>
|
||||
<button eicbutton info class="growl-test growlerexample" data-codetitle="info growler" data-message="Roarr!" data-severity="info">Click me</button>
|
||||
<button eicbutton warning class="growl-test growlerexample" data-codetitle="warning growler" data-message="You've been warned" data-severity="warning">Click me for a warning</button>
|
||||
<button eicbutton danger class="growl-test growlerexample" data-codetitle="danger growler" data-message="Something went wrong" data-severity="danger">Click me for something bad</button>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Icons</h1>
|
||||
<h2>
|
||||
<span eicchip xsmall info><label>severity</label></span>
|
||||
<span eicchip xsmall outline><label>size</label></span>
|
||||
</h2>
|
||||
</header>
|
||||
<section>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="icons"></button>
|
||||
<h6>Default usage</h6>
|
||||
<p>Use one of the available icon-* class to display the desired icon :</p>
|
||||
<h6>Color variants</h6>
|
||||
<p>Using one of the attribute option : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
|
||||
<pre> <span class="<strong>icon-coaching</strong>"></span> </pre>
|
||||
<span class="icon-coaching icons" primary></span>
|
||||
<span class="icon-coaching icons" secondary></span>
|
||||
<span class="icon-coaching icons" success></span>
|
||||
<span class="icon-coaching icons" warning></span>
|
||||
<span class="icon-coaching icons"danger></span>
|
||||
<span class="icon-coaching icons" accent></span>
|
||||
<span class="icon-coaching icons" info></span>
|
||||
<h6>Sizing</h6>
|
||||
<span class="icon-coaching icons" xxsmall></span>
|
||||
<span class="icon-coaching icons" xsmall></span>
|
||||
<span class="icon-coaching icons" small></span>
|
||||
<span class="icon-coaching icons" medium></span>
|
||||
<span class="icon-coaching icons" large></span>
|
||||
<span class="icon-coaching icons" xlarge></span>
|
||||
<span class="icon-coaching icons" xxlarge></span>
|
||||
<span class="icon-coaching icons" xxxlarge></span>
|
||||
<span class="icon-coaching icons" xxxxlarge></span>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Menus</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<p>to be described</p>
|
||||
</section>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Container components</h3>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Cards</h1>
|
||||
<h2>
|
||||
<span eicchip xsmall info><label>severity</label></span>
|
||||
<span eicchip xsmall info><label>badge</label></span>
|
||||
</h2>
|
||||
</header>
|
||||
<section>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="cards"></button>
|
||||
<p>The card component is used to group various pieces of content into a container which can be used throughout your website.</p>
|
||||
<h6>Default</h6>
|
||||
<p>Basically a card component is a DOM structure using this blueprint:</p>
|
||||
<article eiccard class="cards" data-codetitle="Default card"><section>Some content</section></article>
|
||||
<h6>Severities</h6>
|
||||
<p>cards support standard severity attributes : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
|
||||
<article eiccard primary class="cards" data-codetitle="Primary card"><section>Some primary content</section></article>
|
||||
<article eiccard secondary class="cards" data-codetitle="Secondary card"><section>Some secondary content</section></article>
|
||||
<article eiccard danger class="cards" data-codetitle="Danger card"><section>Some dangerous content</section></article>
|
||||
<article eiccard warning class="cards" data-codetitle="Warning card"><section>Some warning content</section></article>
|
||||
<article eiccard info class="cards" data-codetitle="Info card"><section>Some info content</section></article>
|
||||
<article eiccard success class="cards" data-codetitle="Success card"><section>Some success content</section></article>
|
||||
<article eiccard accent class="cards" data-codetitle="Accent card"><section>Some accent content</section></article>
|
||||
<h6>Header and footer</h6>
|
||||
<article eiccard primary class="cards" data-codetitle="Header and footer card">
|
||||
<header>
|
||||
<h1>This is title</h1>
|
||||
<h2>This is subtitle</h2>
|
||||
</header>
|
||||
<section>Some primary content</section>
|
||||
<footer>this is footer</footer>
|
||||
</article>
|
||||
<p>Each part of this structure is optional, meaning you only keep from the strucure what is actually use. Just remove the unnecessary parts.</p>
|
||||
<h6>Collapsable content</h6>
|
||||
<p>You may choose to allow your card content to be collapsed (hidden) at user will. Simply add a <code>collapsable</code> attribute to your card (the main article tag).</p>
|
||||
<article eiccard danger collapsable class="cards" data-codetitle="Collapsable card">
|
||||
<header>
|
||||
<h1>I'm expanded</h1>
|
||||
<h2>...but not for long</h2>
|
||||
</header>
|
||||
<section>Some dangerous content</section>
|
||||
</article>
|
||||
<p>To control the initial state of the card, by deault the card will appear expand. If you want it to appear collapsed, add a <code>collapsed</code> attribute to the card too.</p>
|
||||
<article eiccard success collapsable collapsed class="cards" data-codetitle="Collapsed card">
|
||||
<header>
|
||||
<h1>Uncollapse me</h1>
|
||||
</header>
|
||||
<section>Some dangerous content withoutt subtitle</section>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Dialogs</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<p>to be described</p>
|
||||
<h6>Basic usage</h6>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="dialogexample"></button>
|
||||
<button eicbutton info small class="dialog-test dialogexample" data-codetitle="Opening a dialog">open a dialog</button>
|
||||
<h6>Using view content</h6>
|
||||
<p>to be described</p>
|
||||
<h6>Custom actions</h6>
|
||||
<p>to be described</p>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Tabs</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<p>to be described</p>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="tabdefault"></button>
|
||||
<h6>Default</h6>
|
||||
<div class="tabdefault" data-codetitle="Tabs default">
|
||||
<menu eictab class="sample1" xxlarge>
|
||||
<li>Tab 1</li>
|
||||
<li>Tab 2</li>
|
||||
<li>Tab 3</li>
|
||||
</menu>
|
||||
<article eiccard class="tab-content sample1" xxlarge danger>
|
||||
<header>
|
||||
<h1>Tab 1 insight</h1>
|
||||
<h2>This is the 1st tab</h2>
|
||||
</header>
|
||||
<section>Tab 1 content</section>
|
||||
</article>
|
||||
<article eiccard class="tab-content sample1" xxlarge warning>
|
||||
<section>Tab 2 content</section>
|
||||
</article>
|
||||
<article eiccard class="tab-content sample1" xxlarge success>
|
||||
<section>Tab 3 content</section>
|
||||
</article>
|
||||
</div>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="tabvertical"></button>
|
||||
<h6>Vertical</h6>
|
||||
<div class="tabvertical" data-codetitle="Tabs vertical">
|
||||
<div class="cols-2 left">
|
||||
<menu eictab vertical class="sample2" xsmall>
|
||||
<li>Tab 1</li>
|
||||
<li>Tab 2</li>
|
||||
<li>Tab 3</li>
|
||||
</menu>
|
||||
<article eiccard class="tab-content sample2">
|
||||
<header>
|
||||
<h1>Tab 1 insight</h1>
|
||||
<h2>This is the 1st tab</h2>
|
||||
</header>
|
||||
<section>Tab 1 content</section>
|
||||
</article>
|
||||
<article eiccard class="tab-content sample2">
|
||||
<section>Tab 2 content</section>
|
||||
</article>
|
||||
<article eiccard class="tab-content sample2">
|
||||
<section>Tab 3 content</section>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Form components</h3>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Inputs</h1>
|
||||
<h2>
|
||||
<span eicchip xsmall info><label>severity</label></span>
|
||||
<span eicchip xsmall danger><label>badge</label></span>
|
||||
<span eicchip xsmall info><label>form</label></span>
|
||||
</h2>
|
||||
</header>
|
||||
<section>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="inputs"></button>
|
||||
<h6>Default</h6>
|
||||
<input eicinput value="This is some text..." class="inputs" data-codetitle="Input default"/>
|
||||
<label>Secondary (default)</label>
|
||||
<input eicinput secondary value="This is some text..." class="inputs" data-codetitle="Input secondary (default)"/>
|
||||
<label>Primary</label>
|
||||
<input eicinput primary value="This is some text..." class="inputs" data-codetitle="Input primary"/>
|
||||
<label>Danger / invalid</label>
|
||||
<input eicinput danger value="This is some text..." class="inputs" data-codetitle="Input danger/invalid"/>
|
||||
<label>Success</label>
|
||||
<input eicinput success value="This is some text..." class="inputs" data-codetitle="Input success"/>
|
||||
<label>Warning</label>
|
||||
<input eicinput warning value="This is some text..." class="inputs" data-codetitle="Input warning"/>
|
||||
<label>Info</label>
|
||||
<input eicinput info value="This is some text..." class="inputs" data-codetitle="Input info"/>
|
||||
<label>Accent</label>
|
||||
<input eicinput accent value="This is some non editable text..." class="inputs" data-codetitle="Input accent"/>
|
||||
<h6>Search input</h6>
|
||||
<input eicinput type="search" value="" class="inputs" data-codetitle="Query string Input"/>
|
||||
<h6>Number input</h6>
|
||||
<input eicinput type="number" value="" class="inputs" data-codetitle="Input for number"/>
|
||||
<h6>Date input</h6>
|
||||
<input eicinput type="date" value="" class="inputs" data-codetitle="Input for date"/>
|
||||
<h6>Date and time input</h6>
|
||||
<input eicinput type="datetime" value="" class="inputs" data-codetitle="Input for date & time"/>
|
||||
<h6>Accent</h6>
|
||||
<input eicinput accent value="This is some non editable text..." class="inputs" data-codetitle="Input accent"/>
|
||||
<h6>Multiple</h6>
|
||||
<p>(DEPRECATED)</p>
|
||||
<p>see Select[editable] for a replacer</p>
|
||||
<h6>Toggler</h6>
|
||||
<div class="cols-4">
|
||||
<input eicinput type="toggler" small data-path="toggy1" trueValue="wai" falseValue="queneni" labelright="Light" class="inputs" data-codetitle="Input toggler"/>
|
||||
<input eicinput type="toggler" medium warning data-path="toggy2" trueValue="wai" falseValue="queneni" labelleft="Dishwasher" class="inputs" data-codetitle="Input toggler"/>
|
||||
<input eicinput type="toggler" large danger data-path="toggy3" trueValue="wai" falseValue="queneni" labelright="Toaster" value="wai" class="inputs" data-codetitle="Input toggler"/>
|
||||
<input eicinput type="toggler" xlarge primary size="large" data-path="toggy4" trueValue="hifi" falseValue="tv" labelleft="TV" labelright="Hifi" class="inputs" data-codetitle="Input toggler"/>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Textareas</h1>
|
||||
<h2>
|
||||
<span eicchip xsmall info><label>severity</label></span>
|
||||
<span eicchip xsmall info><label>badge</label></span>
|
||||
<span eicchip xsmall info><label>form</label></span>
|
||||
</h2>
|
||||
</header>
|
||||
<section>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="textareas"></button>
|
||||
<h6>Default</h6>
|
||||
<textarea eictextarea class="textareas" data-codetitle="Textarea default">This is some text...</textarea>
|
||||
<h6>Hint</h6>
|
||||
<p>Using the attribute option : <code>hint="..."</code></p>
|
||||
<textarea eictextarea hint="Please don't be gross." class="textareas" data-codetitle="Textarea with hint">This is some text...</textarea>
|
||||
<h6>With badge</h6>
|
||||
<p>You may check for size limitation, either by character length, word amount or byte length (according to the current text encoding)</p>
|
||||
<p>Characters limit: add attribute <code>maxlen="..."</code></p>
|
||||
<textarea eictextarea maxlen="200" hint="No more than 200 chars" placeholder="What's on your mind..." class="textareas" data-codetitle="Textarea with maxlen"></textarea>
|
||||
<p>Words limit: add attribute <code>maxwords="..."</code></p>
|
||||
<textarea eictextarea maxwords="20" hint="No more than 20 words" placeholder="What's on your mind..."class="textareas" data-codetitle="Textarea with maxwords"></textarea>
|
||||
<p>Bytes limit: add attribute <code>maxbytes="..."</code></p>
|
||||
<textarea eictextarea maxbytes="2048" hint="No more than 2048 bytes" placeholder="What's on your mind..." class="textareas" data-codetitle="Textarea with maxbytes"></textarea>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Selects</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<p>to be described</p>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="selects"></button>
|
||||
<h6>Default</h6>
|
||||
<select eicselect class="selects" data-codetitle="Select default">
|
||||
<option></option>
|
||||
<option value="Pizza">Pizza</option>
|
||||
<option value="Burger">Burger</option>
|
||||
<option value="Kebab">Kebab</option>
|
||||
</select>
|
||||
<h6>Multi-selection</h6>
|
||||
<select eicselect multi class="selects" data-codetitle="Select with multi-selection">
|
||||
<option></option>
|
||||
<option value="Pizza">Pizza</option>
|
||||
<option value="Burger">Burger</option>
|
||||
<option value="Kebab">Kebab</option>
|
||||
</select>
|
||||
<h6>With lookup</h6>
|
||||
<select eicselect multi lookup class="selects" data-codetitle="Select with lookup">
|
||||
<option></option>
|
||||
<option value="Pizza">Pizza</option>
|
||||
<option value="Burger">Burger</option>
|
||||
<option value="Kebab">Kebab</option>
|
||||
</select>
|
||||
|
||||
<h6>Multi-level selection</h6>
|
||||
<select eicselect multi lookup class="selects" data-codetitle="Select with multi-level selection">
|
||||
<option></option>
|
||||
<option value="Pizzas" data-ref="pizza">Pizza</option>
|
||||
<option value="Burger" data-ref="burger">Burger</option>
|
||||
<option value="Kebab" data-ref="Kebab">Kebab</option>
|
||||
<optgroup data-parent="burger" >
|
||||
<option value="simple">Simple</option>
|
||||
<option value="bacon">Bacon</option>
|
||||
</optgroup>
|
||||
<optgroup data-parent="pizza" >
|
||||
<option value="margarita">Margarita</option>
|
||||
<option value="4cheese">4 Cheese</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<div eicalert warning>
|
||||
KNOWN BUG:
|
||||
When selection popup is opened and user interacts with anoter element of the page wich leads to the removal of the select component from the DOM (i.e. closing a dialog containing the Select component),
|
||||
the selection popup will stay opened. any interaction (click) outside the selection popup will hide it.</div>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Checkboxes</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<p>to be described</p>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Forms</h1>
|
||||
<h2>
|
||||
<span eicchip xsmall info><label>form</label></span>
|
||||
</h2>
|
||||
</header>
|
||||
<section>
|
||||
<p>
|
||||
The Form component, only availbale as an instanciable class is not a visual component. Associated with a DOM element, the Form will identify all inputs, textareas and selects defined in this DOM element and provide helper methods to manage this set of fields.
|
||||
Each field detected will be analyzed to identify:
|
||||
</p>
|
||||
<ul bulleted>
|
||||
<li>validation rules</li>
|
||||
<li>name and path described in the field. allowing exports to JSON format</li>
|
||||
</ul>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="forms"></button>
|
||||
<h6>Simple form</h6>
|
||||
<form class="forms" data-codetitle="Simple form">
|
||||
<textarea eictextarea>This is some text...</textarea>
|
||||
</form>
|
||||
<h6>Form validation</h6>
|
||||
<p>to be descibed</p>
|
||||
<h6>JSON export</h6>
|
||||
<p>to be descibed</p>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
<section>
|
||||
<h2>Advanced components</h2>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>DataGrid</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="gridexample"></button>
|
||||
<div eicdatagrid class="gridexample" data-codetitle="DataGrid"></div>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>WorkflowMap</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<div eicflowmap></div>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>BarChart</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="barchart"></button>
|
||||
<div eicbarchart></div>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable >
|
||||
<header>
|
||||
<h1>LineChart</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<div class="">
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="linechart"></button>
|
||||
<div eiclinechart></div>
|
||||
<div>
|
||||
<span eicchip success small>Sidney</span>
|
||||
<span eicchip primary small>New York</span>
|
||||
<span eicchip danger small>Notre-Dame-de-Livoye</span>
|
||||
</div>
|
||||
<div eicalert info>
|
||||
<p>Note: Due to the fact that this component uses paths and path coordinates cannot be declared as relative (using percentage for instance), if you need a fluid resizing of the component, you need to call the redraw() method when resizing your container (typically using the DOMContentResized() method of your view).<br/>
|
||||
example:</p>
|
||||
<code>
|
||||
class myview extends DOMContent {
|
||||
|
||||
...
|
||||
|
||||
DOMContentResized() {
|
||||
super.DOMContentResized();
|
||||
this.mylinechart.redraw();
|
||||
}
|
||||
}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>FileUpload</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="fileuploadexample"></button>
|
||||
<h4>Normal server:</h4>
|
||||
<div eicfileupload class="filupld fileuploadexample" data-codetitle="Upload to normal server"></div>
|
||||
<h4>AWS infra (getting signed URL):</h4>
|
||||
<div eicfileupload class="filupld2 fileuploadexample" data-codetitle="Upload to AWS S3 bucket"></div>
|
||||
</section>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
@@ -0,0 +1,174 @@
|
||||
class EICUIView extends EICDomContent {
|
||||
|
||||
DOMContentLoaded() {
|
||||
|
||||
/* tabdefault : show_code_start */
|
||||
let tab = new Tab();
|
||||
tab.addTabs(this.findAll('MENU[eictab].sample1 li'), this.findAll('.tab-content.sample1'));
|
||||
tab.disableByIndex(1);
|
||||
/* tabdefault : show_code_end */
|
||||
|
||||
/* tabvertical : show_code_start */
|
||||
tab = new Tab();
|
||||
tab.addTabs(this.findAll('MENU[eictab].sample2 li'), this.findAll('.tab-content.sample2'));
|
||||
tab.disableByIndex(2);
|
||||
/* tabvertical : show_code_end */
|
||||
|
||||
/* growlerexample : show_code_start */
|
||||
let growlButtons = this.findAll('button.growl-test');
|
||||
for(let i = 0; i < growlButtons.length; i++) {
|
||||
let button = growlButtons[i];
|
||||
|
||||
button.addEventListener('click', function(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
let button = event.currentTarget;
|
||||
ui.growl.append(button.dataset.message, button.dataset.severity);
|
||||
});
|
||||
}
|
||||
/* growlerexample : show_code_end */
|
||||
|
||||
/* dialogexample : show_code_start */
|
||||
let dialogButton = this.find('button.dialog-test');
|
||||
|
||||
dialogButton.addEventListener('click', function(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
this.openDialog(('Do you see this dialog?'))
|
||||
.then(function(result) {
|
||||
if(result)
|
||||
ui.growl.append('You approved the dialog', 'success');
|
||||
else
|
||||
ui.growl.append('You dismissed the dialog', 'warning');
|
||||
})
|
||||
|
||||
.catch(function() {
|
||||
ui.growl.append('You canceled the dialog', 'warning');
|
||||
})
|
||||
/**/
|
||||
}.bind(this));
|
||||
/* dialogexample : show_code_end */
|
||||
|
||||
let components = ui.eicfy(this.el);
|
||||
let togglers = components.filter(el => el.el.getAttribute('type')=='toggler')
|
||||
for(let toggy of togglers) toggy.onToggle = (val, obj) => console.log('toggler:',val, obj)
|
||||
|
||||
let grid = new DataGrid(this.find('[eicdatagrid]'), {
|
||||
headers: [
|
||||
{label: 'name', filter: 'text', sortable:true},
|
||||
{label: 'ingredients', filter: 'list', sortable:true},
|
||||
{label: 'price', type: 'currency', sortable:true},
|
||||
],
|
||||
height: '150px'
|
||||
});
|
||||
grid.addRow('1', [ 'Margarita', new Array('tomato', 'mozza'), 8.50 ]);
|
||||
grid.addRow('2', [ 'Chorizo', new Array('tomato', 'mozza', 'chorizo'), 10.50 ]);
|
||||
grid.addRow('3', [ 'Regina', new Array('tomato', 'mozza', 'ham', 'schrooms'), 10.50 ]);
|
||||
grid.addRow('4', [ 'Hawaï', new Array('tomato', 'mozza', 'ham', 'Pineapple'), 11.50 ]);
|
||||
grid.addRow('5', [ 'Garlic', new Array('tomato', 'mozza', 'garlic'), 10.00 ]);
|
||||
grid.addRow('6', [ 'Napoli', new Array('tomato', 'mozza', 'ham', 'Olive'), 13.00 ]);
|
||||
/* gridexample : show_code_end */
|
||||
|
||||
/* barchart : show_code_start */
|
||||
|
||||
new BarChart(this.find('[eicbarchart]'), {
|
||||
title: 'Bars sample',
|
||||
height: 200,
|
||||
data: [
|
||||
{value: 10, label:'', severity: 'danger'},
|
||||
{value: 20, label:'', severity: 'warning'},
|
||||
{value: 30, label:'', severity: 'primary'},
|
||||
{value: 50, label:'', severity: 'success'},
|
||||
]
|
||||
});
|
||||
/* barchart : show_code_end */
|
||||
|
||||
/* linechart : show_code_start */
|
||||
this.linechart = new LineChart(this.find('[eiclinechart]'), {
|
||||
title: 'Weather Forecast',
|
||||
height: 180,
|
||||
data: [
|
||||
{
|
||||
severity: 'primary',
|
||||
unit: '°C',
|
||||
data: [ 0, 5, 12, 24, 17]
|
||||
},
|
||||
{
|
||||
severity: 'danger',
|
||||
unit: '°C',
|
||||
data: [ 2, 3, 14, 22, 13]
|
||||
},
|
||||
{
|
||||
severity: 'success',
|
||||
unit: '°C',
|
||||
data: [ 19, 11, 9, 10, 12]
|
||||
}
|
||||
],
|
||||
labels: [
|
||||
'27 jun', '28 jun', '29 jun', '30 jun', '1 jul'
|
||||
]
|
||||
});
|
||||
/* linechart : show_code_end */
|
||||
|
||||
|
||||
/* fileuploadexample : show_code_start */
|
||||
|
||||
// Normal server :
|
||||
this.fileUpload = new FileUpload(this.find('.filupld'), {
|
||||
uploadUrl: 'https://myserver.com/upload?file=',
|
||||
uploadMethod: 'POST',
|
||||
allowedExtensions: ['pdf'],
|
||||
allowDrop: true,
|
||||
maxFiles: 3,
|
||||
minFiles: 1,
|
||||
dndLabel : 'Drop your pitch PDFs here !'
|
||||
});
|
||||
/* fileuploadexample : show_code_end */
|
||||
|
||||
|
||||
// To AWS S3 bucket (pre-requesting a signed URL)
|
||||
/* Nike: Dependency async issue in this page,
|
||||
* but this AWS thing is meant to be deprecated anyway (cooloff period end: 31/11/2024) */
|
||||
// this.awsfileUpload = new AwsFileUpload(this.find('.filupld2'), {
|
||||
// getSignedUrlUrl : 'https://api.dev.eismea.eu/vod/source?file=',
|
||||
// getSignedUrlMethod : 'PUT',
|
||||
// apiKey: 'xxxyyyyzzzz',
|
||||
// uploadUrl: '',
|
||||
// uploadMethod: 'PUT',
|
||||
// allowedExtensions: ['mp4'],
|
||||
// allowedMimes: ['video/mp4'],
|
||||
// allowDrop: true,
|
||||
// maxFiles: 1,
|
||||
// minFiles: 1,
|
||||
// dndLabel : 'Drop your presentation video (mp4) here !'
|
||||
// });
|
||||
|
||||
let codeButtons = components.filter(el => el.el.classList.contains('show-code'))
|
||||
for(let codeButton of codeButtons) {
|
||||
codeButton.click = this.showCode.bind(this, codeButton)
|
||||
}
|
||||
}
|
||||
|
||||
async showCode(buttonObj, event) {
|
||||
event.preventDefault(); event.stopPropagation();
|
||||
let styleguideTemplate = app.Assets.Store.html[`/app/views/${this._className}.html`];
|
||||
let styleguideCode = this.DOMContentLoaded.toString();
|
||||
let result = await this.openDialog(await this.loadContent('system/tools/dialogs/codeTemplateDialog',
|
||||
{ title: `Code explorer` },
|
||||
{ styleguideView : this,
|
||||
styleguideTemplate : styleguideTemplate,
|
||||
styleguideCode: styleguideCode,
|
||||
codeclass: buttonObj.el.dataset.codeclass,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
DOMContentResized() {
|
||||
super.DOMContentResized();
|
||||
this.linechart.redraw();
|
||||
}
|
||||
}
|
||||
|
||||
app.registerClass('EICUIView', EICUIView)
|
||||
Executable
+309
@@ -0,0 +1,309 @@
|
||||
<style type="text/css">
|
||||
.icon-list {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.icon-list li {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
margin: 10px;
|
||||
font-family: var(--eicui-base-font-family);
|
||||
width: 100px;
|
||||
}
|
||||
.icon-list li i {
|
||||
padding: 10px 10px;
|
||||
margin: 3px;
|
||||
border: 1px solid gray;
|
||||
width: 30px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
font-size: var(--eicui-base-font-size-2xl);
|
||||
}
|
||||
.icon-list li label { font-size: var(--eicui-base-font-size-xs); }
|
||||
.styleguide > header { background: url('/app/assets/images/cards/styleguide.jpg'); }
|
||||
.grid-hilite span {
|
||||
display: block;
|
||||
min-height: 30px;
|
||||
border: 1px solid var(--eicui-base-color-primary-100);
|
||||
}
|
||||
</style>
|
||||
<article eiccard media class="styleguide">
|
||||
<header>
|
||||
<h1>Style guide</h1>
|
||||
</header>
|
||||
<section>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Typography</h1>
|
||||
<h2>Utility classes available for text formatting</h2>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<section>
|
||||
<h3>Font definition</h3>
|
||||
<a href="https://myeic.dev.eismea.eu/files/dg7LP7Tl3Tam8kO0onbrccQ" target="_blank">test1</a>
|
||||
<a href="/files/dg7LP7Tl3Tam8kO0onbrccQ" target="_blank">test2</a>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="eui-u-width-20">preview</th>
|
||||
<th>Name</th>
|
||||
<th>Value</th>
|
||||
<th>Utility class</th>
|
||||
<th>CSS variable</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="eui-u-font-2xs">Sample text</p>
|
||||
</td>
|
||||
<td>2xs</td>
|
||||
<td>0.625rem</td>
|
||||
<td>eui-u-font-2xs</td>
|
||||
<td>--eicui-base-font-2xs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="eui-u-font-xs">Sample text</p>
|
||||
</td>
|
||||
<td>xs</td>
|
||||
<td>0.75rem</td>
|
||||
<td>eui-u-font-xs</td>
|
||||
<td>--eicui-base-font-xs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="eui-u-font-s">Sample text</p>
|
||||
</td>
|
||||
<td>s</td>
|
||||
<td>0.875rem</td>
|
||||
<td>eui-u-font-s</td>
|
||||
<td>--eicui-base-font-s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="eui-u-font-m">Sample text</p>
|
||||
</td>
|
||||
<td>m</td>
|
||||
<td>1rem</td>
|
||||
<td>eui-u-font-m</td>
|
||||
<td>--eicui-base-font-m</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="eui-u-font-l">Sample text</p>
|
||||
</td>
|
||||
<td>l</td>
|
||||
<td>1.125rem</td>
|
||||
<td>eui-u-font-l</td>
|
||||
<td>--eicui-base-font-l</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="eui-u-font-xl">Sample text</p>
|
||||
</td>
|
||||
<td>xl</td>
|
||||
<td>1.25rem</td>
|
||||
<td>eui-u-font-xl</td>
|
||||
<td>--eicui-base-font-xl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="eui-u-font-2xl">Sample text</p>
|
||||
</td>
|
||||
<td>2xl</td>
|
||||
<td>1.5rem</td>
|
||||
<td>eui-u-font-2xl</td>
|
||||
<td>--eicui-base-font-2xl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="eui-u-font-3xl">Sample text</p>
|
||||
</td>
|
||||
<td>3xl</td>
|
||||
<td>1.75rem</td>
|
||||
<td>eui-u-font-3xl</td>
|
||||
<td>--eicui-base-font-3xl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="eui-u-font-4xl">Sample text</p>
|
||||
</td>
|
||||
<td>4xl</td>
|
||||
<td>2rem</td>
|
||||
<td>eui-u-font-4xl</td>
|
||||
<td>--eicui-base-font-4xl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="eui-u-font-5xl">Sample text</p>
|
||||
</td>
|
||||
<td>5xl</td>
|
||||
<td>2.25rem</td>
|
||||
<td>eui-u-font-5xl</td>
|
||||
<td>--eicui-base-font-5xl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="eui-u-font-6xl">Sample text</p>
|
||||
</td>
|
||||
<td>6xl</td>
|
||||
<td>2.675rem</td>
|
||||
<td>eui-u-font-6xl</td>
|
||||
<td>--eicui-base-font-6xl</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Grid system</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<p>You can organize your contents in columns. The amount of columns to be used is defined through a class entry in the contents container.</p>
|
||||
<p>Note that when using this grid system, the app will track interface resizing an adapt the column in order to keep a fluid display.</p>
|
||||
<div class="grid-hilite">
|
||||
<h6>2 columns (<code>class="cols-2"</code>)</h6>
|
||||
<div class="cols-2">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<h6>3 columns (<code>class="cols-3"</code>)</h6>
|
||||
<div class="cols-3">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<h6>4 columns (<code>class="cols-4"</code>)</h6>
|
||||
<div class="cols-4">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<h6>5 columns (<code>class="cols-5"</code>)</h6>
|
||||
<div class="cols-5">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<h6>6 columns (<code>class="cols-6"</code>)</h6>
|
||||
<div class="cols-6">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<h6>8 columns (<code>class="cols-8"</code>)</h6>
|
||||
<div class="cols-8">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Color system</h1>
|
||||
<h2>Normalized color coding</h2>
|
||||
</header>
|
||||
<section>
|
||||
<h6>Severity</h6>
|
||||
<p>EUI provides a reduced set of colors providing a semantic information to the user.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Meaning</th>
|
||||
<th>Color</th>
|
||||
<th>Attribute*</th>
|
||||
<th>css variable name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Primary</td>
|
||||
<td><button eicbutton primary></button></td>
|
||||
<td>primary</td>
|
||||
<td>--eicui-base-color-primary-100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Secondary</td>
|
||||
<td><button eicbutton ></button></td>
|
||||
<td>(used as default)</td>
|
||||
<td>--eicui-base-color-secondary-100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Success</td>
|
||||
<td><button eicbutton success></button></td>
|
||||
<td>success</td>
|
||||
<td>--eicui-base-color-success-100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Warning</td>
|
||||
<td><button eicbutton warning></button></td>
|
||||
<td>warning</td>
|
||||
<td>--eicui-base-color-warning-100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Danger/failure</td>
|
||||
<td><button eicbutton danger></button></td>
|
||||
<td>danger</td>
|
||||
<td>--eicui-base-color-danger-100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Info</td>
|
||||
<td><button eicbutton info></button></td>
|
||||
<td>info</td>
|
||||
<td>--eicui-base-color-info-100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Accent</td>
|
||||
<td><button eicbutton accent></button></td>
|
||||
<td>accent</td>
|
||||
<td>--eicui-base-color-accent-100</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>* See components tagged with <span eicchip xsmall info>severity</span>, indicating they support severity color system</p>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Headings</h1>
|
||||
<h2>Styles available for title formatting</h2>
|
||||
</header>
|
||||
<section>
|
||||
<h1>This is heading 1</h1>
|
||||
<h2>This is heading 2</h2>
|
||||
<h3>This is heading 3</h3>
|
||||
<h4>This is heading 4</h4>
|
||||
<h5>This is heading 5</h5>
|
||||
<h6>This is heading 6</h6>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard collapsable collapsed>
|
||||
<header>
|
||||
<h1>Icons</h1>
|
||||
<h2>Set of UI icons</h2>
|
||||
</header>
|
||||
<section>
|
||||
<ul class="icon-list"></ul>
|
||||
</section>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
Executable
+46
@@ -0,0 +1,46 @@
|
||||
class styleguideView extends EICDomContent {
|
||||
|
||||
DOMContentLoaded() {
|
||||
|
||||
// building icon list
|
||||
let iconList = this.find('ul.icon-list');
|
||||
let sheet = null;
|
||||
|
||||
for(let i = 0; document.styleSheets.length; i++) {
|
||||
let rule = document.styleSheets[i];
|
||||
if(rule) {
|
||||
let rules
|
||||
try { rules = rule.cssRules }
|
||||
catch(err) { rules = [] }
|
||||
for(let r = 0; r < rules.length; r++) {
|
||||
let islocal = rule.href && ( (new URL(rule.href)).host == document.location.host);
|
||||
if( (rules.item(r).styleSheet) && islocal) {
|
||||
sheet = rules.item(r).styleSheet;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(sheet) {
|
||||
let classes = [];
|
||||
for(let i = 0; i < sheet.rules.length; i++) {
|
||||
let rule = sheet.rules.item(i);
|
||||
if(rule.selectorText && rule.selectorText.indexOf('.icon-') == 0) {
|
||||
classes.push(rule.selectorText.replace('.', '').replace('::before', ''))
|
||||
}
|
||||
}
|
||||
|
||||
classes.sort();
|
||||
for(let i = 0; i < classes.length; i++) {
|
||||
let cls = classes[i];
|
||||
iconList.appendChild(ui.create(`<li><i medium class="${cls}"></i><label>${cls.replace('icon-', '')}</label></li>`))
|
||||
}
|
||||
}
|
||||
|
||||
ui.eicfy(this.el);
|
||||
}
|
||||
}
|
||||
|
||||
app.registerClass('styleguideView', styleguideView)
|
||||
Reference in New Issue
Block a user