Loading...
 

Tikiwiki-devel (mailman list mirror)


[Tikiwiki-cvs/svn] SF.net SVN: tikiwiki:[69010] branches/19.x/templates/tiki-wiki_topline.tpl

posts: 7861 Israel

Hi,

This is a hard to be "100% answer" as on one hand you have UX (user should know where to click before reading the text by a quick look) and Design it should be nice and not ugly or shocking.
...And we are packaging several themes.

Before checking t.o websites, I had a clear idea:
Primary is the main action button and I would prefer it unique on its section - wikitopline - (like the save button on edit page).
Danger should be destructive and not undoable action (delete)

In between those two:
Info, secondary or light should be used.
(https://www.claromentis.com/blog/twitter-bootstrap-button-best-practices/)

And dropdown-toggle may be different.



After checking Dev, Doc and trying different themes, I'm less sure.
The main actions menu at https://doc.tiki.org/Documentation for example sees its role changing depending of the user role.
- As anonymous, the action menu (cog) is showing "print" and "pdf" and this shouldn't be Primary
- As Admin it show Edit and that's a primary. (like the edit button at the bottom)

Changing the button itself (the dropdown-toggle) depending if you have Edit perm or not will be confusing.

A daring decision may be to keep all the dropdown-toggle button color the same everywhere as we don't know in advance what role they may have. (addressing Design and Role)
And then inside the menu to change the dropdown-item color depending on the role (Edit: primary, Print secondary) everywhere. The good in this is that it will be set everywhere the same no matter role, theme or feature. (addressing UX and consistency).

Using only icon and coloured items based on the same everywhere is also good for the multilingual feature and usage.


But this solution will require more work to implement and… this is just talking out-loud for now, still thinking about it.

I think I let you guys decide and be happy with it. ;-)


Bernard

PS: why a cog icon for the action menu, isn't a cog for setting ?

> On 12 Feb 2019, at 00:52 , Cloutier, Philippe (DGARI-Consultant) <Philippe.Cloutier.externe@mern-mffp.gouv.qc.ca> wrote:

>
> I believe these class names were recycled from Bootstrap stuff. In this case, the actual meaning of btn-primary is not primary, but "Make a significant non-destructive change", according to https://themes.tiki.org/Organization-of-button-colors-in-Tiki <https://themes.tiki.org/Organization-of-button-colors-in-Tiki>
> Which means there can be several primary buttons…
>
> I doubt any of the classes will apply though. I guess there should be no color, or the same color as other "action" dropdowns.
>
>
> De : Jonny Bradley mailto:jonny@tiki.org <mailto:jonny@tiki.org>
> Envoyé : 9 février 2019 09:11
> À : Tiki developers <tikiwiki-devel@lists.sourceforge.net <mailto:tikiwiki-devel@lists.sourceforge.net>>
> Objet : Re: Tiki-devel Tikiwiki-cvs/svn SF.net <http://sf.net/> SVN: tikiwiki:69010 branches/19.x/templates/tiki-wiki_topline.tpl
>
> Hi Luci
>
> Replying on the dev list for wider participation :-)
>
> Hmm, but there are other "primary" buttons already on the page, like edit, rename etc, shouldn't they be the "primary" one/s?
>
> And that button group looks like one thing, so i think looks bad (confusing) when it's multi-coloured. To me it does seem like "info" because it reveals more options (like short url, print and favourite) in the same way the translation one reveals (quite important) translation tools...
>
> Attached is a screenie using the "United" theme with primary on the actions button, with the translations menu showing:
>
> <image001.png>
>
> ...but what do others think? (i'll revert it if that's what everyone wants, of course)
>
> jonny
>
>
>
>
>
>
> On 9 Feb 2019, at 13:48, luciash <luci@tiki.org <mailto:luci@tiki.org>> wrote:
>
> IMHO only one should be primary, and that is the actions dropdown (as it
> was), the others are info, because they do not have primary function,
> like e.g. the backlinks inform about pages which link to this page?
>
> luci
>
>
> On 08.02.2019 19:58, jonnybradley--- via Tikiwiki-cvs wrote:
>
> Revision: 69010
> http://sourceforge.net/p/tikiwiki/code/69010 <http://sourceforge.net/p/tikiwiki/code/69010>
> Author: jonnybradley
> Date: 2019-02-08 18:58:54 +0000 (Fri, 08 Feb 2019)
> Log Message:
> -----------
> FIX bs4: Better class for page actions dropdown button, so it matches the other ones, or should they all be primary?
>
> Modified Paths:
> --------------
> branches/19.x/templates/tiki-wiki_topline.tpl
>
> Modified: branches/19.x/templates/tiki-wiki_topline.tpl
> =============
> --- branches/19.x/templates/tiki-wiki_topline.tpl 2019-02-08 18:56:23 UTC (rev 69009)
> +++ branches/19.x/templates/tiki-wiki_topline.tpl 2019-02-08 18:58:54 UTC (rev 69010)
> @@ -121,7 +121,7 @@
> \{assign var="hasPageAction" value="0"\}
> \{capture name="pageActions"\}

