Wiki source code of Flamingo (4.x) Skin Proposal

Version 10.13 by Ecaterina Valica on 2013/09/23 09:59
Show last authors
1 {{velocity}}
2 $xwiki.ssx.use("Improvements.WebHome")
3 $xwiki.ssx.use("Standards.WebHome")
4 {{/velocity}}
5
6 == Demos & Other Implementations ==
7
8 {{warning}}
9 Denis Gervalle worked on an experimental [[demo skin>>BluebirdSkin.WebHome]] based on this proposal.
10 Jerome Velociter has the [[Lyrebird skin>>http://extensions.xwiki.org/xwiki/bin/view/Extension/Lyrebird+Skin]] created also with Bootstrap.
11 {{/warning}}
12
13 == Community Feedback ==
14
15 {{info}}
16 [Brainstorming] Sources of HTML and ability to use pre-made CSS like Bootstrap http://xwiki.markmail.org/thread/shd55qxt7w56ypy3
17 [Brainstorming] Choose a name for our next skin http://markmail.org/thread/nqpnvmzffe5w6oe6
18 [UX][Proposal] Skin 4.x http://xwiki.markmail.org/thread/mo5ntmxeawnn5p6c
19 {{/info}}
20
21 (% class="left column50 dashboardleft" style="width: 48%; min-width: 640px; margin-right: 2%;" %)
22 (((
23
24 === Objective ===
25
26 This proposal is focused on presenting ideas for a new XWiki skin.
27 The skin is focused on the usage of applications and also proposes some changes on menu structure, panels listing per application, some applications are restyled or improved; all these changes being done on a responsive layout (based on [[Bootstrap>>http://twitter.github.com/bootstrap/]]).
28
29 {{jiraIssues}}
30 XWIKI-378,
31 XWIKI-1342
32 {{/jiraIssues}}
33
34 )))
35
36 (% class="dashboardright left column50 " style="width:49%" %)
37 (((
38
39 === Proposal ===
40
41 {{toc start='4'/}}
42
43 * Related: [[Create Step Improvements>>CreateImprovements]]
44
45 )))
46
47 (%class='clearfloats'%)((()))
48
49 (% class="left column50 dashboardleft" style="width: 48%; min-width: 640px; margin-right: 2%;" %)
50 (((
51
52 (% class=""%)
53 (((
54
55 ==== Annotations Overview ====
56
57 {{gallery}}
58 image:loginDesktopSnapshotAnnotations.png
59 image:loginDesktopDetails.png
60 image:homepageDesktopSnapshot.png
61 image:homepageDesktopSnapshotAnnotationsOverview.png
62 image:homepageDesktopSnapshotAnnotationsMenu1.png
63 image:homepageDesktopSnapshotAnnotationsMenu2.png
64 image:homepageDesktopSnapshotAnnotationsMenu3.png
65 image:homepageDesktopSnapshotAnnotationsMenu4.png
66 image:homepageDesktopSnapshotAnnotationsMenu5.png
67 image:homepageDesktopSnapshotAnnotationsMenu6.png
68 image:homepageDesktopSnapshotAnnotationsMenu7.png
69 image:profileDesktopSnapshot.png
70 image:profileDesktopSnapshotAnnotations.png
71 image:profileDesktopSnapshotAnnotationsPanels.png
72 image:profileDesktopSnapshotAnnotationsPanels1.png
73 image:profileDesktopSnapshotAnnotationsPanels2.png
74 image:profileDesktopSnapshotAnnotationsAppBar.png
75 image:administrationDesktopSnapshot.png
76 image:administrationDesktopSnapshotAnnotations.png
77 image:appWithinMinutesDesktopSnapshot.png
78 image:appWithinMinutesDesktopSnapshotAnnotations.png
79 image:userDirectoryDesktopSnapshot.png
80 image:userDirectoryDesktopSnapshotAnnotations.png
81 image:documentIndexDesktopSnapshot.png
82 image:documentIndexDesktopSnapshotAnnotations.png
83 image:dashboardDesktopSnapshot.png
84 image:dashboardDesktopSnapshotAnnotations.png
85 image:dashboardDesktopSnapshotAnnotationsStandard.png
86 image:blogDesktopSnapshot.png
87 image:blogDesktopSnapshotAnnotations.png
88 image:helpDesktopSnapshot.png
89 image:helpDesktopSnapshotAnnotations.png
90 image:pageExample2DesktopSnapshot.png
91 image:pageExample3DesktopSnapshotComments.png
92 image:pageExample3DesktopSnapshotCommentsAnnotations.png
93 image:pageExample3DesktopSnapshotAttachments.png
94 image:pageExample3DesktopSnapshotAttachmentsAnnotations.png
95 image:pageExample1DesktopSnapshot.png
96 image:editDesktopSnapshot.png
97 image:editDesktopSnapshotAnnotations.png
98 image:commentsDesktopSnapshot.png
99 image:attachmentsDesktopSnapshot.png
100 image:historyDesktopSnapshot.png
101 image:Skin4xMenus@menusDetails.png
102 image:Skin4xMenus@menusSnapshotActivators.png
103 image:Skin4xMenus@menusAppBarAnnotations.png
104 image:Skin4xMenus@menusMenuAnnotations.png
105 image:Skin4xMenus@dashboardPhoneLandscapeMenu.png
106 image:Skin4xMenus@dashboardPhonePortraitMenu.png
107 {{/gallery}}
108
109 (%class='clearfloats'%)((()))
110 )))
111
112 (% class=""%)
113 (((
114
115 ==== Simple Overview ====
116
117 {{gallery}}
118 image:loginDesktopDetails.png
119 image:homepageDesktopSnapshot.png
120 image:profileDesktopSnapshot.png
121 image:administrationDesktopSnapshot.png
122 image:appWithinMinutesDesktopSnapshot.png
123 image:userDirectoryDesktopSnapshot.png
124 image:documentIndexDesktopSnapshot.png
125 image:dashboardDesktopSnapshot.png
126 image:blogDesktopSnapshot.png
127 image:helpDesktopSnapshot.png
128 image:pageExample1DesktopSnapshot.png
129 image:editDesktopSnapshot.png
130 image:commentsDesktopSnapshot.png
131 image:attachmentsDesktopSnapshot.png
132 image:historyDesktopSnapshot.png
133 image:Skin4xMenus@dashboardPhoneLandscapeMenu.png
134 image:Skin4xMenus@dashboardPhonePortraitMenu.png
135 {{/gallery}}
136
137 (%class='clearfloats'%)((()))
138 )))
139
140 )))
141
142 (% class="dashboardright left column50 " style="width:49%" %)
143 (((
144
145 ==== Components ====
146
147 (% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
148 (((
149 [[Login>>Skin4xLogin]]
150 [[[[image:loginDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xLogin]]
151 )))
152
153 (% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
154 (((
155 [[Homepage>>Skin4xHomepage]]
156 [[[[image:homepageDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xHomepage]]
157 )))
158
159 (% class="left column33 dashboardright" style="width: 29%;"%)
160 (((
161 [[Profile>>Skin4xProfile]]
162 [[[[image:profileDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xProfile]]
163 )))
164
165 (%class='clearfloats'%)((()))
166
167 (% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
168 (((
169 [[Administration>>Skin4xAdministration]]
170 [[[[image:administrationDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xAdministration]]
171 )))
172
173 (% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
174 (((
175 [[AppWithinMinutes>>Skin4xAppWithinMinutes]]
176 [[[[image:appWithinMinutesDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xAppWithinMinutes]]
177 )))
178
179 (% class="left column33 dashboardright" style="width: 29%;"%)
180 (((
181 [[User Directory>>Skin4xUserDirectory]]
182 [[[[image:userDirectoryDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xUserDirectory]]
183 )))
184
185 (%class='clearfloats'%)((()))
186
187 (% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
188 (((
189 [[Document Index>>Skin4xDocumentIndex]]
190 [[[[image:documentIndexDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xDocumentIndex]]
191 )))
192
193 (% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
194 (((
195 [[Dashboard>>Skin4xDashboard]]
196 [[[[image:dashboardDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xDashboard]]
197 )))
198
199 (% class="left column33 dashboardright" style="width: 29%;"%)
200 (((
201 [[Blog>>Skin4xBlog]]
202 [[[[image:blogDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xBlog]]
203 )))
204
205 (%class='clearfloats'%)((()))
206
207 (% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
208 (((
209 [[Help Center>>HelpCenter]] ([[v2>>attach:helpDesktopDetails.png]])
210 [[[[image:helpDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>HelpCenter]]
211 )))
212
213 (% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
214 (((
215 [[Page View>>Skin4xPageView]]
216 [[[[image:pageExample1DesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xPageView]]
217 )))
218
219 (% class="left column33 dashboardleft" style="width: 29%;" %)
220 (((
221 [[Page Edit>>CollaborativeEditing]] ([[v2>>attach:editDesktopDetails.png]])
222 [[[[image:editDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>CollaborativeEditing]]
223 )))
224
225 (%class='clearfloats'%)((()))
226
227 (% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
228 (((
229 [[Page Comments>>Skin4xPageComments]]
230 [[[[image:commentsDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xPageComments]]
231 )))
232
233 (% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
234 (((
235 [[Page Attachments>>Skin4xPageAttachments]]
236 [[[[image:attachmentsDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xPageAttachments]]
237 )))
238
239 (% class="left column33 dashboardright" style="width: 29%;"%)
240 (((
241 [[Page History>>Skin4xPageHistory]]
242 [[[[image:historyDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xPageHistory]]
243 )))
244
245 (%class='clearfloats'%)((()))
246
247 (% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
248 (((
249 [[Menus>>Skin4xMenus]]
250 [[[[image:menusSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xMenus]]
251 )))
252
253 (%class='clearfloats'%)((()))