Last modified by Ecaterina Moraru on 2013/11/13 12:50
From version 10.13
edited by Ecaterina Valica
on 2013/09/23 09:59
Change comment: There is no comment for this version
To 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

Summary

Details

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