Wiki source code of Totem Application
Last modified by Vincent Massol on 2024/11/19 16:15
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | This proposal was done following Google's [[Material Design>>http://www.google.com/design/spec/material-design/introduction.html]] guidelines and using FezVrasta's [[Material design theme for Bootstrap 3>>https://github.com/FezVrasta/bootstrap-material-design]]. | ||
| 2 | |||
| 3 | While the proposals displays the Totem application using [[Macaw Skin>>Proposal.MacawSkin]], the proposed structure can be applied also on [[Flamingo Skin>>Improvements.Skin4x]]. | ||
| 4 | |||
| 5 | (% class="row" %) | ||
| 6 | ((( | ||
| 7 | (% class="col-xs-12 col-sm-12" %) | ||
| 8 | ((( | ||
| 9 | = Proposal = | ||
| 10 | ))) | ||
| 11 | (% class="col-xs-12 col-sm-4" %) | ||
| 12 | ((( | ||
| 13 | {{toc start="2"/}} | ||
| 14 | ))) | ||
| 15 | ))) | ||
| 16 | |||
| 17 | (% class="row" %) | ||
| 18 | ((( | ||
| 19 | (% class="col-xs-12" %) | ||
| 20 | ((( | ||
| 21 | == Homepage == | ||
| 22 | ))) | ||
| 23 | |||
| 24 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 25 | ((( | ||
| 26 | Add inline-form (Colibri/Flamingo style) | ||
| 27 | [[{{image reference="addColibri.png" width="100%"/}}>>attach:addColibri.png]] | ||
| 28 | ))) | ||
| 29 | |||
| 30 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 31 | ((( | ||
| 32 | Add button (Macaw style) | ||
| 33 | [[{{image reference="addMacaw.png" width="100%"/}}>>attach:addMacaw.png]] | ||
| 34 | ))) | ||
| 35 | |||
| 36 | ))) | ||
| 37 | |||
| 38 | (% class="row" %) | ||
| 39 | ((( | ||
| 40 | (% class="col-xs-12" %) | ||
| 41 | ((( | ||
| 42 | == Forms == | ||
| 43 | ))) | ||
| 44 | |||
| 45 | (% class="col-xs-12 col-sm-12" %) | ||
| 46 | ((( | ||
| 47 | === Single-line fields === | ||
| 48 | ))) | ||
| 49 | |||
| 50 | (% class="col-xs-12 col-sm-4 col-md-4" %) | ||
| 51 | ((( | ||
| 52 | Placeholder | ||
| 53 | [[{{image reference="addPlaceholder.png" width="100%"/}}>>attach:addPlaceholder.png]] | ||
| 54 | ))) | ||
| 55 | |||
| 56 | (% class="col-xs-12 col-sm-4 col-md-4" %) | ||
| 57 | ((( | ||
| 58 | Value and Success Message | ||
| 59 | [[{{image reference="addValueSuccess.png" width="100%"/}}>>attach:addValueSuccess.png]] | ||
| 60 | ))) | ||
| 61 | |||
| 62 | (% class="col-xs-12 col-sm-4 col-md-4" %) | ||
| 63 | ((( | ||
| 64 | Error Message | ||
| 65 | [[{{image reference="addValueError.png" width="100%"/}}>>attach:addValueError.png]] | ||
| 66 | ))) | ||
| 67 | |||
| 68 | (% class="col-xs-12 col-sm-12" %) | ||
| 69 | ((( | ||
| 70 | === Floating labels === | ||
| 71 | ))) | ||
| 72 | |||
| 73 | (% class="col-xs-12 col-sm-4 col-md-4" %) | ||
| 74 | ((( | ||
| 75 | Label | ||
| 76 | [[{{image reference="configLabel.png" width="100%"/}}>>attach:configLabel.png]] | ||
| 77 | ))) | ||
| 78 | |||
| 79 | (% class="col-xs-12 col-sm-4 col-md-4" %) | ||
| 80 | ((( | ||
| 81 | Label + Hint | ||
| 82 | [[{{image reference="configHint.png" width="100%"/}}>>attach:configHint.png]] | ||
| 83 | ))) | ||
| 84 | |||
| 85 | (% class="col-xs-12 col-sm-4 col-md-4" %) | ||
| 86 | ((( | ||
| 87 | Label + Value | ||
| 88 | [[{{image reference="configValue.png" width="100%"/}}>>attach:configValue.png]] | ||
| 89 | ))) | ||
| 90 | ))) | ||
| 91 | |||
| 92 | (% class="row" %) | ||
| 93 | ((( | ||
| 94 | (% class="col-xs-12" %) | ||
| 95 | ((( | ||
| 96 | == Totem == | ||
| 97 | ))) | ||
| 98 | |||
| 99 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 100 | ((( | ||
| 101 | View Mode | ||
| 102 | [[{{image reference="totemView.png" width="100%"/}}>>attach:totemView.png]] | ||
| 103 | |||
| 104 | |||
| 105 | |=Edit Mode| | ||
| 106 | |((('Add Section', 'Delete Section' | ||
| 107 | 'Edit Section', 'Edit Section Items')))|Launch dialogs | ||
| 108 | |'Manage items'|Links to Totem.Items | ||
| 109 | |||
| 110 | ))) | ||
| 111 | |||
| 112 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 113 | ((( | ||
| 114 | Edit Mode | ||
| 115 | [[{{image reference="totemEdit.png" width="100%"/}}>>attach:totemEdit.png]] | ||
| 116 | ))) | ||
| 117 | |||
| 118 | ))) | ||
| 119 | |||
| 120 | (% class="row" %) | ||
| 121 | ((( | ||
| 122 | (% class="col-xs-12" %) | ||
| 123 | ((( | ||
| 124 | == Section == | ||
| 125 | ))) | ||
| 126 | |||
| 127 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 128 | ((( | ||
| 129 | Section View | ||
| 130 | [[{{image reference="section.png" width="100%"/}}>>attach:section.png]] | ||
| 131 | ))) | ||
| 132 | |||
| 133 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 134 | ((( | ||
| 135 | 'Drag&Drop' Button | ||
| 136 | [[{{image reference="sectionDrag.png" width="100%"/}}>>attach:sectionDrag.png]] | ||
| 137 | ))) | ||
| 138 | ))) | ||
| 139 | |||
| 140 | (% class="row" %) | ||
| 141 | ((( | ||
| 142 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 143 | ((( | ||
| 144 | 'Edit Section Items' Button | ||
| 145 | [[{{image reference="sectionEditItems.png" width="100%"/}}>>attach:sectionEditItems.png]] | ||
| 146 | ))) | ||
| 147 | |||
| 148 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 149 | ((( | ||
| 150 | 'Edit Section Items' Dialog | ||
| 151 | [[{{image reference="sectionEditItemsDialog.png" width="100%"/}}>>attach:sectionEditItemsDialog.png]] | ||
| 152 | ))) | ||
| 153 | |||
| 154 | ))) |