> \{if ! $js}<ul class="cssmenu_horiz"><li>{/if\}

> - <a class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#" title="\{tr}Page actions{/tr\}">
> + <a class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#" title="\{tr}Page actions{/tr\}">
> \{icon name="cog"\}
> </a>

> <div class="dropdown-menu dropdown-menu-right">

>
> This was sent by the SourceForge.net <http://sourceforge.net/> collaborative development platform, the world's largest Open Source development site.
>
>
>
> ___
> Tikiwiki-cvs mailing list
> Tikiwiki-cvs at lists.sourceforge.net <mailto:Tikiwiki-cvs@lists.sourceforge.net>
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs <https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs>
>
>
> ___
> Tikiwiki-cvs mailing list
> Tikiwiki-cvs at lists.sourceforge.net <mailto:Tikiwiki-cvs@lists.sourceforge.net>
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs <https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs>
>
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net <mailto:TikiWiki-devel@lists.sourceforge.net>
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel <https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel>

posts: 4470 Japan

Hi,

Thanks for the link - I haven't been able to find much info anywhere
about how people were actually working with the Bootstrap button
classes. It's interesting, though, that on
https://www.claromentis.com/blog/twitter-bootstrap-button-best-practices
there doesn't seem to be any attempt to follow the guidelines they're
describing. The rationale is clearly "we have these cool button classes,
let's skip the semantics and use them all to make a colorful page." ;-)

About having only one primary button in a section, I agree that would be
the ideal case. But I think we have instances where there is more than
one button that qualifies as primary, so it would be more of a guideline
than a rule, like the pirates' code
(https://en.wikiquote.org/wiki/Pirates_of_the_Caribbean:_The_Curse_of_the_Black_Pearl).

-- Gary


On 2019-02-12 01:23, Bsfez Tiki wrote:
> Hi,
>
> This is a hard to be "100% answer" as on one hand you have UX (user
> should know where to click before reading the text by a quick look)
> and Design it should be nice and not ugly or shocking.
> ...And we are packaging several themes.
>
> Before checking t.o websites, I had a clear idea:
> Primary is the main action button and I would prefer it unique on its
> section - wikitopline - (like the save button on edit page).
> Danger should be destructive and not undoable action (delete)
>
> In between those two:
> Info, secondary or light should be used.
> (https://www.claromentis.com/blog/twitter-bootstrap-button-best-practices/)
>
> And dropdown-toggle may be different.
>
> ---
>
> After checking Dev, Doc and trying different themes, I'm less sure.
> The main actions menu at https://doc.tiki.org/Documentation for
> example sees its role changing depending of the user role.
>
> - As anonymous, the action menu (cog) is showing "print" and "pdf" and
> this shouldn't be Primary
> - As Admin it show Edit and that's a primary. (like the edit button
> at the bottom)
>
> Changing the button itself (the dropdown-toggle) depending if you have
> Edit perm or not will be confusing.
>
> A daring decision may be to keep all the dropdown-toggle button color
> the same everywhere as we don't know in advance what role they may
> have. (addressing Design and Role)
> And then inside the menu to change the dropdown-item color depending
> on the role (Edit: primary, Print secondary) everywhere. The good in
> this is that it will be set everywhere the same no matter role, theme
> or feature. (addressing UX and consistency).
>
> Using only icon and coloured items based on the same everywhere is
> also good for the multilingual feature and usage.
>
> But this solution will require more work to implement and… this is
> just talking out-loud for now, still thinking about it.
> …
> …
>
> I think I let you guys decide and be happy with it. ;-)
>
> Bernard
>
> PS: why a cog icon for the action menu, isn't a cog for setting ?
>
>> On 12 Feb 2019, at 00:52 , Cloutier, Philippe (DGARI-Consultant)

