Skip to content

Commit d93e36e

Browse files
evoluteurevoluteur
committed
Doc - more info on "App" and "Toolbar" classes.
1 parent 37a016c commit d93e36e

4 files changed

Lines changed: 70 additions & 57 deletions

File tree

‎dist/css/demo.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@
210210
.evol-doc-views > section img {
211211
width: 500px;
212212
}
213-
.evol-doc-views img.shadow {
213+
img.shadow {
214214
border: 1px solid #e0e0e0;
215215
box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.25);
216216
-moz-box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.25);

‎doc/controller.html‎

Lines changed: 40 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -78,26 +78,21 @@ <h2>App</h2>
7878
<section>
7979
<h3>Options</h3>
8080

81-
<p>el: DOM element to hold the views.,
82-
<p>uiModels: Array of UI-models,
83-
<p>elements:{
84-
nav: '.evo-head-links',
85-
nav2: '.evo-head-links2',
86-
content: '#evol'
87-
},
88-
<p>style: 'panel-info',
89-
<p>useRouter: true,
90-
<p>pageSize:20,
81+
<p><strong>el</strong>: DOM element to hold the views.</p>
82+
<p><strong>uiModels</strong>: Array of UI-models.</p>
83+
<p><strong>style</strong>: Bootstrap style for panels (possible values: "panel-default" (grey), "panel-primary" (dark blue), "panel-success" (green), "panel-info" (light blue), "panel-warning" (yellow), "panel-danger" (red)).</p>
84+
<p><strong>useRouter</strong>: Set to true for Evolutility to automatically handle routing.</p>
85+
<p><strong>pageSize</strong>: Page size for list and cards views.</p>
9186

9287
</section>
9388

9489

9590
<section>
9691
<h3>Methods</h3>
9792

98-
<p>setRoute((id, triggerRoute))</p>
93+
<p><strong>setRoute(id, triggerRoute)</strong>: Change the route and display the corresponding view.</p>
9994

100-
<p>setEntity(entityName, view, options)</p>
95+
<p><strong>setEntity(entityName, view, options)</strong>: Change the entity and display the corresponding entity in the currently selected view.</p>
10196

10297
</section>
10398

@@ -116,7 +111,15 @@ <h3>Events</h3>
116111
<a name="toolbar" class="evo-anchor">&nbsp;</a>
117112
<section>
118113
<h2>Toolbar</h2>
119-
<p>The toolbar manages all views for a specific UI-model.</p>
114+
<p>The toolbar manages all views for a specific UI-model. It displays different options based on the context.</p>
115+
116+
<p>Toolbar for One model:</p>
117+
<p><img class="pixEvoView shadow"src="screenshots/toolbar-one.gif"></p>
118+
119+
120+
<p>Toolbar for Many models:</p>
121+
<p><img class="pixEvoView shadow" src="screenshots/toolbar-many.gif"></p>
122+
120123

121124
<p><pre>
122125
<code>new Evol.Toolbar(
@@ -128,73 +131,60 @@ <h2>Toolbar</h2>
128131
);</code>
129132
</pre></p>
130133

131-
<p>For One model</p>
132-
<p><img src="screenshots/toolbar-one.gif"></p>
133-
134-
135-
<p>For Many model</p>
136-
<p><img src="screenshots/toolbar-many.gif"></p>
137-
138-
139134
<section>
140135
<h3>Options</h3>
141136

