introduce input layout_ref
This commit is contained in:
Felix Niklas
parent
dec7411f30
commit
a8d76ae26c
5 changed files with 100 additions and 43 deletions
|
|
@ -1417,25 +1417,33 @@ class schedulersRef extends App.ControllerContent
|
||||||
|
|
||||||
App.Config.set( 'layout_ref/schedulers', schedulersRef, 'Routes' )
|
App.Config.set( 'layout_ref/schedulers', schedulersRef, 'Routes' )
|
||||||
|
|
||||||
class searchableSelectRef extends App.ControllerContent
|
class InputsRef extends App.ControllerContent
|
||||||
|
|
||||||
constructor: ->
|
constructor: ->
|
||||||
super
|
super
|
||||||
@render()
|
@render()
|
||||||
|
|
||||||
render: ->
|
render: ->
|
||||||
|
@html App.view('layout_ref/inputs')
|
||||||
|
|
||||||
|
# activate widgets
|
||||||
|
|
||||||
|
# selectable search
|
||||||
searchableSelectObject = new App.SearchableSelect
|
searchableSelectObject = new App.SearchableSelect
|
||||||
attribute:
|
attribute:
|
||||||
name: 'project-name'
|
name: 'project-name'
|
||||||
id: 'project-name-123'
|
id: 'project-name-123'
|
||||||
placeholder: 'Enter Project Name'
|
placeholder: 'Enter Project Name'
|
||||||
options: [{"value":0,"name":"Appleasdfasdfasdjflkajhsdlfkjahsdlfkjahsdlkfjahsdlkfjahsldkfjahsldkjfahsldkjfh asdf lkajshdfl kajshdfl kajhsdflk ajhsdlfk jahsdlfk jahsdlfk jahsdlkfj ahsdlkfj ahsldkjfahskdjfh aslkdjfhal skdjfha lksdjfhalksdjhfal ksjdal kjsdhfakl sjdhafl jsdhf laskdjhfal ksjdhfal ksdjhfal kjsdhal kjsdhfl akjsdhf lhkj"},{"value":1,"name":"Microsoft","selected":true},{"value":2,"name":"Google"},{"value":3,"name":"Deutsche Bahn"},{"value":4,"name":"Sparkasse"},{"value":5,"name":"Deutsche Post"},{"value":6,"name":"Mitfahrzentrale"},{"value":7,"name":"Starbucks"},{"value":8,"name":"Mac Donalds"},{"value":9,"name":"Flixbus"},{"value":10,"name":"Betahaus"},{"value":11,"name":"Bruno Banani"},{"value":12,"name":"Alpina"},{"value":13,"name":"Samsung"},{"value":14,"name":"ChariTea"},{"value":15,"name":"fritz-kola"},{"value":16,"name":"Vitamin Water"},{"value":17,"name":"Znuny"},{"value":18,"name":"Max & Moritz"}]
|
options: [{"value":0,"name":"Apple"},{"value":1,"name":"Microsoft","selected":true},{"value":2,"name":"Google"},{"value":3,"name":"Deutsche Bahn"},{"value":4,"name":"Sparkasse"},{"value":5,"name":"Deutsche Post"},{"value":6,"name":"Mitfahrzentrale"},{"value":7,"name":"Starbucks"},{"value":8,"name":"Mac Donalds"},{"value":9,"name":"Flixbus"},{"value":10,"name":"Betahaus"},{"value":11,"name":"Bruno Banani"},{"value":12,"name":"Alpina"},{"value":13,"name":"Samsung"},{"value":14,"name":"ChariTea"},{"value":15,"name":"fritz-kola"},{"value":16,"name":"Vitamin Water"},{"value":17,"name":"Znuny"},{"value":18,"name":"Max & Moritz"}]
|
||||||
|
|
||||||
@html App.view('layout_ref/search_select')
|
|
||||||
|
|
||||||
@$('.searchableSelectPlaceholder').replaceWith( searchableSelectObject.el )
|
@$('.searchableSelectPlaceholder').replaceWith( searchableSelectObject.el )
|
||||||
|
|
||||||
App.Config.set( 'layout_ref/search_select', searchableSelectRef, 'Routes' )
|
# time and timeframe
|
||||||
|
@$('.time').timepicker()
|
||||||
|
|
||||||
|
@$('.timeframe').timepicker
|
||||||
|
maxHours: 99
|
||||||
|
|
||||||
|
App.Config.set( 'layout_ref/inputs', InputsRef, 'Routes' )
|
||||||
|
|
||||||
|
|
||||||
class calendarSubscriptionsRef extends App.ControllerContent
|
class calendarSubscriptionsRef extends App.ControllerContent
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,9 @@
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
<li><a href="#layout_ref/inputs">✏ Inputs</a></li>
|
||||||
<li><a href="#layout_ref/buttons">👇 All the Buttons</a></li>
|
<li><a href="#layout_ref/buttons">👇 All the Buttons</a></li>
|
||||||
<li><a href="#layout_ref/calendar_subscriptions">Calendar Subscriptions</a></li>
|
<li><a href="#layout_ref/calendar_subscriptions">Calendar Subscriptions</a></li>
|
||||||
<li><a href="#layout_ref/search_select">Searchable Select</a></li>
|
|
||||||
<li><a href="#layout_ref/schedulers">Schedulers</a></li>
|
<li><a href="#layout_ref/schedulers">Schedulers</a></li>
|
||||||
<li><a href="#layout_ref/sla">Service Level Agreements</a></li>
|
<li><a href="#layout_ref/sla">Service Level Agreements</a></li>
|
||||||
<li><a href="#layout_ref/user_list">User List</a></li>
|
<li><a href="#layout_ref/user_list">User List</a></li>
|
||||||
|
|
|
||||||
85
app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
Normal file
85
app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
<div class="main flex">
|
||||||
|
<h1>Inputs</h1>
|
||||||
|
|
||||||
|
<div style="max-width: 500px">
|
||||||
|
<h2>Time</h2>
|
||||||
|
<p>A time of the day</p>
|
||||||
|
<input type="text" value="14:40" class="time">
|
||||||
|
<p>Add class <code>time--12</code> to activate AM/PM support</p>
|
||||||
|
<input type="text" value="2:40 PM" class="time time--12">
|
||||||
|
|
||||||
|
<h2>Timeframe</h2>
|
||||||
|
<p>A time between 00:00 and 99:99 hours</p>
|
||||||
|
<input type="text" value="48:00" class="timeframe">
|
||||||
|
|
||||||
|
<h2>Text Input</h2>
|
||||||
|
<div class="input form-group">
|
||||||
|
<label for="id1">Name</label>
|
||||||
|
<input id="id1" class="form-control" type="text" placeholder="Text Input">
|
||||||
|
</div>
|
||||||
|
<div class="input form-group">
|
||||||
|
<label for="id2">Password</label>
|
||||||
|
<input id="id2" class="form-control" type="password" value="Password Input">
|
||||||
|
</div>
|
||||||
|
<div class="input form-group">
|
||||||
|
<label for="id3">Email address</label>
|
||||||
|
<input id="id3" class="form-control" type="email" placeholder="Email Input">
|
||||||
|
<p class="help-block">Example block-level help text here.</p>
|
||||||
|
</div>
|
||||||
|
<div class="textarea form-group">
|
||||||
|
<label for="id4">Description</label>
|
||||||
|
<textarea id="id4" class="form-control" placeholder="Free Input"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Select</h2>
|
||||||
|
<div class="select form-group">
|
||||||
|
<label for="a">Company</label>
|
||||||
|
<div class="u-positionOrigin">
|
||||||
|
<select id="a" class="form-control">
|
||||||
|
<option>Apple</option>
|
||||||
|
<option>Microsoft</option>
|
||||||
|
<option>Google</option>
|
||||||
|
<option>Deutsche Bahn</option>
|
||||||
|
<option>Sparkasse</option>
|
||||||
|
<option>Deutsche Post</option>
|
||||||
|
<option>Mitfahrzentrale</option>
|
||||||
|
<option>Starbucks</option>
|
||||||
|
<option>Mac Donalds</option>
|
||||||
|
<option>Flixbus</option>
|
||||||
|
<option>Betahaus</option>
|
||||||
|
<option>Bruno Banani</option>
|
||||||
|
<option>Alpina</option>
|
||||||
|
<option>Samsung</option>
|
||||||
|
<option>ChariTea</option>
|
||||||
|
<option>fritz-kola</option>
|
||||||
|
<option>Vitamin Water</option>
|
||||||
|
<option>Znuny</option>
|
||||||
|
<option>Max & Moritz</option>
|
||||||
|
</select>
|
||||||
|
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="select form-group">
|
||||||
|
<label for="b">Company (searchable)</label>
|
||||||
|
<div class="searchableSelectPlaceholder"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Checkbox</h2>
|
||||||
|
<div class="checkbox form-group">
|
||||||
|
<div class="controls">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"> Checkbox A
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" checked> Checkbox B
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"> Checkbox C
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<div class="main flex">
|
|
||||||
<h1>Searchable Select</h1>
|
|
||||||
|
|
||||||
<h2>Normal select</h2>
|
|
||||||
|
|
||||||
<div class="u-positionOrigin">
|
|
||||||
<select id="a" class="form-control">
|
|
||||||
<option>Apple</option>
|
|
||||||
<option>Microsoft</option>
|
|
||||||
<option>Google</option>
|
|
||||||
<option>Deutsche Bahn</option>
|
|
||||||
<option>Sparkasse</option>
|
|
||||||
<option>Deutsche Post</option>
|
|
||||||
<option>Mitfahrzentrale</option>
|
|
||||||
<option>Starbucks</option>
|
|
||||||
<option>Mac Donalds</option>
|
|
||||||
<option>Flixbus</option>
|
|
||||||
<option>Betahaus</option>
|
|
||||||
<option>Bruno Banani</option>
|
|
||||||
<option>Alpina</option>
|
|
||||||
<option>Samsung</option>
|
|
||||||
<option>ChariTea</option>
|
|
||||||
<option>fritz-kola</option>
|
|
||||||
<option>Vitamin Water</option>
|
|
||||||
<option>Znuny</option>
|
|
||||||
<option>Max & Moritz</option>
|
|
||||||
</select>
|
|
||||||
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Searchable select</h2>
|
|
||||||
<p class="subtle">Should always have a placeholder.</p>
|
|
||||||
<div class="searchableSelectPlaceholder"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
@ -871,7 +871,6 @@ input[type="checkbox"] {
|
||||||
input[type=text],
|
input[type=text],
|
||||||
input[type=password],
|
input[type=password],
|
||||||
input[type=email],
|
input[type=email],
|
||||||
input[type=time],
|
|
||||||
textarea,
|
textarea,
|
||||||
.form-control,
|
.form-control,
|
||||||
.checkbox.form-group .checkbox {
|
.checkbox.form-group .checkbox {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue