Last modified by Ecaterina Moraru on 2013/11/13 12:50
From version 11.1
edited by Ecaterina Moraru
on 2013/11/13 12:50
Change comment: Moved page to http://design.xwiki.org/xwiki/bin/view/Improvements/Skin4x
To version 10.13
edited by Ecaterina Valica
on 2013/09/23 09:59
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.risherry
1 +XWiki.evalica
Content
... ... @@ -1,1 +1,253 @@
1 -{{warning}}Moved to [[design.xwiki.org:Improvements.Skin4x>>http://design.xwiki.org/xwiki/bin/view/Improvements/Skin4x]]{{/warning}}
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'%)((()))