142-
<p>toolbar: true,
143-
<p>readonly: false,
144-
<p>defaultViewOne: 'browse',
145-
<p>defaultViewMany: 'list',
146-
<p>style: 'panel-info',
147-
<p>display: 'label', // tooltip, text, icon, none
148-
<p>titleSelector: '#title',
149-
<p>buttons: object,
150-
<p>pageSize:20
137+
<p><strong>defaultViewOne</strong>: Default view when looking at a single model (possible values "browse", "edit", "mini", json").</p>
138+
<p><strong>defaultViewMany</strong>: Default view when looking at a collection (possible values "list", "cards", "bubbles", charts").</p>
139+
140+
<p><strong>model</strong>: Backbone model for the toolbar to manage.</p>
141+
<p><strong>collection</strong>: Backbone collection for the toolbar to manage.</p>
142+
<p><strong>readonly</strong>: Provides read-only interaction (no update or delete).</p>
143+
<p><strong>style</strong>: Bootstrap style for panels (possible values: "panel-default" (grey), "panel-primary" (dark blue), "panel-success" (green), "panel-info" (light blue), "panel-warning" (yellow), "panel-danger" (red)).</p>
144+
<p><strong>titleSelector</strong>: Selector for the title element outside of the view (example: '#title').</p>
145+
<p><strong>pageSize</strong>: Page size for list and cards views.</p>
151146
</section>
152147

153148

154149
<section>
155150
<h3>Methods</h3>
156151

157-
<p>render()</p>
158-
159-
<p>setData()</p>
152+
<p><strong>render()</strong>: Render the toolbar and the default view.</p>
160153

161-
<p>getData()</p>
154+
<p><strong>setData(data)</strong>: Set data.</p>
162155

163-
<p>setView(viewName)</p>
156+
<p><strong>getData()</strong>: Get data.</p>
164157

165-
<p>setStatus(message)</p>
158+
<p><strong>setView(viewName)</strong>: Set the current view (possible values: "browse", edit", "mini", "list"...).</p>
166159

167-
<p>showFilter()</p>
160+
<p><strong>showFilter()</strong>: Expend the filter panel.</p>
168161

169-
<p>browse(direction)</p>
162+
<p><strong>browse(direction)</strong>: Moves to the next or previous record.</p>
170163

171-
<p>saveItem(saveAndAdd)</p>
164+
<p>s<strong>SaveItem(saveAndAdd)</strong>: Save the currently edited record (if it passes validation).</p>
172165

173-
<p>newItem()</p>
166+
<p><strong>newItem()</strong>: Create a new record.</p>
174167

175-
<p>deleteItem()</p>
168+
<p><strong>deleteItem()</strong>: Delete the currently edited or browsed record.</p>
176169

177-
<p>clearMessage()</p>
170+
<p><strong>clearMessage()</strong>: Clear the header message.</p>
178171

179-
<p>setMessage()</p>
172+
<p><strong>setMessage()</strong>: Set the value of the header message.</p>
180173

181174
</section>
182175

183176

184177
<section>
185178
<h3>Events</h3>
186179

187-
<p>item.added</p>
188-
<p>item.saved</p>
189-
<p>item.deleted</p>
190-
<p>search</p>
191-
<p>filter.change</p>
192-
<p>toolbar.X (X = toolbar button Ids in [
180+
<p><strong>item.added, item.saved, item.deleted</strong>: Triggered when a record is added/saved or deleted.</p>
181+
<p><strong>filter.change</strong>: Triggered when filter conditions are changed.</p>
182+
<p><strong>toolbar.X</strong>: Triggered when a toolbar button is clicked. X = toolbar button Ids in [
193183
'new', 'del', 'filter', 'export',
194184
'browse', 'edit', 'mini', 'json',
195185
'list', 'cards', 'bubbles', 'charts',
196186
'prev', 'next'
197-
])</p>
187+
].</p>
198188
</section>
199189

200190
</section>

‎js/dico/doc.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,13 @@ var EvoDoc = _.sortBy([
200200
many: true,
201201
description: 'Path to icons for model and list of values.'
202202
},
203+
{
204+
name: 'model',
205+
type:'option',
206+
one: true,
207+
many: true,
208+
description: 'Backbone model managed by the component.'
209+
},
203210

204211
/*
205212
Options for One
@@ -212,6 +219,16 @@ var EvoDoc = _.sortBy([
212219
description: 'Show a "Save and Add Another" button next to "Save". Default value = false.'
213220
},
214221

222+
/*
223+
Options for Many
224+
*/
225+
{
226+
name: 'collection',
227+
type:'option',
228+
one: false,
229+
many: true,
230+
description: 'Backbone collection managed by the component.'
231+
},
215232

216233
/*
217234
Options for List and Cards
@@ -276,6 +293,12 @@ var EvoDoc = _.sortBy([
276293
view: 'export',
277294
description: 'List of possible export formats (in this list: CSV, TAB, HTML, JSON, XML, SQL).'
278295
},
296+
{
297+
name: 'collection',
298+
type:'option',
299+
view: 'export',
300+
description: 'Backbone collection to use for the export sample.'
301+
},
279302

280303

281304
/* Events */

‎less/doc.less‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@
1212
width:500px;
1313
}
1414
}
15-
img.shadow {
16-
border: 1px solid #e0e0e0;
17-
box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.25);
18-
-moz-box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.25);
19-
-webkit-box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.25);
20-
}
15+
}
16+
img.shadow {
17+
border: 1px solid #e0e0e0;
18+
box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.25);
19+
-moz-box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.25);
20+
-webkit-box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.25);
2121
}
2222
img.pixEvoPos{
2323
width: 350px !important;

0 commit comments

Comments
 (0)