Changes for page Flamingo (4.x) Skin Proposal
Last modified by Ecaterina Moraru on 2013/11/13 12:50
From version 10.8
edited by Ecaterina Valica
on 2013/04/29 12:08
on 2013/04/29 12:08
Change comment:
There is no comment for this version
To version 11.1
edited by Ecaterina Moraru
on 2013/11/13 12:50
on 2013/11/13 12:50
Change comment:
Moved page to http://design.xwiki.org/xwiki/bin/view/Improvements/Skin4x
Summary
-
Page properties (2 modified, 0 added, 0 removed)
-
Objects (0 modified, 1 added, 0 removed)
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 -XWiki. evalica1 +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