[xwiki-devs] [UX][Proposal] Skin 4.x
Hi devs, I've been working in the 4.3 Roadmap for a new skin proposal. You can see it at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4x I recommend looking at the "Annotations Overview" gallery in order to see the different elements of the skin and some explanations. I've made also separate pages for different components of the skin. For example, you can see more information about how the menus work at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenus For each component you can also see how the elements scale and see the responsive layout. For the record, the proposal is made by using Bootstrap ( http://twitter.github.com/bootstrap/). Thanks, Caty
Wow! Visually it's stunning, where do I download it :) I don't know if the side bars have to be always be present otherwise +++++1 -Fabio On Thu, Nov 8, 2012 at 5:59 PM, Ecaterina Moraru (Valica) <[email protected]
wrote:
Hi devs,
I've been working in the 4.3 Roadmap for a new skin proposal. You can see it at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4x
I recommend looking at the "Annotations Overview" gallery in order to see the different elements of the skin and some explanations.
I've made also separate pages for different components of the skin. For example, you can see more information about how the menus work at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenus
For each component you can also see how the elements scale and see the responsive layout. For the record, the proposal is made by using Bootstrap ( http://twitter.github.com/bootstrap/).
Thanks, Caty _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
On Thu, Nov 8, 2012 at 8:54 PM, Fabio Mancinelli <[email protected]
wrote:
Wow!
Visually it's stunning, where do I download it :)
I don't know if the side bars have to be always be present otherwise +++++1
In http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenusslide 10 to slide 21 from the Overview Gallery, I present a mechanism to hide the AppBar and the Panels. It was intended for phones and tablets, but we could make it also for Desktops. http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4xMenus/men... http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4xMenus/men... http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4xMenus/men... Thanks, Caty
-Fabio
On Thu, Nov 8, 2012 at 5:59 PM, Ecaterina Moraru (Valica) < [email protected]
wrote:
Hi devs,
I've been working in the 4.3 Roadmap for a new skin proposal. You can see it at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4x
I recommend looking at the "Annotations Overview" gallery in order to see the different elements of the skin and some explanations.
I've made also separate pages for different components of the skin. For example, you can see more information about how the menus work at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenus
For each component you can also see how the elements scale and see the responsive layout. For the record, the proposal is made by using Bootstrap ( http://twitter.github.com/bootstrap/).
Thanks, Caty _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
Caty, This is great. I'm very looking forward this. Some remarks : - The skin will break the system of panels (in particular the panel wizard), since there is no left panel anymore. For me this is not a problem, we just have to agree on that. - I think it would be a good time to think about the introduction of a pre-processor like LESS to ease the customization/derivation of such a skin. (BTW bootstrap itself uses LESS for that purpose). - This will be also be a good time to re-work and generally harmonize the markup of some UI components. Any timeline for the implementation ? Definitely +1 Thanks, Jerome On 11/08/2012 05:59 PM, Ecaterina Moraru (Valica) wrote:
Hi devs,
I've been working in the 4.3 Roadmap for a new skin proposal. You can see it at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4x
I recommend looking at the "Annotations Overview" gallery in order to see the different elements of the skin and some explanations.
I've made also separate pages for different components of the skin. For example, you can see more information about how the menus work at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenus
For each component you can also see how the elements scale and see the responsive layout. For the record, the proposal is made by using Bootstrap ( http://twitter.github.com/bootstrap/).
Thanks, Caty _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
On Thu, Nov 8, 2012 at 10:00 PM, Jerome Velociter <[email protected]>wrote:
Caty,
This is great. I'm very looking forward this.
Some remarks :
- The skin will break the system of panels (in particular the panel wizard), since there is no left panel anymore. For me this is not a problem, we just have to agree on that. - I think it would be a good time to think about the introduction of a pre-processor like LESS to ease the customization/derivation of such a skin. (BTW bootstrap itself uses LESS for that purpose). - This will be also be a good time to re-work and generally harmonize the markup of some UI components.
Any timeline for the implementation ?
The implementation could be decided for the 5.x timeline, but we need to find a main developer to be in charge of this and really evaluate the amount of work needed. There are several implementation decision that needs to be voted if we decide to go with this skin, like you said panels, menus, administration layout, rewriting some application's layout, etc. Regarding LESS, Bootstrap works with LESS (both server and client side) and there is also another project that replaces LESS with Sass to work with Bootstrap. This is another implementation decision, since we could adopt LESS or even Bootstrap or just make a separation of skins, by having a really "base"/"core"/"api" skin (that in general should contain just the basis, like typography, grids, reset, forms, etc. and that we would need to write) and another skin on top of it (that should define the layout, skin colors and additional styling) that could be more easily changed. We could use LESS or just expand our velocity macros (to have more 'mixins' like functionality) and more "ColorThemes"/"Skin" variables. Thanks, Caty
Definitely +1
Thanks, Jerome
On 11/08/2012 05:59 PM, Ecaterina Moraru (Valica) wrote:
Hi devs,
I've been working in the 4.3 Roadmap for a new skin proposal. You can see it at http://incubator.myxwiki.org/**xwiki/bin/view/Improvements/**Skin4x<http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4x>
I recommend looking at the "Annotations Overview" gallery in order to see the different elements of the skin and some explanations.
I've made also separate pages for different components of the skin. For example, you can see more information about how the menus work at http://incubator.myxwiki.org/**xwiki/bin/view/Improvements/**Skin4xMenus<http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenus>
For each component you can also see how the elements scale and see the responsive layout. For the record, the proposal is made by using Bootstrap ( http://twitter.github.com/**bootstrap/<http://twitter.github.com/bootstrap/> ).
Thanks, Caty ______________________________**_________________ devs mailing list [email protected] http://lists.xwiki.org/**mailman/listinfo/devs<http://lists.xwiki.org/mailman/listinfo/devs>
______________________________**_________________ devs mailing list [email protected] http://lists.xwiki.org/**mailman/listinfo/devs<http://lists.xwiki.org/mailman/listinfo/devs>
On 11/09/2012 10:46 AM, Ecaterina Moraru (Valica) wrote:
On Thu, Nov 8, 2012 at 10:00 PM, Jerome Velociter <[email protected]>wrote:
Caty, This is great. I'm very looking forward this. Some remarks : - The skin will break the system of panels (in particular the panel wizard), since there is no left panel anymore. For me this is not a problem, we just have to agree on that. - I think it would be a good time to think about the introduction of a pre-processor like LESS to ease the customization/derivation of such a skin. (BTW bootstrap itself uses LESS for that purpose). - This will be also be a good time to re-work and generally harmonize the markup of some UI components. Any timeline for the implementation ?
The implementation could be decided for the 5.x timeline, but we need to find a main developer to be in charge of this and really evaluate the amount of work needed. There are several implementation decision that needs to be voted if we decide to go with this skin, like you said panels, menus, administration layout, rewriting some application's layout, etc. Regarding LESS, Bootstrap works with LESS (both server and client side) and there is also another project that replaces LESS with Sass to work with Bootstrap. This is another implementation decision, since we could adopt LESS or even Bootstrap or just make a separation of skins, by having a really "base"/"core"/"api" skin (that in general should contain just the basis, like typography, grids, reset, forms, etc. and that we would need to write) and another skin on top of it (that should define the layout, skin colors and additional styling) that could be more easily changed. We could use LESS or just expand our velocity macros (to have more 'mixins' like functionality) and more "ColorThemes"/"Skin" variables.
I see a couple of immediate benefits in adopting LESS over keeping the functionnality in velocity : - we can benefit from the upstream customization of bootstrap (I'm talking about this : https://github.com/twitter/bootstrap/blob/master/less/variables.less) - it's more "standard" and than our velocity macros/variables - there's no way to implement "generic mixins" in velocity (in a way that's not awkward to declare) But indeed, in the end that's an implementation decision, I'm just dropping the idea here. Jerome
Thanks, Caty
Definitely +1 Thanks, Jerome On 11/08/2012 05:59 PM, Ecaterina Moraru (Valica) wrote:
Hi devs, I've been working in the 4.3 Roadmap for a new skin proposal. You can see it at http://incubator.myxwiki.org/**xwiki/bin/view/Improvements/**Skin4x<http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4x> I recommend looking at the "Annotations Overview" gallery in order to see the different elements of the skin and some explanations. I've made also separate pages for different components of the skin. For example, you can see more information about how the menus work at http://incubator.myxwiki.org/**xwiki/bin/view/Improvements/**Skin4xMenus<http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenus> For each component you can also see how the elements scale and see the responsive layout. For the record, the proposal is made by using Bootstrap ( http://twitter.github.com/**bootstrap/<http://twitter.github.com/bootstrap/> ). Thanks, Caty ______________________________**_________________ devs mailing list [email protected] http://lists.xwiki.org/**mailman/listinfo/devs<http://lists.xwiki.org/mailman/listinfo/devs>
______________________________**_________________ devs mailing list [email protected] http://lists.xwiki.org/**mailman/listinfo/devs<http://lists.xwiki.org/mailman/listinfo/devs>
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
Hi Caty, On Nov 8, 2012, at 5:59 PM, Ecaterina Moraru (Valica) <[email protected]> wrote:
Hi devs,
I've been working in the 4.3 Roadmap for a new skin proposal. You can see it at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4x
I recommend looking at the "Annotations Overview" gallery in order to see the different elements of the skin and some explanations.
I've made also separate pages for different components of the skin. For example, you can see more information about how the menus work at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenus
For each component you can also see how the elements scale and see the responsive layout. For the record, the proposal is made by using Bootstrap ( http://twitter.github.com/bootstrap/).
Very nice :) There are some details that we'll need to discuss when implementing it but overall it's very nice. +1 to implement it in 5.0. Thanks -Vincent
I like it very much! Thanks, Marius On Thu, Nov 8, 2012 at 6:59 PM, Ecaterina Moraru (Valica) <[email protected]> wrote:
Hi devs,
I've been working in the 4.3 Roadmap for a new skin proposal. You can see it at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4x
I recommend looking at the "Annotations Overview" gallery in order to see the different elements of the skin and some explanations.
I've made also separate pages for different components of the skin. For example, you can see more information about how the menus work at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenus
For each component you can also see how the elements scale and see the responsive layout. For the record, the proposal is made by using Bootstrap ( http://twitter.github.com/bootstrap/).
Thanks, Caty _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
This looks great ! On Thu, Nov 8, 2012 at 5:59 PM, Ecaterina Moraru (Valica) <[email protected]
wrote:
Hi devs,
I've been working in the 4.3 Roadmap for a new skin proposal. You can see it at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4x
I recommend looking at the "Annotations Overview" gallery in order to see the different elements of the skin and some explanations.
I've made also separate pages for different components of the skin. For example, you can see more information about how the menus work at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenus
For each component you can also see how the elements scale and see the responsive layout. For the record, the proposal is made by using Bootstrap ( http://twitter.github.com/bootstrap/).
Thanks, Caty _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Thomas Mortagne
Hi Caty, this looks good. One small note: I was a bit confused at times by the use of the right-hand-side panel to show help content and/or application content, for instance here: http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4x/homepage... Here too, the right-hand-side panel is used both for displaying help content and navigating through the app, I find this confusing: http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4x/administ... I really like inline document edition, which keeps the same panels as in view mode. Lastly, I don't think "Administration" should be displayed as an App in the App Panel on the left. It's not an application per se, it's a place from where you can manage your wiki. At least this confused me a bit too. Apart from that, this skin looks very modern and polished. Well done! Guillaume On Sat, Nov 10, 2012 at 5:51 PM, Thomas Mortagne <[email protected]>wrote:
This looks great !
On Thu, Nov 8, 2012 at 5:59 PM, Ecaterina Moraru (Valica) < [email protected]
wrote:
Hi devs,
I've been working in the 4.3 Roadmap for a new skin proposal. You can see it at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4x
I recommend looking at the "Annotations Overview" gallery in order to see the different elements of the skin and some explanations.
I've made also separate pages for different components of the skin. For example, you can see more information about how the menus work at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenus
For each component you can also see how the elements scale and see the responsive layout. For the record, the proposal is made by using Bootstrap ( http://twitter.github.com/bootstrap/).
Thanks, Caty _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Thomas Mortagne _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Guillaume Lerouge Sales & Client Projects Manager XWiki SAS - www.xwiki.com Skype: wikibc Office: +33 1 45 42 40 90 Mobile: +33 6 10 79 76 70
Hi Caty, I am currently making a fast adaptation of the current stable version (4.4.1) to a responsive skin based on bootstrap. I do not intend to implement your proposal in full, since I would like to minimize required changes to the current skin as much as possible. For example, I do not want to break the current panel behavior or menu organisation. I do not expect to have time to refine all the details or the mobile version really. But I am inspiring a lot on your work :) I have some questions, remarks: 1) Where are the following ? (some may be useless and my view biased by the fact that I adapt the current skin) a) the import from office menu item, b) the user network item, c) the user dashboard, d) the workgroup menu, e) the log in item f) the languages for multilingual wiki g) the annotation button h) the section edit button i) the tags j) the creation date and author k) the footer 2) On site were the wiki aspect is not exposed to visitors, we used to hide the main menu. I do not know if I am alone doing so, but we usually have separate navigation bar in the header, next or below the logo and the search box. With this new way to go, hiding the main menu will also hide the logo and the search box. I would probably like to build my navigation bar under that main menu, but this will not look nice for user with editing power to have both, and doubling the search box will cause some technical issue. I can think of a mixup, but the room is missing for having a single bar. WDYT ? Regards, On Thu, Nov 8, 2012 at 5:59 PM, Ecaterina Moraru (Valica) <[email protected]
wrote:
Hi devs,
I've been working in the 4.3 Roadmap for a new skin proposal. You can see it at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4x
I recommend looking at the "Annotations Overview" gallery in order to see the different elements of the skin and some explanations.
I've made also separate pages for different components of the skin. For example, you can see more information about how the menus work at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenus
For each component you can also see how the elements scale and see the responsive layout. For the record, the proposal is made by using Bootstrap ( http://twitter.github.com/bootstrap/).
Thanks, Caty _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Denis Gervalle SOFTEC sa - CEO eGuilde sarl - CTO
On Tue, Jan 29, 2013 at 12:40 PM, Denis Gervalle <[email protected]> wrote:
Hi Caty,
Hi,
I am currently making a fast adaptation of the current stable version (4.4.1) to a responsive skin based on bootstrap. I do not intend to implement your proposal in full, since I would like to minimize required changes to the current skin as much as possible. For example, I do not want to break the current panel behavior or menu organisation. I do not expect to have time to refine all the details or the mobile version really. But I am inspiring a lot on your work :)
I have some questions, remarks:
1) Where are the following ? (some may be useless and my view biased by the fact that I adapt the current skin) a) the import from office menu item,
Could be placed here http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4x/homepage... but I would prefer to have that entry in the menu, only if the office server is on http://jira.xwiki.org/browse/XWIKI-8762
b) the user network item, c) the user dashboard, d) the workgroup menu,
http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4x/profileD...
e) the log in item
http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4xLogin/log... Near the Register
f) the languages for multilingual wiki
Haven't integrated this yet, but could be near the Profile entry http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4x/homepage... and the languages could be diplayed in a select, instead of a list.
g) the annotation button
Haven't integrated this either, IMO in a refined version the annotation functionality would move down with the comments. http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4x/pageExam...
h) the section edit button
Not represented.. http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4x/pageExam... Just like it is now, near the section's title.
i) the tags j) the creation date and author k) the footer
In a refined version, I would combine all this information: creation, parents, childs, tags inside the Information Tab http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4x/pageExam...
2) On site were the wiki aspect is not exposed to visitors, we used to hide the main menu. I do not know if I am alone doing so, but we usually have separate navigation bar in the header, next or below the logo and the search box. With this new way to go, hiding the main menu will also hide the logo and the search box. I would probably like to build my navigation bar under that main menu, but this will not look nice for user with editing power to have both, and doubling the search box will cause some technical issue. I can think of a mixup, but the room is missing for having a single bar. WDYT ?
If you want to hide some functionality, you can only hide what you don't need and show the rest, something like: http://incubator.myxwiki.org/xwiki/bin/download/Improvements/Skin4xLogin/log... Thanks, Caty
Regards,
On Thu, Nov 8, 2012 at 5:59 PM, Ecaterina Moraru (Valica) < [email protected]
wrote:
Hi devs,
I've been working in the 4.3 Roadmap for a new skin proposal. You can see it at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4x
I recommend looking at the "Annotations Overview" gallery in order to see the different elements of the skin and some explanations.
I've made also separate pages for different components of the skin. For example, you can see more information about how the menus work at http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Skin4xMenus
For each component you can also see how the elements scale and see the responsive layout. For the record, the proposal is made by using Bootstrap ( http://twitter.github.com/bootstrap/).
Thanks, Caty _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Denis Gervalle SOFTEC sa - CEO eGuilde sarl - CTO _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
participants (8)
-
Denis Gervalle -
Ecaterina Moraru (Valica) -
Fabio Mancinelli -
Guillaume Lerouge -
Jerome Velociter -
Marius Dumitru Florea -
Thomas Mortagne -
Vincent Massol