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' )
|
||||
|
||||
class searchableSelectRef extends App.ControllerContent
|
||||
class InputsRef extends App.ControllerContent
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
@render()
|
||||
|
||||
render: ->
|
||||
@html App.view('layout_ref/inputs')
|
||||
|
||||
# activate widgets
|
||||
|
||||
# selectable search
|
||||
searchableSelectObject = new App.SearchableSelect
|
||||
attribute:
|
||||
name: 'project-name'
|
||||
id: 'project-name-123'
|
||||
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"}]
|
||||
|
||||
@html App.view('layout_ref/search_select')
|
||||
|
||||
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"}]
|
||||
@$('.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
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
|
||||
<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/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/sla">Service Level Agreements</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=password],
|
||||
input[type=email],
|
||||
input[type=time],
|
||||
textarea,
|
||||
.form-control,
|
||||
.checkbox.form-group .checkbox {
|
||||
|
|
|
|||
Loading…
Reference in a new issue