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.12
edited by Ecaterina Valica
on 2013/04/29 12:15
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,248 @@
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 +)))
30 +
31 +(% class="dashboardright left column50 " style="width:49%" %)
32 +(((
33 +
34 +=== Proposal ===
35 +
36 +{{toc start='4'/}}
37 +
38 +* Related: [[Create Step Improvements>>CreateImprovements]]
39 +
40 +)))
41 +
42 +(%class='clearfloats'%)((()))
43 +
44 +(% class="left column50 dashboardleft" style="width: 48%; min-width: 640px; margin-right: 2%;" %)
45 +(((
46 +
47 +(% class=""%)
48 +(((
49 +
50 +==== Annotations Overview ====
51 +
52 +{{gallery}}
53 +image:loginDesktopSnapshotAnnotations.png
54 +image:loginDesktopDetails.png
55 +image:homepageDesktopSnapshot.png
56 +image:homepageDesktopSnapshotAnnotationsOverview.png
57 +image:homepageDesktopSnapshotAnnotationsMenu1.png
58 +image:homepageDesktopSnapshotAnnotationsMenu2.png
59 +image:homepageDesktopSnapshotAnnotationsMenu3.png
60 +image:homepageDesktopSnapshotAnnotationsMenu4.png
61 +image:homepageDesktopSnapshotAnnotationsMenu5.png
62 +image:homepageDesktopSnapshotAnnotationsMenu6.png
63 +image:homepageDesktopSnapshotAnnotationsMenu7.png
64 +image:profileDesktopSnapshot.png
65 +image:profileDesktopSnapshotAnnotations.png
66 +image:profileDesktopSnapshotAnnotationsPanels.png
67 +image:profileDesktopSnapshotAnnotationsPanels1.png
68 +image:profileDesktopSnapshotAnnotationsPanels2.png
69 +image:profileDesktopSnapshotAnnotationsAppBar.png
70 +image:administrationDesktopSnapshot.png
71 +image:administrationDesktopSnapshotAnnotations.png
72 +image:appWithinMinutesDesktopSnapshot.png
73 +image:appWithinMinutesDesktopSnapshotAnnotations.png
74 +image:userDirectoryDesktopSnapshot.png
75 +image:userDirectoryDesktopSnapshotAnnotations.png
76 +image:documentIndexDesktopSnapshot.png
77 +image:documentIndexDesktopSnapshotAnnotations.png
78 +image:dashboardDesktopSnapshot.png
79 +image:dashboardDesktopSnapshotAnnotations.png
80 +image:dashboardDesktopSnapshotAnnotationsStandard.png
81 +image:blogDesktopSnapshot.png
82 +image:blogDesktopSnapshotAnnotations.png
83 +image:helpDesktopSnapshot.png
84 +image:helpDesktopSnapshotAnnotations.png
85 +image:pageExample2DesktopSnapshot.png
86 +image:pageExample3DesktopSnapshotComments.png
87 +image:pageExample3DesktopSnapshotCommentsAnnotations.png
88 +image:pageExample3DesktopSnapshotAttachments.png
89 +image:pageExample3DesktopSnapshotAttachmentsAnnotations.png
90 +image:pageExample1DesktopSnapshot.png
91 +image:editDesktopSnapshot.png
92 +image:editDesktopSnapshotAnnotations.png
93 +image:commentsDesktopSnapshot.png
94 +image:attachmentsDesktopSnapshot.png
95 +image:historyDesktopSnapshot.png
96 +image:Skin4xMenus@menusDetails.png
97 +image:Skin4xMenus@menusSnapshotActivators.png
98 +image:Skin4xMenus@menusAppBarAnnotations.png
99 +image:Skin4xMenus@menusMenuAnnotations.png
100 +image:Skin4xMenus@dashboardPhoneLandscapeMenu.png
101 +image:Skin4xMenus@dashboardPhonePortraitMenu.png
102 +{{/gallery}}
103 +
104 +(%class='clearfloats'%)((()))
105 +)))
106 +
107 +(% class=""%)
108 +(((
109 +
110 +==== Simple Overview ====
111 +
112 +{{gallery}}
113 +image:loginDesktopDetails.png
114 +image:homepageDesktopSnapshot.png
115 +image:profileDesktopSnapshot.png
116 +image:administrationDesktopSnapshot.png
117 +image:appWithinMinutesDesktopSnapshot.png
118 +image:userDirectoryDesktopSnapshot.png
119 +image:documentIndexDesktopSnapshot.png
120 +image:dashboardDesktopSnapshot.png
121 +image:blogDesktopSnapshot.png
122 +image:helpDesktopSnapshot.png
123 +image:pageExample1DesktopSnapshot.png
124 +image:editDesktopSnapshot.png
125 +image:commentsDesktopSnapshot.png
126 +image:attachmentsDesktopSnapshot.png
127 +image:historyDesktopSnapshot.png
128 +image:Skin4xMenus@dashboardPhoneLandscapeMenu.png
129 +image:Skin4xMenus@dashboardPhonePortraitMenu.png
130 +{{/gallery}}
131 +
132 +(%class='clearfloats'%)((()))
133 +)))
134 +
135 +)))
136 +
137 +(% class="dashboardright left column50 " style="width:49%" %)
138 +(((
139 +
140 +==== Components ====
141 +
142 +(% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
143 +(((
144 +[[Login>>Skin4xLogin]]
145 +[[[[image:loginDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xLogin]]
146 +)))
147 +
148 +(% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
149 +(((
150 +[[Homepage>>Skin4xHomepage]]
151 +[[[[image:homepageDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xHomepage]]
152 +)))
153 +
154 +(% class="left column33 dashboardright" style="width: 29%;"%)
155 +(((
156 +[[Profile>>Skin4xProfile]]
157 +[[[[image:profileDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xProfile]]
158 +)))
159 +
160 +(%class='clearfloats'%)((()))
161 +
162 +(% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
163 +(((
164 +[[Administration>>Skin4xAdministration]]
165 +[[[[image:administrationDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xAdministration]]
166 +)))
167 +
168 +(% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
169 +(((
170 +[[AppWithinMinutes>>Skin4xAppWithinMinutes]]
171 +[[[[image:appWithinMinutesDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xAppWithinMinutes]]
172 +)))
173 +
174 +(% class="left column33 dashboardright" style="width: 29%;"%)
175 +(((
176 +[[User Directory>>Skin4xUserDirectory]]
177 +[[[[image:userDirectoryDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xUserDirectory]]
178 +)))
179 +
180 +(%class='clearfloats'%)((()))
181 +
182 +(% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
183 +(((
184 +[[Document Index>>Skin4xDocumentIndex]]
185 +[[[[image:documentIndexDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xDocumentIndex]]
186 +)))
187 +
188 +(% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
189 +(((
190 +[[Dashboard>>Skin4xDashboard]]
191 +[[[[image:dashboardDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xDashboard]]
192 +)))
193 +
194 +(% class="left column33 dashboardright" style="width: 29%;"%)
195 +(((
196 +[[Blog>>Skin4xBlog]]
197 +[[[[image:blogDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xBlog]]
198 +)))
199 +
200 +(%class='clearfloats'%)((()))
201 +
202 +(% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
203 +(((
204 +[[Help Center>>HelpCenter]] ([[v2>>attach:helpDesktopDetails.png]])
205 +[[[[image:helpDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>HelpCenter]]
206 +)))
207 +
208 +(% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
209 +(((
210 +[[Page View>>Skin4xPageView]]
211 +[[[[image:pageExample1DesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xPageView]]
212 +)))
213 +
214 +(% class="left column33 dashboardleft" style="width: 29%;" %)
215 +(((
216 +[[Page Edit>>CollaborativeEditing]] ([[v2>>attach:editDesktopDetails.png]])
217 +[[[[image:editDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>CollaborativeEditing]]
218 +)))
219 +
220 +(%class='clearfloats'%)((()))
221 +
222 +(% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
223 +(((
224 +[[Page Comments>>Skin4xPageComments]]
225 +[[[[image:commentsDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xPageComments]]
226 +)))
227 +
228 +(% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
229 +(((
230 +[[Page Attachments>>Skin4xPageAttachments]]
231 +[[[[image:attachmentsDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xPageAttachments]]
232 +)))
233 +
234 +(% class="left column33 dashboardright" style="width: 29%;"%)
235 +(((
236 +[[Page History>>Skin4xPageHistory]]
237 +[[[[image:historyDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xPageHistory]]
238 +)))
239 +
240 +(%class='clearfloats'%)((()))
241 +
242 +(% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
243 +(((
244 +[[Menus>>Skin4xMenus]]
245 +[[[[image:menusSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xMenus]]
246 +)))
247 +
248 +(%class='clearfloats'%)((()))