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