Wiki source code of Flamingo (4.x) Skin Proposal
Version 10.13 by Ecaterina Valica on 2013/09/23 09:59
Show last authors
author | version | line-number | content |
---|---|---|---|
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'%)((())) |