Wiki source code of Macaw Skin
Last modified by Vincent Massol on 2024/11/19 16:14
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | Macaw Skin's purpose is to showcase ideas about our menus/actions organisation, integrated inside a mobile-oriented skin. | ||
| 2 | |||
| 3 | = Proposal = | ||
| 4 | |||
| 5 | {{toc start="2"/}} | ||
| 6 | |||
| 7 | (%class="table table-bordered"%) | ||
| 8 | |(%width='20%'%)**Context**|(%colspan='2'%)There are users that complain that XWiki's menus are hard to use, being very complex and displaying a lot of options. | ||
| 9 | |(%rowspan='2'%)**Proposal Conclusions**|{{success}}Pros{{/success}} Reduced clutter, focusing on most used actions|{{error}}Cons{{/error}} In order to achieve a certain action the user might require 2+ clicks | ||
| 10 | |{{success}}Pros{{/success}} Optimised for mobile devices|{{error}}Cons{{/error}} Since not all actions are displayed at a certain moment, the user needs to change the context in order to launch a certain action | ||
| 11 | |||
| 12 | Disclaimer: | ||
| 13 | * This is not a skin for developer usage. It's purpose is to be as simple as possible to be used, focusing on the main action that can be done on a particular page. | ||
| 14 | * Development should be done on Flamingo skin or another skin that is not hiding complex actions under multiple user clicks. Another solution would be to activate a development custom menu that contains actions like: edit rights, edit class, edit objects, etc. | ||
| 15 | |||
| 16 | Navigation: | ||
| 17 | * Actions for a certain type of entity will be done on the entity page. example: if you want to delete a space, the action will not be displayed in the actionmenu, but it will available in the Spaces Index menus. | ||
| 18 | * The rationale behind is that: we put emphasis on often user actions, hiding the seldom actions. | ||
| 19 | |||
| 20 | (% class="row" %) | ||
| 21 | ((( | ||
| 22 | (% class="col-xs-12" %) | ||
| 23 | ((( | ||
| 24 | == Overview == | ||
| 25 | ))) | ||
| 26 | |||
| 27 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 28 | ((( | ||
| 29 | Desktop View | ||
| 30 | [[{{image reference="overviewDesktop.png" width="100%"/}}>>attach:overviewDesktop.png]] | ||
| 31 | ))) | ||
| 32 | |||
| 33 | (% class="col-xs-12 col-sm-6 col-md-4" %) | ||
| 34 | ((( | ||
| 35 | Tablet View | ||
| 36 | [[{{image reference="overviewTablet.png" width="100%"/}}>>attach:overviewTablet.png]] | ||
| 37 | ))) | ||
| 38 | |||
| 39 | (% class="col-xs-6 col-sm-6 col-md-2" %) | ||
| 40 | ((( | ||
| 41 | Mobile View | ||
| 42 | [[{{image reference="overviewMobile.png" width="100%"/}}>>attach:overviewMobile.png]] | ||
| 43 | ))) | ||
| 44 | ))) | ||
| 45 | |||
| 46 | |||
| 47 | (% class="row" %) | ||
| 48 | ((( | ||
| 49 | (% class="col-xs-12" %) | ||
| 50 | ((( | ||
| 51 | == Global Menu == | ||
| 52 | |||
| 53 | (%class="table table-bordered"%) | ||
| 54 | |(%rowspan='2' width='20%'%)**Purpose**|Simplify the available actions in the global menu | ||
| 55 | |Place the main global actions in a drawer navigation | ||
| 56 | ))) | ||
| 57 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 58 | ((( | ||
| 59 | Drawer Activator | ||
| 60 | [[{{image reference="global1.png" width="100%"/}}>>attach:global1.png]] | ||
| 61 | [[{{image reference="global4.png" width="100%"/}}>>attach:global4.png]] | ||
| 62 | |||
| 63 | Search Activator | ||
| 64 | [[{{image reference="global2.png" width="100%"/}}>>attach:global2.png]] | ||
| 65 | [[{{image reference="global3.png" width="100%"/}}>>attach:global3.png]] | ||
| 66 | ))) | ||
| 67 | |||
| 68 | (% class="col-xs-12 col-sm-6 col-md-4" %) | ||
| 69 | ((( | ||
| 70 | Drawer - Tablet View | ||
| 71 | [[{{image reference="drawerTablet.png" width="100%"/}}>>attach:drawerTablet.png]] | ||
| 72 | ))) | ||
| 73 | |||
| 74 | (% class="col-xs-6 col-sm-6 col-md-2" %) | ||
| 75 | ((( | ||
| 76 | [[{{image reference="drawer.png" width="100%"/}}>>attach:drawer.png]] | ||
| 77 | ))) | ||
| 78 | ))) | ||
| 79 | |||
| 80 | (% class="row" %) | ||
| 81 | ((( | ||
| 82 | (% class="col-xs-12" %) | ||
| 83 | ((( | ||
| 84 | == Primary Action == | ||
| 85 | |||
| 86 | (%class="table table-bordered"%) | ||
| 87 | |(%rowspan='2' width='20%'%)**Purpose**|Easily identify the primary-action | ||
| 88 | |Adjust the primary-action depending on the context | ||
| 89 | |(%rowspan='4' width='20%'%)**Notes**|By default, the primary-action could be 'Edit' | ||
| 90 | |(((An additional rule could be: | ||
| 91 | * all children-pages have 'Edit' as primary-action, | ||
| 92 | * while parents-pages have 'Add' as primary-action))) | ||
| 93 | |Application developers would overwrite the default primary-actions using an extension point | ||
| 94 | |(((Allow shifting primary-action's type depending on user's status (registered, hasRight). | ||
| 95 | Alternative option: don't have a primary-action))) | ||
| 96 | ))) | ||
| 97 | |||
| 98 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 99 | ((( | ||
| 100 | Edit Page | ||
| 101 | [[{{image reference="primary-EditPage.png" width="100%"/}}>>attach:primary-EditPage.png]] | ||
| 102 | ))) | ||
| 103 | |||
| 104 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 105 | ((( | ||
| 106 | Add User | ||
| 107 | [[{{image reference="primary-AddUser.png" width="100%"/}}>>attach:primary-AddUser.png]] | ||
| 108 | ))) | ||
| 109 | |||
| 110 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 111 | ((( | ||
| 112 | Install Extension | ||
| 113 | [[{{image reference="primary-InstallExtension.png" width="100%"/}}>>attach:primary-InstallExtension.png]] | ||
| 114 | ))) | ||
| 115 | |||
| 116 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 117 | ((( | ||
| 118 | Join Wiki | ||
| 119 | [[{{image reference="primary-JoinWiki.png" width="100%"/}}>>attach:primary-JoinWiki.png]] | ||
| 120 | ))) | ||
| 121 | ))) | ||
| 122 | (% class="row" %) | ||
| 123 | ((( | ||
| 124 | (% class="col-xs-12" %) | ||
| 125 | ((( | ||
| 126 | == Content Menu == | ||
| 127 | |||
| 128 | (%class="table table-bordered"%) | ||
| 129 | |(%rowspan='2' width='20%'%)**Purpose**|Provide page related actions | ||
| 130 | |Depending on the context, adjust the menu content | ||
| 131 | ))) | ||
| 132 | (% class="col-xs-12 col-sm-6 col-md-6" %) | ||
| 133 | ((( | ||
| 134 | Desktop View | ||
| 135 | [[{{image reference="contentDesktop.png" width="100%"/}}>>attach:contentDesktop.png]] | ||
| 136 | ))) | ||
| 137 | |||
| 138 | (% class="col-xs-12 col-sm-6 col-md-3" %) | ||
| 139 | ((( | ||
| 140 | View Mode | ||
| 141 | [[{{image reference="contentView.png"/}}>>attach:contentView.png]] | ||
| 142 | ))) | ||
| 143 | |||
| 144 | (% class="col-xs-12 col-sm-6 col-md-3" %) | ||
| 145 | ((( | ||
| 146 | Edit Mode | ||
| 147 | [[{{image reference="contentEdit.png"/}}>>attach:contentEdit.png]] | ||
| 148 | ))) | ||
| 149 | ))) |
