Wiki source code of Idea: Visible Save

Last modified by Ecaterina Moraru (Valica) on 2018/11/29 13:12

Show last authors
1 {{toc start="2"/}}
2
3 (% class="row" %)
4 (((
5 (% class="col-xs-12 col-sm-6" %)
6 (((
7 == Requirement ==
8
9 > Save button more visible
10
11 == Need ==
12
13 * C: The Save button is not always visible when editing and people need to scroll to find it
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
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
19
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
25 == Solutions ==
26
27 === Solution 1 ===
28
29 * Adjust the height of the editor
30
31 ==== Solution 1.1 ====
32
33 * Reduce the height of the editor area. Currently CkEditor is using 500px.
34
35 ==== Solution 1.2 ====
36
37 {{jira url="https://jira.xwiki.org" style="list"}}
38 XWIKI-1460
39 {{/jira}}
40
41 === Solution 2 ===
42
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
45
46 === Solution 3 ===
47
48 * Create a fixed-bottom area for buttons in edit mode that doesn't change position
49 {{jira url="https://jira.xwiki.org" style="list"}}XWIKI-14162{{/jira}}
50 )))
51
52 (% class="col-xs-12 col-sm-6" %)
53 (((
54 == Variants ==
55
56 (% class="row" %)
57 (((
58 (% class="col-xs-6" %)
59 (((
60 Before
61 [[[[image:before.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:before.png]]
62 )))
63
64 (% class="col-xs-6" %)
65 (((
66 After
67 [[[[image:after.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:after.png]]
68 )))
69 )))
70
71 Changes:
72
73 * Make the buttons visible when they are out of viewport
74 ** [[Bootstrap Affix>>http://getbootstrap.com/javascript/#affix]] can be used for the scrolling effect
75 * When the user scrolls down, the bar goes into its place
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
79 * Adapt for FullScreen and Mobile views
80
81 {{gallery}}
82 image:bottomBar.png
83 image:smallViewPort.png
84 image:after.png
85 image:fullScreen.png
86 image:wikiEditor.png
87 image:mobile.png
88 {{/gallery}}
89
90
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">
97 Iterations
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">
103 [[[[image:1.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:1.png]]
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]]
113 </div>
114 </div>
115 </div>
116 </div>
117 {{/html}}
118 )))
119 )))
120
121 (% class="row" %)
122 (((
123 (% class="col-xs-4" %)
124 (((
125 Var A
126 [[[[image:varA.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:varA.png]]
127 )))
128
129 (% class="col-xs-4" %)
130 (((
131 Var B
132 [[[[image:varB.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:varB.png]]
133 )))
134
135 (% class="col-xs-4" %)
136 (((
137 Var C
138 [[[[image:varC.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:varC.png]]
139 )))
140 )))
141
142 (% class="row" %)
143 (((
144 (% class="col-xs-12 col-sm-4" %)
145 (((
146 == Proposal 9.x ==
147
148 [[[[image:proposal9xCK.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:proposal9xCK.png]]
149 )))
150 )))
151
152
153 (% class="row" %)
154 (((
155 (% class="col-xs-12 col-sm-4" %)
156 (((
157 == Proposal 10.x ==
158
159 * Make the buttons visible in a fixed bottom bar
160 * Integrate all functionality on a single row
161
162 * Problematic:
163 ** Responsive
164 ** Inline mode (current, full width or just content width?)
165
166 * Carefull on:
167 ** Full Screen mode
168 ** Objects and Class edit modes
169 ** Cross browser
170 ** Styling between edit modes
171 )))
172
173 (% class="col-xs-12 col-sm-4" %)
174 (((
175 Before
176 [[image:attach:before10.png]]
177 )))
178
179 (% class="col-xs-12 col-sm-4" %)
180 (((
181 After
182
183 {{gallery}}
184 image:after10.png
185 image:after10Full.png
186 image:after10Inline2.png
187 image:after10Inline.png
188 image:after10FullScreen.png
189 image:after10Tablet.png
190 image:after10Mobile.png
191 {{/gallery}}
192 )))
193 )))

Get Connected