[xwiki-devs] [UX][Idea] Left Panels
Hi devs, Some ideas that could be applied to left panels area: * Mark "More applications" as expandable * Provide a "Customize" panel button on hover * Some styling changes * Demo: show sticky left panels would behave See the prototype in action: http://design.xwiki.org/xwiki/bin/download/Proposal/IdeaExpandableAppBar/App... The full proposal at: http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaExpandableAppBar Let me know what you think. Thanks, Caty
I like all these ideas. It's both more modern and more intuitive (the "configure" button). How does it look if the left panel has less width ? I'm not 100% about the stick panels. If we do it, we should do for both panel sides. The scrollbars should be hidden most of the time (it's not very elegant) but in the same time, it must be very clear that you can scroll. But I like the idea. 2018-06-19 17:29 GMT+02:00 Ecaterina Moraru (Valica) <[email protected]>:
Hi devs,
Some ideas that could be applied to left panels area:
* Mark "More applications" as expandable * Provide a "Customize" panel button on hover * Some styling changes * Demo: show sticky left panels would behave
See the prototype in action: http://design.xwiki.org/xwiki/bin/download/Proposal/ IdeaExpandableAppBar/AppBar.gif
The full proposal at: http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaExpandableAppBar
Let me know what you think. Thanks, Caty
-- Guillaume Delhumeau ([email protected]) Research & Development Engineer at XWiki SAS Committer on the XWiki.org project
Hi Caty,
On 19 Jun 2018, at 17:29, Ecaterina Moraru (Valica) <[email protected]> wrote:
Hi devs,
Some ideas that could be applied to left panels area:
* Mark "More applications" as expandable
Seems good
* Provide a "Customize" panel button on hover
I agree with the general idea. Some details: * For admins only right? * What does it do? We don’t have the concept of Panel administration ATM. What would work is edit the panel page but then we may want to go further than that. Editing needs to be an option but some panel may provide an admin UI too such as the Navigation Panel or the Applications Panel. Maybe it’s time to update the Panel XClass and add an xproperty for the administration of panels, which would be used if not empty.
* Some styling changes
Sounds good
* Demo: show sticky left panels would behave
I’m also not yet 100% sure about the sticky panels but why not, we should discuss the details. What I don’t like are for cases when you have panels that span more than a screenful vertically. It’s possible there’s not a single valid choice depending how you want to implement your website and thus maybe the only option is to have this configurable in the general Panel Admin UI (fixed panels or sticky panels). That’s what would make the most sense to me. Once we have this, the default should be what looks best with the default content we provide for XS. I like those ideas! :) Thanks -Vincent
See the prototype in action: http://design.xwiki.org/xwiki/bin/download/Proposal/IdeaExpandableAppBar/App...
The full proposal at: http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaExpandableAppBar
Let me know what you think. Thanks, Caty
On Wed, Jun 20, 2018 at 12:09 PM, Vincent Massol <[email protected]> wrote:
Hi Caty,
On 19 Jun 2018, at 17:29, Ecaterina Moraru (Valica) <[email protected]> wrote:
Hi devs,
Some ideas that could be applied to left panels area:
* Mark "More applications" as expandable
Seems good
* Provide a "Customize" panel button on hover
I agree with the general idea.
Some details: * For admins only right? * What does it do? We don’t have the concept of Panel administration ATM. What would work is edit the panel page but then we may want to go further than that. Editing needs to be an option but some panel may provide an admin UI too such as the Navigation Panel or the Applications Panel. Maybe it’s time to update the Panel XClass and add an xproperty for the administration of panels, which would be used if not empty.
In theory only for Admins, since they have access to Administration. Currently we have dedicated customizations for AppBar and Navigation, so having that button would help the discoverability. Being able to have it at the Panel class, could be nice, but I think it's interesting to have it at least as individual customizations for these 2 panels that are on the Left.
* Some styling changes
Sounds good
* Demo: show sticky left panels would behave
I made the sticky demo mostly as an experiment. I even don't know if I like it. It's problematic for the current skin, since the logo disappears on scrolling. I made the demo since we discussed once on the IRC about independent containers and wanted to see how it looks like. From an implementation POV it's a single "position: sticky" in CSS, but it's not supported in IE11. So this could be an option just for a newer skin or have JS to have the behavior.
I’m also not yet 100% sure about the sticky panels but why not, we should discuss the details. What I don’t like are for cases when you have panels that span more than a screenful vertically.
It’s possible there’s not a single valid choice depending how you want to implement your website and thus maybe the only option is to have this configurable in the general Panel Admin UI (fixed panels or sticky panels). That’s what would make the most sense to me. Once we have this, the default should be what looks best with the default content we provide for XS.
Yeap, for KB having a sticky TOC or Navigation panel would look great, but it's not the case for all the Flavors. So having it customizable would be preferred. Thanks, Caty
I like those ideas! :)
Thanks -Vincent
See the prototype in action: http://design.xwiki.org/xwiki/bin/download/Proposal/
IdeaExpandableAppBar/AppBar.gif
The full proposal at: http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaExpandableAppBar
Let me know what you think. Thanks, Caty
Hi Caty,
On 20 Jun 2018, at 11:31, Ecaterina Moraru (Valica) <[email protected]> wrote:
On Wed, Jun 20, 2018 at 12:09 PM, Vincent Massol <[email protected]> wrote:
Hi Caty,
On 19 Jun 2018, at 17:29, Ecaterina Moraru (Valica) <[email protected]> wrote:
Hi devs,
Some ideas that could be applied to left panels area:
* Mark "More applications" as expandable
Seems good
* Provide a "Customize" panel button on hover
I agree with the general idea.
Some details: * For admins only right? * What does it do? We don’t have the concept of Panel administration ATM. What would work is edit the panel page but then we may want to go further than that. Editing needs to be an option but some panel may provide an admin UI too such as the Navigation Panel or the Applications Panel. Maybe it’s time to update the Panel XClass and add an xproperty for the administration of panels, which would be used if not empty.
In theory only for Admins, since they have access to Administration. Currently we have dedicated customizations for AppBar and Navigation, so having that button would help the discoverability.
Yes
Being able to have it at the Panel class, could be nice, but I think it's interesting to have it at least as individual customizations for these 2 panels that are on the Left.
Another panel that comes to mind is the QuickLinks panel that we’re no longer promoting (it’s not visible by default anymore) but I think it had some nice effect of making users discover that they can edit panels. If you remember it has a “(edit to add more link)” kind of link that would be better implemented as a settings/edit button as you’re proposing. I think we should offer edit buttons (for any user having editing right on them, we could protect the Panels app by default with permissions so that only admins can edit panels b ydefault) so that they can edit all panels easily without having to figure out the name of the page corresponding to a panel (or having to find the panel in the admin ui panel wizard). Thanks -Vincent
* Some styling changes
Sounds good
* Demo: show sticky left panels would behave
I made the sticky demo mostly as an experiment. I even don't know if I like it. It's problematic for the current skin, since the logo disappears on scrolling. I made the demo since we discussed once on the IRC about independent containers and wanted to see how it looks like. From an implementation POV it's a single "position: sticky" in CSS, but it's not supported in IE11. So this could be an option just for a newer skin or have JS to have the behavior.
I’m also not yet 100% sure about the sticky panels but why not, we should discuss the details. What I don’t like are for cases when you have panels that span more than a screenful vertically.
It’s possible there’s not a single valid choice depending how you want to implement your website and thus maybe the only option is to have this configurable in the general Panel Admin UI (fixed panels or sticky panels). That’s what would make the most sense to me. Once we have this, the default should be what looks best with the default content we provide for XS.
Yeap, for KB having a sticky TOC or Navigation panel would look great, but it's not the case for all the Flavors. So having it customizable would be preferred.
Thanks, Caty
I like those ideas! :)
Thanks -Vincent
See the prototype in action: http://design.xwiki.org/xwiki/bin/download/Proposal/
IdeaExpandableAppBar/AppBar.gif
The full proposal at: http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaExpandableAppBar
Let me know what you think. Thanks, Caty
On 22 Jun 2018, at 15:00, Vincent Massol <[email protected]> wrote:
Hi Caty,
On 20 Jun 2018, at 11:31, Ecaterina Moraru (Valica) <[email protected]> wrote:
On Wed, Jun 20, 2018 at 12:09 PM, Vincent Massol <[email protected]> wrote:
Hi Caty,
On 19 Jun 2018, at 17:29, Ecaterina Moraru (Valica) <[email protected]> wrote:
Hi devs,
Some ideas that could be applied to left panels area:
* Mark "More applications" as expandable
Seems good
* Provide a "Customize" panel button on hover
I agree with the general idea.
Some details: * For admins only right? * What does it do? We don’t have the concept of Panel administration ATM. What would work is edit the panel page but then we may want to go further than that. Editing needs to be an option but some panel may provide an admin UI too such as the Navigation Panel or the Applications Panel. Maybe it’s time to update the Panel XClass and add an xproperty for the administration of panels, which would be used if not empty.
In theory only for Admins, since they have access to Administration. Currently we have dedicated customizations for AppBar and Navigation, so having that button would help the discoverability.
Yes
Being able to have it at the Panel class, could be nice, but I think it's interesting to have it at least as individual customizations for these 2 panels that are on the Left.
Another panel that comes to mind is the QuickLinks panel that we’re no longer promoting (it’s not visible by default anymore) but I think it had some nice effect of making users discover that they can edit panels. If you remember it has a “(edit to add more link)” kind of link that would be better implemented as a settings/edit button as you’re proposing.
I think we should offer edit buttons (for any user having editing right on them, we could protect the Panels app by default with permissions so that only admins can edit panels b ydefault) so that they can edit all panels easily without having to figure out the name of the page corresponding to a panel (or having to find the panel in the admin ui panel wizard).
After more thinking, it’s actually more complex… The default panels that we provide belong to the Panel Application and are not meant to be modified (except for a few, the Quick Links one for example). Thus it would be a bad idea to have Edit buttons for those. For the others, it’s still a very good idea IMO ;) Thanks -Vincent
Thanks -Vincent
* Some styling changes
Sounds good
* Demo: show sticky left panels would behave
I made the sticky demo mostly as an experiment. I even don't know if I like it. It's problematic for the current skin, since the logo disappears on scrolling. I made the demo since we discussed once on the IRC about independent containers and wanted to see how it looks like. From an implementation POV it's a single "position: sticky" in CSS, but it's not supported in IE11. So this could be an option just for a newer skin or have JS to have the behavior.
I’m also not yet 100% sure about the sticky panels but why not, we should discuss the details. What I don’t like are for cases when you have panels that span more than a screenful vertically.
It’s possible there’s not a single valid choice depending how you want to implement your website and thus maybe the only option is to have this configurable in the general Panel Admin UI (fixed panels or sticky panels). That’s what would make the most sense to me. Once we have this, the default should be what looks best with the default content we provide for XS.
Yeap, for KB having a sticky TOC or Navigation panel would look great, but it's not the case for all the Flavors. So having it customizable would be preferred.
Thanks, Caty
I like those ideas! :)
Thanks -Vincent
See the prototype in action: http://design.xwiki.org/xwiki/bin/download/Proposal/
IdeaExpandableAppBar/AppBar.gif
The full proposal at: http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaExpandableAppBar
Let me know what you think. Thanks, Caty
On 22 Jun 2018, at 21:20, Vincent Massol <[email protected]> wrote:
On 22 Jun 2018, at 15:00, Vincent Massol <[email protected]> wrote:
Hi Caty,
On 20 Jun 2018, at 11:31, Ecaterina Moraru (Valica) <[email protected]> wrote:
On Wed, Jun 20, 2018 at 12:09 PM, Vincent Massol <[email protected]> wrote:
Hi Caty,
On 19 Jun 2018, at 17:29, Ecaterina Moraru (Valica) <[email protected]> wrote:
Hi devs,
Some ideas that could be applied to left panels area:
* Mark "More applications" as expandable
Seems good
* Provide a "Customize" panel button on hover
I agree with the general idea.
Some details: * For admins only right? * What does it do? We don’t have the concept of Panel administration ATM. What would work is edit the panel page but then we may want to go further than that. Editing needs to be an option but some panel may provide an admin UI too such as the Navigation Panel or the Applications Panel. Maybe it’s time to update the Panel XClass and add an xproperty for the administration of panels, which would be used if not empty.
In theory only for Admins, since they have access to Administration. Currently we have dedicated customizations for AppBar and Navigation, so having that button would help the discoverability.
Yes
Being able to have it at the Panel class, could be nice, but I think it's interesting to have it at least as individual customizations for these 2 panels that are on the Left.
Another panel that comes to mind is the QuickLinks panel that we’re no longer promoting (it’s not visible by default anymore) but I think it had some nice effect of making users discover that they can edit panels. If you remember it has a “(edit to add more link)” kind of link that would be better implemented as a settings/edit button as you’re proposing.
I think we should offer edit buttons (for any user having editing right on them, we could protect the Panels app by default with permissions so that only admins can edit panels b ydefault) so that they can edit all panels easily without having to figure out the name of the page corresponding to a panel (or having to find the panel in the admin ui panel wizard).
After more thinking, it’s actually more complex… The default panels that we provide belong to the Panel Application and are not meant to be modified (except for a few, the Quick Links one for example). Thus it would be a bad idea to have Edit buttons for those. For the others, it’s still a very good idea IMO ;)
Note that we currently have the problem in the Panel Wizard where we have “Edit” links for all panels. Strangely when we clock them there’s no warning about the page being part of an extension. See http://localhost:8080/xwiki/bin/admin/XWiki/XWikiPreferences?editor=globalad... I’ve created https://jira.xwiki.org/browse/XWIKI-15385 Thanks -Vincent
Thanks -Vincent
Thanks -Vincent
* Some styling changes
Sounds good
* Demo: show sticky left panels would behave
I made the sticky demo mostly as an experiment. I even don't know if I like it. It's problematic for the current skin, since the logo disappears on scrolling. I made the demo since we discussed once on the IRC about independent containers and wanted to see how it looks like. From an implementation POV it's a single "position: sticky" in CSS, but it's not supported in IE11. So this could be an option just for a newer skin or have JS to have the behavior.
I’m also not yet 100% sure about the sticky panels but why not, we should discuss the details. What I don’t like are for cases when you have panels that span more than a screenful vertically.
It’s possible there’s not a single valid choice depending how you want to implement your website and thus maybe the only option is to have this configurable in the general Panel Admin UI (fixed panels or sticky panels). That’s what would make the most sense to me. Once we have this, the default should be what looks best with the default content we provide for XS.
Yeap, for KB having a sticky TOC or Navigation panel would look great, but it's not the case for all the Flavors. So having it customizable would be preferred.
Thanks, Caty
I like those ideas! :)
Thanks -Vincent
See the prototype in action: http://design.xwiki.org/xwiki/bin/download/Proposal/
IdeaExpandableAppBar/AppBar.gif
The full proposal at: http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaExpandableAppBar
Let me know what you think. Thanks, Caty
On Wed, Jun 20, 2018 at 12:31 PM, Ecaterina Moraru (Valica) < [email protected]> wrote:
On Wed, Jun 20, 2018 at 12:09 PM, Vincent Massol <[email protected]> wrote:
Hi Caty,
On 19 Jun 2018, at 17:29, Ecaterina Moraru (Valica) <[email protected]
wrote:
Hi devs,
Some ideas that could be applied to left panels area:
* Mark "More applications" as expandable
Seems good
* Provide a "Customize" panel button on hover
I agree with the general idea.
Some details: * For admins only right? * What does it do? We don’t have the concept of Panel administration ATM. What would work is edit the panel page but then we may want to go further than that. Editing needs to be an option but some panel may provide an admin UI too such as the Navigation Panel or the Applications Panel. Maybe it’s time to update the Panel XClass and add an xproperty for the administration of panels, which would be used if not empty.
In theory only for Admins, since they have access to Administration. Currently we have dedicated customizations for AppBar and Navigation, so having that button would help the discoverability. Being able to have it at the Panel class, could be nice, but I think it's interesting to have it at least as individual customizations for these 2 panels that are on the Left.
* Some styling changes
Sounds good
* Demo: show sticky left panels would behave
I made the sticky demo mostly as an experiment. I even don't know if I like it. It's problematic for the current skin, since the logo disappears on scrolling. I made the demo since we discussed once on the IRC about independent containers and wanted to see how it looks like. From an implementation POV it's a single "position: sticky" in CSS, but it's not supported in IE11. So this could be an option just for a newer skin or have JS to have the behavior.
I’m also not yet 100% sure about the sticky panels but why not, we should discuss the details. What I don’t like are for cases when you have panels that span more than a screenful vertically.
It’s possible there’s not a single valid choice depending how you want to implement your website and thus maybe the only option is to have this configurable in the general Panel Admin UI (fixed panels or sticky
panels).
That’s what would make the most sense to me. Once we have this, the default should be what looks best with the default content we provide for XS.
Yeap, for KB having a sticky TOC or Navigation panel would look great
Only if the panel content fits the window height. Both the ToC and the Navigation Panel can take a lot of vertical space (e.g. if you have a large wiki and you expand the navigation tree). What will be the behavior if the panels content is larger than the window height?
, but it's not the case for all the Flavors. So having it customizable would be preferred.
Thanks, Caty
I like those ideas! :)
Thanks -Vincent
See the prototype in action: http://design.xwiki.org/xwiki/bin/download/Proposal/
IdeaExpandableAppBar/AppBar.gif
The full proposal at: http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaExpandableAppBar
Let me know what you think. Thanks, Caty
On Thu, Jun 28, 2018 at 2:03 PM, Marius Dumitru Florea < [email protected]> wrote:
On Wed, Jun 20, 2018 at 12:31 PM, Ecaterina Moraru (Valica) < [email protected]> wrote:
On Wed, Jun 20, 2018 at 12:09 PM, Vincent Massol <[email protected]> wrote:
Hi Caty,
On 19 Jun 2018, at 17:29, Ecaterina Moraru (Valica) < [email protected]
wrote:
Hi devs,
Some ideas that could be applied to left panels area:
* Mark "More applications" as expandable
Seems good
* Provide a "Customize" panel button on hover
I agree with the general idea.
Some details: * For admins only right? * What does it do? We don’t have the concept of Panel administration ATM. What would work is edit the panel page but then we may want to go further than that. Editing needs to be an option but some panel may provide an admin UI too such as the Navigation Panel or the Applications Panel. Maybe it’s time to update the Panel XClass and add an xproperty for the administration of panels, which would be used if not empty.
In theory only for Admins, since they have access to Administration. Currently we have dedicated customizations for AppBar and Navigation, so having that button would help the discoverability. Being able to have it at the Panel class, could be nice, but I think it's interesting to have it at least as individual customizations for these 2 panels that are on the Left.
* Some styling changes
Sounds good
* Demo: show sticky left panels would behave
I made the sticky demo mostly as an experiment. I even don't know if I like it. It's problematic for the current skin, since the logo disappears on scrolling. I made the demo since we discussed once on the IRC about independent containers and wanted to see how it looks like. From an implementation POV it's a single "position: sticky" in CSS, but it's not supported in IE11. So this could be an option just for a newer skin or have JS to have the behavior.
I’m also not yet 100% sure about the sticky panels but why not, we
should
discuss the details. What I don’t like are for cases when you have panels that span more than a screenful vertically.
It’s possible there’s not a single valid choice depending how you want to implement your website and thus maybe the only option is to have this configurable in the general Panel Admin UI (fixed panels or sticky panels). That’s what would make the most sense to me. Once we have this, the default should be what looks best with the default content we provide for XS.
Yeap, for KB having a sticky TOC or Navigation panel would look great
Only if the panel content fits the window height. Both the ToC and the Navigation Panel can take a lot of vertical space (e.g. if you have a large wiki and you expand the navigation tree). What will be the behavior if the panels content is larger than the window height?
With 'position: sticky' it adds individual scrolls for the independent areas: 1 for the leftPanels, the other for the content. You can see the behavior in: - http://design.xwiki.org/xwiki/bin/download/Proposal/IdeaExpandableAppBar/Scr... - and how it looks like with hidden true on http://design.xwiki.org/xwiki/bin/download/Proposal/IdeaExpandableAppBar/Big... Thanks, Caty
, but it's not the case for all the Flavors. So having it customizable would be preferred.
Thanks, Caty
I like those ideas! :)
Thanks -Vincent
See the prototype in action: http://design.xwiki.org/xwiki/bin/download/Proposal/
IdeaExpandableAppBar/AppBar.gif
The full proposal at: http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaExpandableAppBar
Let me know what you think. Thanks, Caty
participants (4)
-
Ecaterina Moraru (Valica) -
Guillaume Delhumeau -
Marius Dumitru Florea -
Vincent Massol