Hide last authors
Ecaterina Moraru (Valica) 1.5 1 {{toc start="2"/}}
2
Ecaterina Moraru (Valica) 27.2 3 (% class="row" %)
4 (((
5 (% class="col-xs-12 col-sm-6" %)
6 (((
Ecaterina Moraru (Valica) 1.18 7 == Requirement ==
8
9 > Save button more visible
10
Ecaterina Moraru (Valica) 1.6 11 == Need ==
12
Ecaterina Moraru (Valica) 1.19 13 * C: The Save button is not always visible when editing and people need to scroll to find it
Ecaterina Moraru (Valica) 1.22 14 * More problematic on wikis that also use Menu App, since their vertical space is reduced (no matter the default values) and the save are on scroll
Ecaterina Moraru (Valica) 1.23 15 * O: The user doesn't see the SAVE button while editing
16 * O: he doesn't understand he must scroll to find the Save button
17 * O: when memorised where it is located, not easy to reach because of the textarea zone, you have to circumvent this zone by the right
18 * O: Edit and save button belong to the same category. they're not at in the same sector, this is kind of confusing
Ecaterina Moraru (Valica) 1.6 19
Ecaterina Moraru (Valica) 1.22 20 == Other ==
21
22 * Only 1 Save button: combine "Save & Continue" and "Save & View" inside a dropdown
23 * O: Remove "Version Summary" or CkEditor bottom space since it's not used and takes space. Preview also not needed
24
Ecaterina Moraru (Valica) 1.7 25 == Solutions ==
Ecaterina Moraru (Valica) 1.8 26
27 === Solution 1 ===
Ecaterina Moraru (Valica) 1.9 28
Ecaterina Moraru (Valica) 1.26 29 * Adjust the height of the editor
Ecaterina Moraru (Valica) 1.13 30
31 ==== Solution 1.1 ====
32
Ecaterina Moraru (Valica) 1.14 33 * Reduce the height of the editor area. Currently CkEditor is using 500px.
Ecaterina Moraru (Valica) 1.9 34
35 ==== Solution 1.2 ====
36
Ecaterina Moraru (Valica) 1.12 37 {{jira url="https://jira.xwiki.org" style="list"}}
Ecaterina Moraru (Valica) 1.9 38 XWIKI-1460
39 {{/jira}}
40
41 === Solution 2 ===
42
Ecaterina Moraru (Valica) 1.22 43 * Change the position of the save buttons to top, instead of bottom in order to be more visible
44 * Save near the Edit buttons
Ecaterina Moraru (Valica) 1.9 45
46 === Solution 3 ===
47
Ecaterina Moraru (Valica) 1.22 48 * Create a fixed-bottom area for buttons in edit mode that doesn't change position
Ecaterina Moraru (Valica) 27.2 49 {{jira url="https://jira.xwiki.org" style="list"}}XWIKI-14162{{/jira}}
50 )))
Ecaterina Moraru (Valica) 16.3 51
Ecaterina Moraru (Valica) 27.2 52 (% class="col-xs-12 col-sm-6" %)
53 (((
Ecaterina Moraru (Valica) 37.2 54 == Variants ==
Ecaterina Moraru (Valica) 1.28 55
Ecaterina Moraru (Valica) 27.2 56 (% class="row" %)
57 (((
58 (% class="col-xs-6" %)
59 (((
Ecaterina Moraru (Valica) 1.30 60 Before
61 [[[[image:before.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:before.png]]
Ecaterina Moraru (Valica) 1.27 62 )))
Ecaterina Moraru (Valica) 27.2 63
64 (% class="col-xs-6" %)
65 (((
Ecaterina Moraru (Valica) 1.30 66 After
67 [[[[image:after.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:after.png]]
Ecaterina Moraru (Valica) 1.27 68 )))
Ecaterina Moraru (Valica) 1.30 69 )))
Ecaterina Moraru (Valica) 2.2 70
Ecaterina Moraru (Valica) 16.5 71 Changes:
Ecaterina Moraru (Valica) 27.2 72
Ecaterina Moraru (Valica) 21.5 73 * Make the buttons visible when they are out of viewport
Ecaterina Moraru (Valica) 21.6 74 ** [[Bootstrap Affix>>http://getbootstrap.com/javascript/#affix]] can be used for the scrolling effect
Ecaterina Moraru (Valica) 22.3 75 * When the user scrolls down, the bar goes into its place
Ecaterina Moraru (Valica) 21.3 76 * Compress the bottom buttons in a bar that looks like is part of the editor
77 * Integrate all the functionality in a single row
78 ** Have Preview just for Syntax editor
Ecaterina Moraru (Valica) 21.6 79 * Adapt for FullScreen and Mobile views
Ecaterina Moraru (Valica) 16.5 80
Ecaterina Moraru (Valica) 13.3 81 {{gallery}}
Ecaterina Moraru (Valica) 22.2 82 image:bottomBar.png
Ecaterina Moraru (Valica) 18.2 83 image:smallViewPort.png
Ecaterina Moraru (Valica) 13.3 84 image:after.png
Ecaterina Moraru (Valica) 16.2 85 image:fullScreen.png
Ecaterina Moraru (Valica) 25.2 86 image:wikiEditor.png
Ecaterina Moraru (Valica) 21.7 87 image:mobile.png
Ecaterina Moraru (Valica) 13.3 88 {{/gallery}}
89
Ecaterina Moraru (Valica) 13.4 90
Ecaterina Moraru (Valica) 2.2 91 {{html wiki="true"}}
92 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
93 <div class="panel panel-default">
94 <div class="panel-heading" role="tab" id="headingOne">
95 <h4 class="panel-title">
96 <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Ecaterina Moraru (Valica) 3.4 97 Iterations
Ecaterina Moraru (Valica) 2.2 98 </a>
99 </h4>
100 </div>
101 <div id="collapseOne" class="panel-collapse collapse \in" role="tabpanel" aria-labelledby="headingOne">
102 <div class="panel-body">
Ecaterina Moraru (Valica) 3.6 103 [[[[image:1.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:1.png]]
Ecaterina Moraru (Valica) 3.7 104 [[[[image:2.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:2.png]]
105 [[[[image:3.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:3.png]]
106 [[[[image:4.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:4.png]]
107 [[[[image:5.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:5.png]]
108 [[[[image:6.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:6.png]]
109 [[[[image:7.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:7.png]]
110 [[[[image:8.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:8.png]]
111 [[[[image:9.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:9.png]]
112 [[[[image:10.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:10.png]]
Ecaterina Moraru (Valica) 2.2 113 </div>
114 </div>
115 </div>
116 </div>
117 {{/html}}
Ecaterina Moraru (Valica) 1.30 118 )))
Ecaterina Moraru (Valica) 27.2 119 )))
Ecaterina Moraru (Valica) 35.2 120
Ecaterina Moraru (Valica) 40.1 121 (% class="row" %)
122 (((
123 (% class="col-xs-4" %)
124 (((
Ecaterina Moraru (Valica) 35.2 125 Var A
126 [[[[image:varA.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:varA.png]]
127 )))
128
Ecaterina Moraru (Valica) 40.1 129 (% class="col-xs-4" %)
130 (((
Ecaterina Moraru (Valica) 35.2 131 Var B
132 [[[[image:varB.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:varB.png]]
133 )))
134
Ecaterina Moraru (Valica) 40.1 135 (% class="col-xs-4" %)
136 (((
Ecaterina Moraru (Valica) 35.2 137 Var C
138 [[[[image:varC.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:varC.png]]
139 )))
140 )))
Ecaterina Moraru (Valica) 37.2 141
142 (% class="row" %)
143 (((
Ecaterina Moraru (Valica) 37.3 144 (% class="col-xs-12 col-sm-4" %)
Ecaterina Moraru (Valica) 37.2 145 (((
Ecaterina Moraru (Valica) 43.5 146 == Proposal 9.x ==
Ecaterina Moraru (Valica) 40.1 147
Ecaterina Moraru (Valica) 38.3 148 [[[[image:proposal9xCK.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:proposal9xCK.png]]
Ecaterina Moraru (Valica) 37.2 149 )))
150 )))
Ecaterina Moraru (Valica) 40.2 151
152
153 (% class="row" %)
154 (((
155 (% class="col-xs-12 col-sm-4" %)
156 (((
Ecaterina Moraru (Valica) 41.3 157 == Proposal 10.x ==
Ecaterina Moraru (Valica) 40.2 158
Ecaterina Moraru (Valica) 41.2 159 * Make the buttons visible in a fixed bottom bar
160 * Integrate all functionality on a single row
161
Ecaterina Moraru (Valica) 40.2 162 * Problematic:
163 ** Responsive
Ecaterina Moraru (Valica) 49.2 164 ** Inline mode (current, full width or just content width?)
165
166 * Carefull on:
167 ** Full Screen mode
Ecaterina Moraru (Valica) 49.3 168 ** Objects and Class edit modes
Ecaterina Moraru (Valica) 49.2 169 ** Cross browser
Ecaterina Moraru (Valica) 49.4 170 ** Styling between edit modes
Ecaterina Moraru (Valica) 40.2 171 )))
172
173 (% class="col-xs-12 col-sm-4" %)
174 (((
175 Before
Ecaterina Moraru (Valica) 40.4 176 [[image:attach:before10.png]]
Ecaterina Moraru (Valica) 40.2 177 )))
178
179 (% class="col-xs-12 col-sm-4" %)
180 (((
181 After
Ecaterina Moraru (Valica) 43.2 182
183 {{gallery}}
184 image:after10.png
185 image:after10Full.png
Ecaterina Moraru (Valica) 47.2 186 image:after10Inline2.png
Ecaterina Moraru (Valica) 43.3 187 image:after10Inline.png
Ecaterina Moraru (Valica) 45.2 188 image:after10FullScreen.png
Ecaterina Moraru (Valica) 43.4 189 image:after10Tablet.png
190 image:after10Mobile.png
Ecaterina Moraru (Valica) 43.2 191 {{/gallery}}
Ecaterina Moraru (Valica) 40.2 192 )))
193 )))

Get Connected