menus, better routes, dev tools, styling
This commit is contained in:
STEINNI
@@ -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