>> <Philippe.Cloutier.externe@mern-mffp.gouv.qc.ca> wrote:

>>
>> I believe these class names were recycled from Bootstrap stuff. In
>> this case, the actual meaning of btn-primary is not primary, but
>> "Make a significant non-destructive change", according to
>> https://themes.tiki.org/Organization-of-button-colors-in-Tiki
>> Which means there can be several primary buttons…
>>
>> I doubt any of the classes will apply though. I guess there should
>> be no color, or the same color as other "action" dropdowns.
>>
>> DE : Jonny Bradley mailto:jonny@tiki.org
>> ENVOYÉ : 9 février 2019 09:11
>> À : Tiki developers <tikiwiki-devel@lists.sourceforge.net>
>> OBJET : Re: Tiki-devel Tikiwiki-cvs/svn SF.net 1 SVN:
>> tikiwiki:69010 branches/19.x/templates/tiki-wiki_topline.tpl
>>
>> Hi Luci
>>
>> Replying on the dev list for wider participation :-)
>>
>> Hmm, but there are other "primary" buttons already on the page, like
>> edit, rename etc, shouldn't they be the "primary" one/s?
>>
>> And that button group looks like one thing, so i think looks bad
>> (confusing) when it's multi-coloured. To me it does seem like "info"
>> because it reveals more options (like short url, print and
>> favourite) in the same way the translation one reveals (quite
>> important) translation tools...
>>
>> Attached is a screenie using the "United" theme with primary on the
>> actions button, with the translations menu showing:
>>
>> <image001.png>
>>
>> ...but what do others think? (i'll revert it if that's what everyone
>> wants, of course)
>>
>> jonny
>>
>> On 9 Feb 2019, at 13:48, luciash <luci@tiki.org> wrote:
>>
>> IMHO only one should be primary, and that is the actions dropdown
>> (as it
>> was), the others are info, because they do not have primary
>> function,
>> like e.g. the backlinks inform about pages which link to this page?
>>
>> luci
>>
>> On 08.02.2019 19:58, jonnybradley--- via Tikiwiki-cvs wrote:
>>
>> Revision: 69010
>> http://sourceforge.net/p/tikiwiki/code/69010
>> Author: jonnybradley
>> Date: 2019-02-08 18:58:54 +0000 (Fri, 08 Feb 2019)
>> Log Message:
>> -----------
>> FIX bs4: Better class for page actions dropdown button, so it
>> matches the other ones, or should they all be primary?
>>
>> Modified Paths:
>> --------------
>> branches/19.x/templates/tiki-wiki_topline.tpl
>>
>> Modified: branches/19.x/templates/tiki-wiki_topline.tpl
>> =============
>> --- branches/19.x/templates/tiki-wiki_topline.tpl 2019-02-08
>> 18:56:23 UTC (rev 69009)
>> +++ branches/19.x/templates/tiki-wiki_topline.tpl 2019-02-08
>> 18:58:54 UTC (rev 69010)
>> @@ -121,7 +121,7 @@
>> {assign
>> var="hasPageAction" value="0"}
>> {capture
>> name="pageActions"}
>> {if !

>> $js}<ul class="cssmenu_horiz"><li>\{/if\}

>> - <a
>> class="btn btn-primary btn-sm dropdown-toggle"
>> data-toggle="dropdown" data-hover="dropdown" href="#"
>> title="\{tr}Page actions{/tr\}">
>> + <a
>> class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown"
>> data-hover="dropdown" href="#" title="\{tr}Page actions{/tr\}">
>>
>> \{icon name="cog"\}
>> </a>

>> <div

>> class="dropdown-menu dropdown-menu-right">
>>
>> This was sent by the SourceForge.net 2 collaborative development
>> platform, the world's largest Open Source development site.
>>
>> ___
>> Tikiwiki-cvs mailing list
>> Tikiwiki-cvs at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs
>>
>> ___
>> Tikiwiki-cvs mailing list
>> Tikiwiki-cvs at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs
>
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>
>
>
> Links:
> ------
> 1 http://sf.net/
> 2 http://sourceforge.net/
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


Hi Bernard,

>De : Bsfez Tiki mailto:bsfez@tiki.org
>Envoyé : 12 février 2019 01:24
>
>Hi,
>
>...
>
>
>Bernard
>
>PS: why a cog icon for the action menu, isn't a cog for setting ?


Good question. For a technical answer, that follows from r67527... so I just replied to that commit.

>>On 12 Feb 2019, at 00:52 , Cloutier, Philippe (DGARI-Consultant) <Philippe.Cloutier.externe@mern-mffp.gouv.qc.ca> wrote:

>>
>>I believe these class names were recycled from Bootstrap stuff. In this case, the actual meaning of btn-primary is not primary, but "Make a significant non-destructive change", according to https://themes.tiki.org/Organization-of-button-colors-in-Tiki
>>Which means there can be several primary buttons…
>>
>>I doubt any of the classes will apply though. I guess there should be no color, or the same color as other "action" dropdowns.
>>
>>
>>>De : Jonny Bradley mailto:jonny@tiki.org
>>>Envoyé : 9 février 2019 09:11
>>>À : Tiki developers <tikiwiki-devel@lists.sourceforge.net>
>>>Objet : Re: Tiki-devel Tikiwiki-cvs/svn SF.net SVN: tikiwiki:69010 branches/19.x/templates/tiki-wiki_topline.tpl
>>>
>>>Hi Luci
>>>
>>>Replying on the dev list for wider participation :-)
>>>
>>>Hmm, but there are other "primary" buttons already on the page, like edit, rename etc, shouldn't they be the "primary" one/s?
>>>
>>>And that button group looks like one thing, so i think looks bad (confusing) when it's multi-coloured. To me it does seem like "info" because it reveals more options (like short url, print and favourite) in the same way the translation one reveals (quite important) translation tools...
>>>
>>>Attached is a screenie using the "United" theme with primary on the actions button, with the translations menu showing:
>>>
>>><image001.png>
>>>
>>>...but what do others think? (i'll revert it if that's what everyone wants, of course)
>>>
>>>jonny
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>>On 9 Feb 2019, at 13:48, luciash <luci@tiki.org> wrote:
>>>>
>>>>IMHO only one should be primary, and that is the actions dropdown (as it
>>>>was), the others are info, because they do not have primary function,
>>>>like e.g. the backlinks inform about pages which link to this page?
>>>>
>>>>luci
>>>>
>>>>
>>>>>On 08.02.2019 19:58, jonnybradley--- via Tikiwiki-cvs wrote:
>>>>>
>>>>>
>>>>>Revision: 69010
>>>>> http://sourceforge.net/p/tikiwiki/code/69010
>>>>>Author: jonnybradley
>>>>>Date: 2019-02-08 18:58:54 +0000 (Fri, 08 Feb 2019)
>>>>>Log Message:
>>>>>-----------
>>>>>FIX bs4: Better class for page actions dropdown button, so it matches the other ones, or should they all be primary?
>>>>>
>>>>>Modified Paths:
>>>>>--------------
>>>>> branches/19.x/templates/tiki-wiki_topline.tpl
>>>>>
>>>>>Modified: branches/19.x/templates/tiki-wiki_topline.tpl
>>>>>=============
>>>>>--- branches/19.x/templates/tiki-wiki_topline.tpl 2019-02-08 18:56:23 UTC (rev 69009)
>>>>>+++ branches/19.x/templates/tiki-wiki_topline.tpl 2019-02-08 18:58:54 UTC (rev 69010)
>>>>>@@ -121,7 +121,7 @@
>>>>> \{assign var="hasPageAction" value="0"\}
>>>>> \{capture name="pageActions"\}

>>>>> \{if ! $js}<ul class="cssmenu_horiz"><li>{/if\}

>>>>>- <a class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#" title="\{tr}Page actions{/tr\}">
>>>>>+ <a class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#" title="\{tr}Page actions{/tr\}">
>>>>> \{icon name="cog"\}
>>>>> </a>

>>>>> <div class="dropdown-menu dropdown-menu-right">


___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.