Loading...
 

Tikiwiki-devel (mailman list mirror)


Proposal: consistent and intuitive button colors

posts: 4402 Japan

Hi,

I think

> 3. Finish buttons which are not done

is the best thing to do. So if you or anyone notices a button color that
doesn't seem right, feel free to mention it and it can be corrected.

-- Gary

On 8/11/2018 6:26 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
> Hi Gary,
>
>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>> Envoyé : 14 juillet 2018 00:10
>>
>> All the buttons were given class names by Tiki devs when we were integrating Bootstrap 3, but there wasn't any real explicit coordination or plan for this, so there was some amount of randomness.
>
>
> Right...
>
>> I think your second suggestion is a good idea, to document button instances that don't seem to have the right class. I wouldn't want to go through the files and add a new "not done" class when the same time could be spent actually correcting or adding a class for these instances.
>
>
> Well, I can only see 4 (types of) options. Either:
> 1. Identify buttons which are done, either by using different class names or with "DONE" comments
> 2. Identify buttons which are not done with "NOT DONE" comments
> 3. Finish buttons which are not done
> 4. Document the issue
>
> I agree that #2 would probably take nearly as much effort as #3, for much less benefits, so not interesting. So either #1, #3 or #4, depending on availability.
>
>> — Gary
>>
>> On 7/13/2018 10:21 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>> The "Please choose the language for this page:" screen has a single button, "Choose language", with the btn-secondary class, which does not respect this convention. This must happen because this class was attributed with Bootstrap's definition (i.e. randomly), before this proposal.
>>>
>>> With the number of buttons in Tiki, I recommend to either use different class names so we can distinguish what is done from what is old, or to document in the page that many usages of these classes do not respect that convention.
>>>
>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>> Envoyé : 21 juin 2018 12:26
>>>>
>>>> Hi,
>>>>
>>>> I made a page here:
>>>> https://themes.tiki.org/Organization-of-button-colors-in-Tiki .
>>>>
>>>> — Gary
>>>>
>>>> On 6/21/2018 12:41 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>> Envoyé : 20 juin 2018 11:04
>>>>>>
>>>>>> Hi,
>>>>>>
>>>>>> Responses inline below:
>>>>>>
>>>>>> On 6/20/2018 10:25 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>> Envoyé : 20 juin 2018 01:31
>>>>>>>>
>>>>>>>> Hi,
>>>>>>>>
>>>>>>>> Responses inline, below:
>>>>>>>>
>>>>>>>> On 6/20/2018 6:33 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>>>> Envoyé : 19 juin 2018 11:47
>>>>>>>>>>
>>>>>>>>>> On 6/20/2018 12:17 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>> Envoyé : 19 juin 2018 11:07
>>>>>>>>>>>>
>>>>>>>>>>>> Hi,
>>>>>>>>>>>>
>>>>>>>>>>>> Sorry, the full name of the class is "btn-warning" (and
>>>>>>>>>>>> similar for the other button classes). See
>>>>>>>>>>>> https://getbootstrap.com/docs/4.1/components/buttons/#examples .
>>>>>>>>>>>
>>>>>>>>>>> OK. So is this a proposal to use the Bootstrap button classes
>>>>>>>>>>> (their names) in Tiki, or a
>>>> proposal
>>>>>> to
>>>>>>>>>> override (or change our overrides of) the colors assigned to these classes?
>>>>>>>>>>
>>>>>>>>>> Well, we already use the Bootstrap button classes, but they are
>>>>>>>>>> used in not a very coherent way. The proposal is to better
>>>>>>>>>> organize how they are used, according to purpose/meaning of the button.
>>>>>>>>>>
>>>>>>>>>> The colors assigned to the buttons as Bootstrap defaults can be
>>>>>>>>>> and often are overridden by themes, where usually slight
>>>>>>>>>> variations are made, like a bright blue becoming a more muted
>>>>>>>>>> blue, so the whole palette stays basically consistent with what's implied by the class names.
>>>>>>>>>
>>>>>>>>> OK. I see that Bootstrap provides several classes but fails to
>>>>>>>>> define their meaning. I would
>>>>>> normally
>>>>>>>> advise to get Bootstrap to document their stuff, but given how
>>>>>>>> hopeless they are, I'm afraid we
>>>>>> should
>>>>>>>> indeed determine our own meaning if we want to rely on these
>>>>>>>> classes (which may not be best -
>>>> I
>>>>>>>> advise to use Bootstrap as little as possible).
>>>>>>>>
>>>>>>>> The Bootstrap authors don't go into specific detail about what
>>>>>>>> "btn-danger" means or what its use case is, but the general
>>>>>>>> meaning is implied pretty clearly by the name. The task is to
>>>>>>>> decide which button instances in Tiki are appropriate for
>>>>>>>> "btn-danger", and likewise for the other button classes.
>>>>>>>
>>>>>>> Right, which we have to do because Bootstrap's authors don't
>>>>>>> bother documenting, but hey -
>>>>>> guessing can be fun...
>>>>>>
>>>>>> I don't think it's a matter of guessing. It's a matter of applying
>>>>>> the components that Bootstrap provides appropriately for Tiki
>>>>>> sites, and we're the ones in a position to decide that, not the Bootstrap authors.
>>>>>> Anyway, that's my take on it.
>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>>>
>>>>>>>>> The definitions you proposed seem good to me, except for 2 things...
>>>>>>>>>
>>>>>>>>> Regarding primary vs secondary ("Make a significant change" in
>>>>>>>>> blue and "Make an insignificant
>>>>>>>> change" in gray). "Insignificant" is obviously relative, so if we
>>>>>>>> don't have more discrete criteria, I
>>>>>> would
>>>>>>>> add more examples ("No tabs" does look very insignificant, but
>>>>>>>> what else would we have
>>>> there?).
>>>>>>>>
>>>>>>>> Yes, I just started looking at this in detail so don't have more
>>>>>>>> examples. I'll list them as I find them (on a page at themes.t.o
>>>>>>>> as Marc suggested).
>>>>>>>
>>>>>>>
>>>>>>> Thanks
>>>>>>>
>>>>>>>
>>>>>>>>>
>>>>>>>>> As for the difference between primary and success, would it be
>>>>>>>>> legal to put a confirmation for a
>>>>>> non-
>>>>>>>> destructive change as primary? If not, the purpose definition
>>>>>>>> should be clarified. (Similarly,
>>>> would it
>>>>>> be
>>>>>>>> legal to put a confirmation for a destructive change as danger?)
>>>>>>>>
>>>>>>>> I imagine it could be argued both ways (the way I proposed vs.
>>>>>>>> the way you describe here). This can use more input and thinking.
>>>>>>>
>>>>>>> I might misunderstand but my 2 questions were genuine, it was not a proposal.
>>>>>>
>>>>>> I took your questions as genuine, and hope my response was appropriate.
>>>>>
>>>>> Well, in that case I don't know what you mean by "the way I describe here".
>>>>>
>>>>>>>>> Regarding colors, Bootstrap's color for warning seems to be
>>>>>>>>> yellow. Regarding primary and
>>>>>>>> secondary, if there is no clear-cut separation between these,
>>>>>>>> should we not try choosing similar
>>>>>> colors
>>>>>>>> instead of 2 completely different like blue and gray? Would a
>>>>>>>> bright blue vs a darker blue not be clearer?
>>>>>>>>
>>>>>>>> About the separation between primary and secondary, if there's
>>>>>>>> any question about an instance, then it should probably be primary, I think.
>>>>>>>
>>>>>>> Perhaps, but my question/suggestion wasn't just about the gray zone (no pun intended).
>>>>>>>
>>>>>>>> About the colors, btn-info is also a blue shade by default, so I
>>>>>>>> think things might be uncertain with three blue button colors.
>>>>>>>
>>>>>>> I can't say it has no blue technically, but it's almost as green
>>>>>>> as blue... I would call it cyan, not blue. I
>>>>>> think they're unmistakable.
>>>>>>
>>>>>> Ok, but it seems to me you're thinking about the meanings of the
>>>>>> words "primary" and "secondary" and seeing them as representing
>>>>>> consecutive points on a scale, in which case having two similar
>>>>>> color hues would make sense. But I believe Bootstrap's use of the
>>>>>> word "secondary" is actually pretty arbitrary - I think it just
>>>>>> means another type of button that isn't "primary" and isn't one of
>>>>>> the specific-meaning button classes like "danger". For this reason,
>>>>>> there's no particular reason why the secondary button color needs any similarity to the primary color.
>>>>>> And it's up to us how to use these classes. And taking a clue from
>>>>>> the default secondary color - gray - I thought it would be
>>>>>> appropriate to use secondary buttons for the cases I described (and luci expanded on).
>>>>>
>>>>>
>>>>> If Bootstrap really provides different colors to be used as authors
>>>>> want, I agree my comment does
>>>> not apply upstream. But if we want to differentiate the 2 in terms of
>>>> significance or anything relative as you suggested, my concern would apply, to Tiki.
>>>>> Now, if we make a clear distinction between the 2 cases, one for
>>>>> actions affecting data, the other for
>>>> user-specific "view" changes, I have no problem with 2 unrelated colors.
>>>>>
>>>>>>
>>>>>> — Gary
>>>>>>
>>>>>>>
>>>>>>>> But we can see
>>>>>>>> how actual pages look and make adjustments as we go, also
>>>>>>>> checking theme implementations of these classes, etc.
>>>>>>>>
>>>>>>>> — Gary
>>>>>>>>
>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> — Gary
>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>> — Gary
>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>> On 6/19/2018 11:08 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>>>> Envoyé : 19 juin 2018 09:57
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Hi,
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> On 6/19/2018 10:30 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>>>>> Hi Gary,
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> De : Gary Cunningham-Lee
>>>>>>>>>>>>>>>> mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>>>>>> Envoyé : 19 juin 2018 00:14
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Hi,
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Since the update to Bootstrap 4, button class names and
>>>>>>>>>>>>>>>> default colors have changed. (See
>>>>>>>>>>>>>>>> https://getbootstrap.com/docs/4.0/components/buttons/
>>>>>>>>>>>>>>>> .) I'm concerned that the meaning conveyed by button
>>>>>>>>>>>>>>>> colors isn't as clear now as it was in Bootstrap 3, when
>>>>>>>>>>>>>>>> the default button color was essentially neutral and colors were used for special meaning.
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> This is a proposal to start a semantic organization of
>>>>>>>>>>>>>>>> the button classes/colors in Tiki. If there aren't
>>>>>>>>>>>>>>>> objections, I'll begin implementing this (comments/suggestions welcome, of course).
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> When you mention a class, does this mean a new class or
>>>>>>>>>>>>>>> are you referring to existing
>>>>>>>> classes?
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> The classes are existing Bootstrap classes that are already
>>>>>>>>>>>>>> being used or ready to use.
>>>>>>>>>>>>>
>>>>>>>>>>>>>
>>>>>>>>>>>>> I can't run trunk locally and the trunk demo is broken so I
>>>>>>>>>>>>> tried on Bootstrap's site and
>>>> these
>>>>>>>>>> classes
>>>>>>>>>>>> (I tried "warning") don't seem to exist there.
>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Button purpose: Make a significant change Class and
>>>>>>>>>>>>>>>> default color: primary (blue)
>>>>>>>>>>>>>>>> Examples: Save, Apply, Rename, Select, Attach
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Button purpose: Confirmation for non-destructive change
>>>>>>>>>>>>>>>> Class and default color: success (green)
>>>>>>>>>>>>>>>> Examples: Confirm
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> Could you give a precise example where this purpose can be seen?
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Probably the "Confirm action" button in the "Are you sure
>>>>>>>>>>>>>> you want to assign this module?" dialog.
>>>>>>>>>>>>>
>>>>>>>>>>>>>
>>>>>>>>>>>>> Ah, this one is just to protect again CSRF, and we should get rid of such dialogs, but I see.
>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Button purpose: Make a destructive change Class and
>>>>>>>>>>>>>>>> default color: danger (red)
>>>>>>>>>>>>>>>> Examples: Delete
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Button purpose: Confirmation for destructive change Class
>>>>>>>>>>>>>>>> and default color: warning (orange)
>>>>>>>>>>>>>>>> Examples: Are you sure?
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Button purpose: Display information Class and default
>>>>>>>>>>>>>>>> color: info (light blue)
>>>>>>>>>>>>>>>> Examples: History, Source, Preview, Find
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Button purpose: Make an insignificant change Class and
>>>>>>>>>>>>>>>> default color: secondary (gray)
>>>>>>>>>>>>>>>> Examples: Tabs/No tabs
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> On pages or sites where there aren't many buttons, the
>>>>>>>>>>>>>>>> button colors might seem random, but as the number of
>>>>>>>>>>>>>>>> buttons and user interactions increases, then hopefully
>>>>>>>>>>>>>>>> the color pattern will be more evident and useful from a UI standpoint.
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> For consistency this should be applied to icon buttons as
>>>>>>>>>>>>>>>> well, like the magnifying-glass "search" icon and the "i"
>>>>>>>>>>>>>>>> and "?" tooltip icons, in forms and so on, but not in an
>>>>>>>>>>>>>>>> array like the admin icons where color consistency is more important.
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> — Gary
> ------------------------------------------------------------------------------
> Check out the vibrant tech community on one of the world's most
> engaging tech sites, Slashdot.org! http://sdm.link/slashdot
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Hi Gary,

>De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>Envoyé : 11 août 2018 02:12
>
>Hi,
>
>I think
>
> > 3. Finish buttons which are not done
>
>is the best thing to do. So if you or anyone notices a button color that doesn't seem right, feel free to mention it and it can be corrected.

I think we misunderstand; sorry, my mail was confusing. What I meant in #3 was to finish now. If we don't have the resources or can't do that (because we don't know what remains to be done), then the discrepancy should be documented until #3 is completed.

>-- Gary
>
>On 8/11/2018 6:26 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>> Hi Gary,
>>
>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>> Envoyé : 14 juillet 2018 00:10
>>>
>>> All the buttons were given class names by Tiki devs when we were integrating Bootstrap 3, but there wasn't any real explicit coordination or plan for this, so there was some amount of randomness.
>>
>>
>> Right...
>>
>>> I think your second suggestion is a good idea, to document button instances that don't seem to have the right class. I wouldn't want to go through the files and add a new "not done" class when the same time could be spent actually correcting or adding a class for these instances.
>>
>>
>> Well, I can only see 4 (types of) options. Either:
>> 1. Identify buttons which are done, either by using different class
>> names or with "DONE" comments 2. Identify buttons which are not done
>> with "NOT DONE" comments 3. Finish buttons which are not done 4.
>> Document the issue
>>
>> I agree that #2 would probably take nearly as much effort as #3, for much less benefits, so not interesting. So either #1, #3 or #4, depending on availability.
>>
>>> — Gary
>>>
>>> On 7/13/2018 10:21 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>> The "Please choose the language for this page:" screen has a single button, "Choose language", with the btn-secondary class, which does not respect this convention. This must happen because this class was attributed with Bootstrap's definition (i.e. randomly), before this proposal.
>>>>
>>>> With the number of buttons in Tiki, I recommend to either use different class names so we can distinguish what is done from what is old, or to document in the page that many usages of these classes do not respect that convention.
>>>>
>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>> Envoyé : 21 juin 2018 12:26
>>>>>
>>>>> Hi,
>>>>>
>>>>> I made a page here:
>>>>> https://themes.tiki.org/Organization-of-button-colors-in-Tiki .
>>>>>
>>>>> — Gary
>>>>>
>>>>> On 6/21/2018 12:41 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>> Envoyé : 20 juin 2018 11:04
>>>>>>>
>>>>>>> Hi,
>>>>>>>
>>>>>>> Responses inline below:
>>>>>>>
>>>>>>> On 6/20/2018 10:25 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>>> Envoyé : 20 juin 2018 01:31
>>>>>>>>>
>>>>>>>>> Hi,
>>>>>>>>>
>>>>>>>>> Responses inline, below:
>>>>>>>>>
>>>>>>>>> On 6/20/2018 6:33 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>>>>> Envoyé : 19 juin 2018 11:47
>>>>>>>>>>>
>>>>>>>>>>> On 6/20/2018 12:17 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>>> Envoyé : 19 juin 2018 11:07
>>>>>>>>>>>>>
>>>>>>>>>>>>> Hi,
>>>>>>>>>>>>>
>>>>>>>>>>>>> Sorry, the full name of the class is "btn-warning" (and
>>>>>>>>>>>>> similar for the other button classes). See
>>>>>>>>>>>>> https://getbootstrap.com/docs/4.1/components/buttons/#examples .
>>>>>>>>>>>>
>>>>>>>>>>>> OK. So is this a proposal to use the Bootstrap button
>>>>>>>>>>>> classes (their names) in Tiki, or a
>>>>> proposal
>>>>>>> to
>>>>>>>>>>> override (or change our overrides of) the colors assigned to these classes?
>>>>>>>>>>>
>>>>>>>>>>> Well, we already use the Bootstrap button classes, but they
>>>>>>>>>>> are used in not a very coherent way. The proposal is to
>>>>>>>>>>> better organize how they are used, according to purpose/meaning of the button.
>>>>>>>>>>>
>>>>>>>>>>> The colors assigned to the buttons as Bootstrap defaults can
>>>>>>>>>>> be and often are overridden by themes, where usually slight
>>>>>>>>>>> variations are made, like a bright blue becoming a more muted
>>>>>>>>>>> blue, so the whole palette stays basically consistent with what's implied by the class names.
>>>>>>>>>>
>>>>>>>>>> OK. I see that Bootstrap provides several classes but fails to
>>>>>>>>>> define their meaning. I would
>>>>>>> normally
>>>>>>>>> advise to get Bootstrap to document their stuff, but given how
>>>>>>>>> hopeless they are, I'm afraid we
>>>>>>> should
>>>>>>>>> indeed determine our own meaning if we want to rely on these
>>>>>>>>> classes (which may not be best -
>>>>> I
>>>>>>>>> advise to use Bootstrap as little as possible).
>>>>>>>>>
>>>>>>>>> The Bootstrap authors don't go into specific detail about what
>>>>>>>>> "btn-danger" means or what its use case is, but the general
>>>>>>>>> meaning is implied pretty clearly by the name. The task is to
>>>>>>>>> decide which button instances in Tiki are appropriate for
>>>>>>>>> "btn-danger", and likewise for the other button classes.
>>>>>>>>
>>>>>>>> Right, which we have to do because Bootstrap's authors don't
>>>>>>>> bother documenting, but hey -
>>>>>>> guessing can be fun...
>>>>>>>
>>>>>>> I don't think it's a matter of guessing. It's a matter of
>>>>>>> applying the components that Bootstrap provides appropriately for
>>>>>>> Tiki sites, and we're the ones in a position to decide that, not the Bootstrap authors.
>>>>>>> Anyway, that's my take on it.
>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> The definitions you proposed seem good to me, except for 2 things...
>>>>>>>>>>
>>>>>>>>>> Regarding primary vs secondary ("Make a significant change" in
>>>>>>>>>> blue and "Make an insignificant
>>>>>>>>> change" in gray). "Insignificant" is obviously relative, so if
>>>>>>>>> we don't have more discrete criteria, I
>>>>>>> would
>>>>>>>>> add more examples ("No tabs" does look very insignificant, but
>>>>>>>>> what else would we have
>>>>> there?).
>>>>>>>>>
>>>>>>>>> Yes, I just started looking at this in detail so don't have
>>>>>>>>> more examples. I'll list them as I find them (on a page at
>>>>>>>>> themes.t.o as Marc suggested).
>>>>>>>>
>>>>>>>>
>>>>>>>> Thanks
>>>>>>>>
>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> As for the difference between primary and success, would it be
>>>>>>>>>> legal to put a confirmation for a
>>>>>>> non-
>>>>>>>>> destructive change as primary? If not, the purpose definition
>>>>>>>>> should be clarified. (Similarly,
>>>>> would it
>>>>>>> be
>>>>>>>>> legal to put a confirmation for a destructive change as
>>>>>>>>> danger?)
>>>>>>>>>
>>>>>>>>> I imagine it could be argued both ways (the way I proposed vs.
>>>>>>>>> the way you describe here). This can use more input and thinking.
>>>>>>>>
>>>>>>>> I might misunderstand but my 2 questions were genuine, it was not a proposal.
>>>>>>>
>>>>>>> I took your questions as genuine, and hope my response was appropriate.
>>>>>>
>>>>>> Well, in that case I don't know what you mean by "the way I describe here".
>>>>>>
>>>>>>>>>> Regarding colors, Bootstrap's color for warning seems to be
>>>>>>>>>> yellow. Regarding primary and
>>>>>>>>> secondary, if there is no clear-cut separation between these,
>>>>>>>>> should we not try choosing similar
>>>>>>> colors
>>>>>>>>> instead of 2 completely different like blue and gray? Would a
>>>>>>>>> bright blue vs a darker blue not be clearer?
>>>>>>>>>
>>>>>>>>> About the separation between primary and secondary, if there's
>>>>>>>>> any question about an instance, then it should probably be primary, I think.
>>>>>>>>
>>>>>>>> Perhaps, but my question/suggestion wasn't just about the gray zone (no pun intended).
>>>>>>>>
>>>>>>>>> About the colors, btn-info is also a blue shade by default, so
>>>>>>>>> I think things might be uncertain with three blue button colors.
>>>>>>>>
>>>>>>>> I can't say it has no blue technically, but it's almost as green
>>>>>>>> as blue... I would call it cyan, not blue. I
>>>>>>> think they're unmistakable.
>>>>>>>
>>>>>>> Ok, but it seems to me you're thinking about the meanings of the
>>>>>>> words "primary" and "secondary" and seeing them as representing
>>>>>>> consecutive points on a scale, in which case having two similar
>>>>>>> color hues would make sense. But I believe Bootstrap's use of the
>>>>>>> word "secondary" is actually pretty arbitrary - I think it just
>>>>>>> means another type of button that isn't "primary" and isn't one
>>>>>>> of the specific-meaning button classes like "danger". For this
>>>>>>> reason, there's no particular reason why the secondary button color needs any similarity to the primary color.
>>>>>>> And it's up to us how to use these classes. And taking a clue
>>>>>>> from the default secondary color - gray - I thought it would be
>>>>>>> appropriate to use secondary buttons for the cases I described (and luci expanded on).
>>>>>>
>>>>>>
>>>>>> If Bootstrap really provides different colors to be used as
>>>>>> authors want, I agree my comment does
>>>>> not apply upstream. But if we want to differentiate the 2 in terms
>>>>> of significance or anything relative as you suggested, my concern would apply, to Tiki.
>>>>>> Now, if we make a clear distinction between the 2 cases, one for
>>>>>> actions affecting data, the other for
>>>>> user-specific "view" changes, I have no problem with 2 unrelated colors.
>>>>>>
>>>>>>>
>>>>>>> — Gary
>>>>>>>
>>>>>>>>
>>>>>>>>> But we can see
>>>>>>>>> how actual pages look and make adjustments as we go, also
>>>>>>>>> checking theme implementations of these classes, etc.
>>>>>>>>>
>>>>>>>>> — Gary
>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> — Gary
>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>>> — Gary
>>>>>>>>>>>>>
>>>>>>>>>>>>>
>>>>>>>>>>>>> On 6/19/2018 11:08 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>>>>> De : Gary Cunningham-Lee
>>>>>>>>>>>>>>> mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>>>>> Envoyé : 19 juin 2018 09:57
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> Hi,
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> On 6/19/2018 10:30 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>>>>>> Hi Gary,
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> De : Gary Cunningham-Lee
>>>>>>>>>>>>>>>>> mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>>>>>>> Envoyé : 19 juin 2018 00:14
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> Hi,
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> Since the update to Bootstrap 4, button class names and
>>>>>>>>>>>>>>>>> default colors have changed. (See
>>>>>>>>>>>>>>>>> https://getbootstrap.com/docs/4.0/components/buttons/
>>>>>>>>>>>>>>>>> .) I'm concerned that the meaning conveyed by button
>>>>>>>>>>>>>>>>> colors isn't as clear now as it was in Bootstrap 3,
>>>>>>>>>>>>>>>>> when the default button color was essentially neutral and colors were used for special meaning.
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> This is a proposal to start a semantic organization of
>>>>>>>>>>>>>>>>> the button classes/colors in Tiki. If there aren't
>>>>>>>>>>>>>>>>> objections, I'll begin implementing this (comments/suggestions welcome, of course).
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> When you mention a class, does this mean a new class or
>>>>>>>>>>>>>>>> are you referring to existing
>>>>>>>>> classes?
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> The classes are existing Bootstrap classes that are
>>>>>>>>>>>>>>> already being used or ready to use.
>>>>>>>>>>>>>>
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> I can't run trunk locally and the trunk demo is broken so
>>>>>>>>>>>>>> I tried on Bootstrap's site and
>>>>> these
>>>>>>>>>>> classes
>>>>>>>>>>>>> (I tried "warning") don't seem to exist there.
>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> Button purpose: Make a significant change Class and
>>>>>>>>>>>>>>>>> default color: primary (blue)
>>>>>>>>>>>>>>>>> Examples: Save, Apply, Rename, Select, Attach
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> Button purpose: Confirmation for non-destructive change
>>>>>>>>>>>>>>>>> Class and default color: success (green)
>>>>>>>>>>>>>>>>> Examples: Confirm
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Could you give a precise example where this purpose can be seen?
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> Probably the "Confirm action" button in the "Are you sure
>>>>>>>>>>>>>>> you want to assign this module?" dialog.
>>>>>>>>>>>>>>
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Ah, this one is just to protect again CSRF, and we should get rid of such dialogs, but I see.
>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> Button purpose: Make a destructive change Class and
>>>>>>>>>>>>>>>>> default color: danger (red)
>>>>>>>>>>>>>>>>> Examples: Delete
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> Button purpose: Confirmation for destructive change
>>>>>>>>>>>>>>>>> Class and default color: warning (orange)
>>>>>>>>>>>>>>>>> Examples: Are you sure?
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> Button purpose: Display information Class and default
>>>>>>>>>>>>>>>>> color: info (light blue)
>>>>>>>>>>>>>>>>> Examples: History, Source, Preview, Find
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> Button purpose: Make an insignificant change Class and
>>>>>>>>>>>>>>>>> default color: secondary (gray)
>>>>>>>>>>>>>>>>> Examples: Tabs/No tabs
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> On pages or sites where there aren't many buttons, the
>>>>>>>>>>>>>>>>> button colors might seem random, but as the number of
>>>>>>>>>>>>>>>>> buttons and user interactions increases, then hopefully
>>>>>>>>>>>>>>>>> the color pattern will be more evident and useful from a UI standpoint.
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> For consistency this should be applied to icon buttons
>>>>>>>>>>>>>>>>> as well, like the magnifying-glass "search" icon and the "i"
>>>>>>>>>>>>>>>>> and "?" tooltip icons, in forms and so on, but not in
>>>>>>>>>>>>>>>>> an array like the admin icons where color consistency is more important.
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> — Gary
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 4402 Japan

Hi Chealer,

Yes, we should finish now, ideally. As a practical matter, it will take
some time along with the rest of trunk development. To document specific
discrepancies would take as long as to fix the instances being
documented (if I understand your suggested options correctly).

-- Gary

On 8/14/2018 1:42 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
> Hi Gary,
>
>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>> Envoyé : 11 août 2018 02:12
>>
>> Hi,
>>
>> I think
>>
>>> 3. Finish buttons which are not done
>>
>> is the best thing to do. So if you or anyone notices a button color that doesn't seem right, feel free to mention it and it can be corrected.
>
> I think we misunderstand; sorry, my mail was confusing. What I meant in #3 was to finish now. If we don't have the resources or can't do that (because we don't know what remains to be done), then the discrepancy should be documented until #3 is completed.
>
>> — Gary
>>
>> On 8/11/2018 6:26 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>> Hi Gary,
>>>
>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>> Envoyé : 14 juillet 2018 00:10
>>>>
>>>> All the buttons were given class names by Tiki devs when we were integrating Bootstrap 3, but there wasn't any real explicit coordination or plan for this, so there was some amount of randomness.
>>>
>>>
>>> Right...
>>>
>>>> I think your second suggestion is a good idea, to document button instances that don't seem to have the right class. I wouldn't want to go through the files and add a new "not done" class when the same time could be spent actually correcting or adding a class for these instances.
>>>
>>>
>>> Well, I can only see 4 (types of) options. Either:
>>> 1. Identify buttons which are done, either by using different class
>>> names or with "DONE" comments 2. Identify buttons which are not done
>>> with "NOT DONE" comments 3. Finish buttons which are not done 4.
>>> Document the issue
>>>
>>> I agree that #2 would probably take nearly as much effort as #3, for much less benefits, so not interesting. So either #1, #3 or #4, depending on availability.
>>>
>>>> — Gary
>>>>
>>>> On 7/13/2018 10:21 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>> The "Please choose the language for this page:" screen has a single button, "Choose language", with the btn-secondary class, which does not respect this convention. This must happen because this class was attributed with Bootstrap's definition (i.e. randomly), before this proposal.
>>>>>
>>>>> With the number of buttons in Tiki, I recommend to either use different class names so we can distinguish what is done from what is old, or to document in the page that many usages of these classes do not respect that convention.
>>>>>
>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>> Envoyé : 21 juin 2018 12:26
>>>>>>
>>>>>> Hi,
>>>>>>
>>>>>> I made a page here:
>>>>>> https://themes.tiki.org/Organization-of-button-colors-in-Tiki .
>>>>>>
>>>>>> — Gary
>>>>>>
>>>>>> On 6/21/2018 12:41 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>> Envoyé : 20 juin 2018 11:04
>>>>>>>>
>>>>>>>> Hi,
>>>>>>>>
>>>>>>>> Responses inline below:
>>>>>>>>
>>>>>>>> On 6/20/2018 10:25 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>>>> Envoyé : 20 juin 2018 01:31
>>>>>>>>>>
>>>>>>>>>> Hi,
>>>>>>>>>>
>>>>>>>>>> Responses inline, below:
>>>>>>>>>>
>>>>>>>>>> On 6/20/2018 6:33 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>> Envoyé : 19 juin 2018 11:47
>>>>>>>>>>>>
>>>>>>>>>>>> On 6/20/2018 12:17 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>>>> Envoyé : 19 juin 2018 11:07
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Hi,
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Sorry, the full name of the class is "btn-warning" (and
>>>>>>>>>>>>>> similar for the other button classes). See
>>>>>>>>>>>>>> https://getbootstrap.com/docs/4.1/components/buttons/#examples .
>>>>>>>>>>>>>
>>>>>>>>>>>>> OK. So is this a proposal to use the Bootstrap button
>>>>>>>>>>>>> classes (their names) in Tiki, or a
>>>>>> proposal
>>>>>>>> to
>>>>>>>>>>>> override (or change our overrides of) the colors assigned to these classes?
>>>>>>>>>>>>
>>>>>>>>>>>> Well, we already use the Bootstrap button classes, but they
>>>>>>>>>>>> are used in not a very coherent way. The proposal is to
>>>>>>>>>>>> better organize how they are used, according to purpose/meaning of the button.
>>>>>>>>>>>>
>>>>>>>>>>>> The colors assigned to the buttons as Bootstrap defaults can
>>>>>>>>>>>> be and often are overridden by themes, where usually slight
>>>>>>>>>>>> variations are made, like a bright blue becoming a more muted
>>>>>>>>>>>> blue, so the whole palette stays basically consistent with what's implied by the class names.
>>>>>>>>>>>
>>>>>>>>>>> OK. I see that Bootstrap provides several classes but fails to
>>>>>>>>>>> define their meaning. I would
>>>>>>>> normally
>>>>>>>>>> advise to get Bootstrap to document their stuff, but given how
>>>>>>>>>> hopeless they are, I'm afraid we
>>>>>>>> should
>>>>>>>>>> indeed determine our own meaning if we want to rely on these
>>>>>>>>>> classes (which may not be best -
>>>>>> I
>>>>>>>>>> advise to use Bootstrap as little as possible).
>>>>>>>>>>
>>>>>>>>>> The Bootstrap authors don't go into specific detail about what
>>>>>>>>>> "btn-danger" means or what its use case is, but the general
>>>>>>>>>> meaning is implied pretty clearly by the name. The task is to
>>>>>>>>>> decide which button instances in Tiki are appropriate for
>>>>>>>>>> "btn-danger", and likewise for the other button classes.
>>>>>>>>>
>>>>>>>>> Right, which we have to do because Bootstrap's authors don't
>>>>>>>>> bother documenting, but hey -
>>>>>>>> guessing can be fun...
>>>>>>>>
>>>>>>>> I don't think it's a matter of guessing. It's a matter of
>>>>>>>> applying the components that Bootstrap provides appropriately for
>>>>>>>> Tiki sites, and we're the ones in a position to decide that, not the Bootstrap authors.
>>>>>>>> Anyway, that's my take on it.
>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> The definitions you proposed seem good to me, except for 2 things...
>>>>>>>>>>>
>>>>>>>>>>> Regarding primary vs secondary ("Make a significant change" in
>>>>>>>>>>> blue and "Make an insignificant
>>>>>>>>>> change" in gray). "Insignificant" is obviously relative, so if
>>>>>>>>>> we don't have more discrete criteria, I
>>>>>>>> would
>>>>>>>>>> add more examples ("No tabs" does look very insignificant, but
>>>>>>>>>> what else would we have
>>>>>> there?).
>>>>>>>>>>
>>>>>>>>>> Yes, I just started looking at this in detail so don't have
>>>>>>>>>> more examples. I'll list them as I find them (on a page at
>>>>>>>>>> themes.t.o as Marc suggested).
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> Thanks
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> As for the difference between primary and success, would it be
>>>>>>>>>>> legal to put a confirmation for a
>>>>>>>> non-
>>>>>>>>>> destructive change as primary? If not, the purpose definition
>>>>>>>>>> should be clarified. (Similarly,
>>>>>> would it
>>>>>>>> be
>>>>>>>>>> legal to put a confirmation for a destructive change as
>>>>>>>>>> danger?)
>>>>>>>>>>
>>>>>>>>>> I imagine it could be argued both ways (the way I proposed vs.
>>>>>>>>>> the way you describe here). This can use more input and thinking.
>>>>>>>>>
>>>>>>>>> I might misunderstand but my 2 questions were genuine, it was not a proposal.
>>>>>>>>
>>>>>>>> I took your questions as genuine, and hope my response was appropriate.
>>>>>>>
>>>>>>> Well, in that case I don't know what you mean by "the way I describe here".
>>>>>>>
>>>>>>>>>>> Regarding colors, Bootstrap's color for warning seems to be
>>>>>>>>>>> yellow. Regarding primary and
>>>>>>>>>> secondary, if there is no clear-cut separation between these,
>>>>>>>>>> should we not try choosing similar
>>>>>>>> colors
>>>>>>>>>> instead of 2 completely different like blue and gray? Would a
>>>>>>>>>> bright blue vs a darker blue not be clearer?
>>>>>>>>>>
>>>>>>>>>> About the separation between primary and secondary, if there's
>>>>>>>>>> any question about an instance, then it should probably be primary, I think.
>>>>>>>>>
>>>>>>>>> Perhaps, but my question/suggestion wasn't just about the gray zone (no pun intended).
>>>>>>>>>
>>>>>>>>>> About the colors, btn-info is also a blue shade by default, so
>>>>>>>>>> I think things might be uncertain with three blue button colors.
>>>>>>>>>
>>>>>>>>> I can't say it has no blue technically, but it's almost as green
>>>>>>>>> as blue... I would call it cyan, not blue. I
>>>>>>>> think they're unmistakable.
>>>>>>>>
>>>>>>>> Ok, but it seems to me you're thinking about the meanings of the
>>>>>>>> words "primary" and "secondary" and seeing them as representing
>>>>>>>> consecutive points on a scale, in which case having two similar
>>>>>>>> color hues would make sense. But I believe Bootstrap's use of the
>>>>>>>> word "secondary" is actually pretty arbitrary - I think it just
>>>>>>>> means another type of button that isn't "primary" and isn't one
>>>>>>>> of the specific-meaning button classes like "danger". For this
>>>>>>>> reason, there's no particular reason why the secondary button color needs any similarity to the primary color.
>>>>>>>> And it's up to us how to use these classes. And taking a clue
>>>>>>>> from the default secondary color - gray - I thought it would be
>>>>>>>> appropriate to use secondary buttons for the cases I described (and luci expanded on).
>>>>>>>
>>>>>>>
>>>>>>> If Bootstrap really provides different colors to be used as
>>>>>>> authors want, I agree my comment does
>>>>>> not apply upstream. But if we want to differentiate the 2 in terms
>>>>>> of significance or anything relative as you suggested, my concern would apply, to Tiki.
>>>>>>> Now, if we make a clear distinction between the 2 cases, one for
>>>>>>> actions affecting data, the other for
>>>>>> user-specific "view" changes, I have no problem with 2 unrelated colors.
>>>>>>>
>>>>>>>>
>>>>>>>> — Gary
>>>>>>>>
>>>>>>>>>
>>>>>>>>>> But we can see
>>>>>>>>>> how actual pages look and make adjustments as we go, also
>>>>>>>>>> checking theme implementations of these classes, etc.
>>>>>>>>>>
>>>>>>>>>> — Gary
>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>> — Gary
>>>>>>>>>>>>
>>>>>>>>>>>>>
>>>>>>>>>>>>>
>>>>>>>>>>>>>> — Gary
>>>>>>>>>>>>>>
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> On 6/19/2018 11:08 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>>>>>> De : Gary Cunningham-Lee
>>>>>>>>>>>>>>>> mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>>>>>> Envoyé : 19 juin 2018 09:57
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Hi,
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> On 6/19/2018 10:30 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>>>>>>> Hi Gary,
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> De : Gary Cunningham-Lee
>>>>>>>>>>>>>>>>>> mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>>>>>>>> Envoyé : 19 juin 2018 00:14
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> Hi,
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> Since the update to Bootstrap 4, button class names and
>>>>>>>>>>>>>>>>>> default colors have changed. (See
>>>>>>>>>>>>>>>>>> https://getbootstrap.com/docs/4.0/components/buttons/
>>>>>>>>>>>>>>>>>> .) I'm concerned that the meaning conveyed by button
>>>>>>>>>>>>>>>>>> colors isn't as clear now as it was in Bootstrap 3,
>>>>>>>>>>>>>>>>>> when the default button color was essentially neutral and colors were used for special meaning.
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> This is a proposal to start a semantic organization of
>>>>>>>>>>>>>>>>>> the button classes/colors in Tiki. If there aren't
>>>>>>>>>>>>>>>>>> objections, I'll begin implementing this (comments/suggestions welcome, of course).
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> When you mention a class, does this mean a new class or
>>>>>>>>>>>>>>>>> are you referring to existing
>>>>>>>>>> classes?
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> The classes are existing Bootstrap classes that are
>>>>>>>>>>>>>>>> already being used or ready to use.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> I can't run trunk locally and the trunk demo is broken so
>>>>>>>>>>>>>>> I tried on Bootstrap's site and
>>>>>> these
>>>>>>>>>>>> classes
>>>>>>>>>>>>>> (I tried "warning") don't seem to exist there.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> Button purpose: Make a significant change Class and
>>>>>>>>>>>>>>>>>> default color: primary (blue)
>>>>>>>>>>>>>>>>>> Examples: Save, Apply, Rename, Select, Attach
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> Button purpose: Confirmation for non-destructive change
>>>>>>>>>>>>>>>>>> Class and default color: success (green)
>>>>>>>>>>>>>>>>>> Examples: Confirm
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> Could you give a precise example where this purpose can be seen?
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Probably the "Confirm action" button in the "Are you sure
>>>>>>>>>>>>>>>> you want to assign this module?" dialog.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> Ah, this one is just to protect again CSRF, and we should get rid of such dialogs, but I see.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> Button purpose: Make a destructive change Class and
>>>>>>>>>>>>>>>>>> default color: danger (red)
>>>>>>>>>>>>>>>>>> Examples: Delete
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> Button purpose: Confirmation for destructive change
>>>>>>>>>>>>>>>>>> Class and default color: warning (orange)
>>>>>>>>>>>>>>>>>> Examples: Are you sure?
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> Button purpose: Display information Class and default
>>>>>>>>>>>>>>>>>> color: info (light blue)
>>>>>>>>>>>>>>>>>> Examples: History, Source, Preview, Find
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> Button purpose: Make an insignificant change Class and
>>>>>>>>>>>>>>>>>> default color: secondary (gray)
>>>>>>>>>>>>>>>>>> Examples: Tabs/No tabs
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> On pages or sites where there aren't many buttons, the
>>>>>>>>>>>>>>>>>> button colors might seem random, but as the number of
>>>>>>>>>>>>>>>>>> buttons and user interactions increases, then hopefully
>>>>>>>>>>>>>>>>>> the color pattern will be more evident and useful from a UI standpoint.
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> For consistency this should be applied to icon buttons
>>>>>>>>>>>>>>>>>> as well, like the magnifying-glass "search" icon and the "i"
>>>>>>>>>>>>>>>>>> and "?" tooltip icons, in forms and so on, but not in
>>>>>>>>>>>>>>>>>> an array like the admin icons where color consistency is more important.
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> — Gary
> ------------------------------------------------------------------------------
> Check out the vibrant tech community on one of the world's most
> engaging tech sites, Slashdot.org! http://sdm.link/slashdot
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

>De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>Envoyé : 13 août 2018 13:09
>
>Hi Chealer,
>
>Yes, we should finish now, ideally. As a practical matter, it will take some time along with the rest of trunk development. To document specific discrepancies would take as long as to fix the instances being documented (if I understand your suggested options correctly).


I am not sure what you mean by "specific discrepancies", but to be clear, the fourth option I suggested was not to document that button foo, bar, baz... don't follow that convention. My suggestion was to add a small sentence to the wiki page explaining that the convention is used for many buttons, but that many other buttons do not follow that convention yet.

Anyway, if you're saying that #3 will be completed by the time Tiki 19 releases, I guess this is no big deal.

>-- Gary
>
>On 8/14/2018 1:42 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>> Hi Gary,
>>
>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>> Envoyé : 11 août 2018 02:12
>>>
>>> Hi,
>>>
>>> I think
>>>
>>>> 3. Finish buttons which are not done
>>>
>>> is the best thing to do. So if you or anyone notices a button color that doesn't seem right, feel free to mention it and it can be corrected.
>>
>> I think we misunderstand; sorry, my mail was confusing. What I meant in #3 was to finish now. If we don't have the resources or can't do that (because we don't know what remains to be done), then the discrepancy should be documented until #3 is completed.
>>
>>> — Gary
>>>
>>> On 8/11/2018 6:26 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>> Hi Gary,
>>>>
>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>> Envoyé : 14 juillet 2018 00:10
>>>>>
>>>>> All the buttons were given class names by Tiki devs when we were integrating Bootstrap 3, but there wasn't any real explicit coordination or plan for this, so there was some amount of randomness.
>>>>
>>>>
>>>> Right...
>>>>
>>>>> I think your second suggestion is a good idea, to document button instances that don't seem to have the right class. I wouldn't want to go through the files and add a new "not done" class when the same time could be spent actually correcting or adding a class for these instances.
>>>>
>>>>
>>>> Well, I can only see 4 (types of) options. Either:
>>>> 1. Identify buttons which are done, either by using different class
>>>> names or with "DONE" comments 2. Identify buttons which are not done
>>>> with "NOT DONE" comments 3. Finish buttons which are not done 4.
>>>> Document the issue
>>>>
>>>> I agree that #2 would probably take nearly as much effort as #3, for much less benefits, so not interesting. So either #1, #3 or #4, depending on availability.
>>>>
>>>>> — Gary
>>>>>
>>>>> On 7/13/2018 10:21 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>> The "Please choose the language for this page:" screen has a single button, "Choose language", with the btn-secondary class, which does not respect this convention. This must happen because this class was attributed with Bootstrap's definition (i.e. randomly), before this proposal.
>>>>>>
>>>>>> With the number of buttons in Tiki, I recommend to either use different class names so we can distinguish what is done from what is old, or to document in the page that many usages of these classes do not respect that convention.
>>>>>>
>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>> Envoyé : 21 juin 2018 12:26
>>>>>>>
>>>>>>> Hi,
>>>>>>>
>>>>>>> I made a page here:
>>>>>>> https://themes.tiki.org/Organization-of-button-colors-in-Tiki .
>>>>>>>
>>>>>>> — Gary
>>>>>>>
>>>>>>> On 6/21/2018 12:41 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>>> Envoyé : 20 juin 2018 11:04
>>>>>>>>>
>>>>>>>>> Hi,
>>>>>>>>>
>>>>>>>>> Responses inline below:
>>>>>>>>>
>>>>>>>>> On 6/20/2018 10:25 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>>>>> Envoyé : 20 juin 2018 01:31
>>>>>>>>>>>
>>>>>>>>>>> Hi,
>>>>>>>>>>>
>>>>>>>>>>> Responses inline, below:
>>>>>>>>>>>
>>>>>>>>>>> On 6/20/2018 6:33 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>>> De : Gary Cunningham-Lee mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>>> Envoyé : 19 juin 2018 11:47
>>>>>>>>>>>>>
>>>>>>>>>>>>> On 6/20/2018 12:17 AM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>>>>> De : Gary Cunningham-Lee
>>>>>>>>>>>>>>> mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>>>>> Envoyé : 19 juin 2018 11:07
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> Hi,
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> Sorry, the full name of the class is "btn-warning" (and
>>>>>>>>>>>>>>> similar for the other button classes). See
>>>>>>>>>>>>>>> https://getbootstrap.com/docs/4.1/components/buttons/#examples .
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> OK. So is this a proposal to use the Bootstrap button
>>>>>>>>>>>>>> classes (their names) in Tiki, or a
>>>>>>> proposal
>>>>>>>>> to
>>>>>>>>>>>>> override (or change our overrides of) the colors assigned to these classes?
>>>>>>>>>>>>>
>>>>>>>>>>>>> Well, we already use the Bootstrap button classes, but they
>>>>>>>>>>>>> are used in not a very coherent way. The proposal is to
>>>>>>>>>>>>> better organize how they are used, according to purpose/meaning of the button.
>>>>>>>>>>>>>
>>>>>>>>>>>>> The colors assigned to the buttons as Bootstrap defaults
>>>>>>>>>>>>> can be and often are overridden by themes, where usually
>>>>>>>>>>>>> slight variations are made, like a bright blue becoming a
>>>>>>>>>>>>> more muted blue, so the whole palette stays basically consistent with what's implied by the class names.
>>>>>>>>>>>>
>>>>>>>>>>>> OK. I see that Bootstrap provides several classes but fails
>>>>>>>>>>>> to define their meaning. I would
>>>>>>>>> normally
>>>>>>>>>>> advise to get Bootstrap to document their stuff, but given
>>>>>>>>>>> how hopeless they are, I'm afraid we
>>>>>>>>> should
>>>>>>>>>>> indeed determine our own meaning if we want to rely on these
>>>>>>>>>>> classes (which may not be best -
>>>>>>> I
>>>>>>>>>>> advise to use Bootstrap as little as possible).
>>>>>>>>>>>
>>>>>>>>>>> The Bootstrap authors don't go into specific detail about
>>>>>>>>>>> what "btn-danger" means or what its use case is, but the
>>>>>>>>>>> general meaning is implied pretty clearly by the name. The
>>>>>>>>>>> task is to decide which button instances in Tiki are
>>>>>>>>>>> appropriate for "btn-danger", and likewise for the other button classes.
>>>>>>>>>>
>>>>>>>>>> Right, which we have to do because Bootstrap's authors don't
>>>>>>>>>> bother documenting, but hey -
>>>>>>>>> guessing can be fun...
>>>>>>>>>
>>>>>>>>> I don't think it's a matter of guessing. It's a matter of
>>>>>>>>> applying the components that Bootstrap provides appropriately
>>>>>>>>> for Tiki sites, and we're the ones in a position to decide that, not the Bootstrap authors.
>>>>>>>>> Anyway, that's my take on it.
>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>> The definitions you proposed seem good to me, except for 2 things...
>>>>>>>>>>>>
>>>>>>>>>>>> Regarding primary vs secondary ("Make a significant change"
>>>>>>>>>>>> in blue and "Make an insignificant
>>>>>>>>>>> change" in gray). "Insignificant" is obviously relative, so
>>>>>>>>>>> if we don't have more discrete criteria, I
>>>>>>>>> would
>>>>>>>>>>> add more examples ("No tabs" does look very insignificant,
>>>>>>>>>>> but what else would we have
>>>>>>> there?).
>>>>>>>>>>>
>>>>>>>>>>> Yes, I just started looking at this in detail so don't have
>>>>>>>>>>> more examples. I'll list them as I find them (on a page at
>>>>>>>>>>> themes.t.o as Marc suggested).
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Thanks
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>> As for the difference between primary and success, would it
>>>>>>>>>>>> be legal to put a confirmation for a
>>>>>>>>> non-
>>>>>>>>>>> destructive change as primary? If not, the purpose definition
>>>>>>>>>>> should be clarified. (Similarly,
>>>>>>> would it
>>>>>>>>> be
>>>>>>>>>>> legal to put a confirmation for a destructive change as
>>>>>>>>>>> danger?)
>>>>>>>>>>>
>>>>>>>>>>> I imagine it could be argued both ways (the way I proposed vs.
>>>>>>>>>>> the way you describe here). This can use more input and thinking.
>>>>>>>>>>
>>>>>>>>>> I might misunderstand but my 2 questions were genuine, it was not a proposal.
>>>>>>>>>
>>>>>>>>> I took your questions as genuine, and hope my response was appropriate.
>>>>>>>>
>>>>>>>> Well, in that case I don't know what you mean by "the way I describe here".
>>>>>>>>
>>>>>>>>>>>> Regarding colors, Bootstrap's color for warning seems to be
>>>>>>>>>>>> yellow. Regarding primary and
>>>>>>>>>>> secondary, if there is no clear-cut separation between these,
>>>>>>>>>>> should we not try choosing similar
>>>>>>>>> colors
>>>>>>>>>>> instead of 2 completely different like blue and gray? Would a
>>>>>>>>>>> bright blue vs a darker blue not be clearer?
>>>>>>>>>>>
>>>>>>>>>>> About the separation between primary and secondary, if
>>>>>>>>>>> there's any question about an instance, then it should probably be primary, I think.
>>>>>>>>>>
>>>>>>>>>> Perhaps, but my question/suggestion wasn't just about the gray zone (no pun intended).
>>>>>>>>>>
>>>>>>>>>>> About the colors, btn-info is also a blue shade by default,
>>>>>>>>>>> so I think things might be uncertain with three blue button colors.
>>>>>>>>>>
>>>>>>>>>> I can't say it has no blue technically, but it's almost as
>>>>>>>>>> green as blue... I would call it cyan, not blue. I
>>>>>>>>> think they're unmistakable.
>>>>>>>>>
>>>>>>>>> Ok, but it seems to me you're thinking about the meanings of
>>>>>>>>> the words "primary" and "secondary" and seeing them as
>>>>>>>>> representing consecutive points on a scale, in which case
>>>>>>>>> having two similar color hues would make sense. But I believe
>>>>>>>>> Bootstrap's use of the word "secondary" is actually pretty
>>>>>>>>> arbitrary - I think it just means another type of button that
>>>>>>>>> isn't "primary" and isn't one of the specific-meaning button
>>>>>>>>> classes like "danger". For this reason, there's no particular reason why the secondary button color needs any similarity to the primary color.
>>>>>>>>> And it's up to us how to use these classes. And taking a clue
>>>>>>>>> from the default secondary color - gray - I thought it would be
>>>>>>>>> appropriate to use secondary buttons for the cases I described (and luci expanded on).
>>>>>>>>
>>>>>>>>
>>>>>>>> If Bootstrap really provides different colors to be used as
>>>>>>>> authors want, I agree my comment does
>>>>>>> not apply upstream. But if we want to differentiate the 2 in
>>>>>>> terms of significance or anything relative as you suggested, my concern would apply, to Tiki.
>>>>>>>> Now, if we make a clear distinction between the 2 cases, one for
>>>>>>>> actions affecting data, the other for
>>>>>>> user-specific "view" changes, I have no problem with 2 unrelated colors.
>>>>>>>>
>>>>>>>>>
>>>>>>>>> — Gary
>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>> But we can see
>>>>>>>>>>> how actual pages look and make adjustments as we go, also
>>>>>>>>>>> checking theme implementations of these classes, etc.
>>>>>>>>>>>
>>>>>>>>>>> — Gary
>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>>>
>>>>>>>>>>>>> — Gary
>>>>>>>>>>>>>
>>>>>>>>>>>>>>
>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> — Gary
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> On 6/19/2018 11:08 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>>>>>>> De : Gary Cunningham-Lee
>>>>>>>>>>>>>>>>> mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>>>>>>> Envoyé : 19 juin 2018 09:57
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> Hi,
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> On 6/19/2018 10:30 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>>>>>>>>>>>>>>>>>> Hi Gary,
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> De : Gary Cunningham-Lee
>>>>>>>>>>>>>>>>>>> mailto:gary_c@cunningham-lee.com
>>>>>>>>>>>>>>>>>>> Envoyé : 19 juin 2018 00:14
>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> Hi,
>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> Since the update to Bootstrap 4, button class names
>>>>>>>>>>>>>>>>>>> and default colors have changed. (See
>>>>>>>>>>>>>>>>>>> https://getbootstrap.com/docs/4.0/components/buttons/
>>>>>>>>>>>>>>>>>>> .) I'm concerned that the meaning conveyed by button
>>>>>>>>>>>>>>>>>>> colors isn't as clear now as it was in Bootstrap 3,
>>>>>>>>>>>>>>>>>>> when the default button color was essentially neutral and colors were used for special meaning.
>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> This is a proposal to start a semantic organization
>>>>>>>>>>>>>>>>>>> of the button classes/colors in Tiki. If there aren't
>>>>>>>>>>>>>>>>>>> objections, I'll begin implementing this (comments/suggestions welcome, of course).
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> When you mention a class, does this mean a new class
>>>>>>>>>>>>>>>>>> or are you referring to existing
>>>>>>>>>>> classes?
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> The classes are existing Bootstrap classes that are
>>>>>>>>>>>>>>>>> already being used or ready to use.
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> I can't run trunk locally and the trunk demo is broken
>>>>>>>>>>>>>>>> so I tried on Bootstrap's site and
>>>>>>> these
>>>>>>>>>>>>> classes
>>>>>>>>>>>>>>> (I tried "warning") don't seem to exist there.
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> Button purpose: Make a significant change Class and
>>>>>>>>>>>>>>>>>>> default color: primary (blue)
>>>>>>>>>>>>>>>>>>> Examples: Save, Apply, Rename, Select, Attach
>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> Button purpose: Confirmation for non-destructive
>>>>>>>>>>>>>>>>>>> change Class and default color: success (green)
>>>>>>>>>>>>>>>>>>> Examples: Confirm
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>> Could you give a precise example where this purpose can be seen?
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> Probably the "Confirm action" button in the "Are you
>>>>>>>>>>>>>>>>> sure you want to assign this module?" dialog.
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Ah, this one is just to protect again CSRF, and we should get rid of such dialogs, but I see.
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> Button purpose: Make a destructive change Class and
>>>>>>>>>>>>>>>>>>> default color: danger (red)
>>>>>>>>>>>>>>>>>>> Examples: Delete
>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> Button purpose: Confirmation for destructive change
>>>>>>>>>>>>>>>>>>> Class and default color: warning (orange)
>>>>>>>>>>>>>>>>>>> Examples: Are you sure?
>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> Button purpose: Display information Class and default
>>>>>>>>>>>>>>>>>>> color: info (light blue)
>>>>>>>>>>>>>>>>>>> Examples: History, Source, Preview, Find
>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> Button purpose: Make an insignificant change Class
>>>>>>>>>>>>>>>>>>> and default color: secondary (gray)
>>>>>>>>>>>>>>>>>>> Examples: Tabs/No tabs
>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> On pages or sites where there aren't many buttons,
>>>>>>>>>>>>>>>>>>> the button colors might seem random, but as the
>>>>>>>>>>>>>>>>>>> number of buttons and user interactions increases,
>>>>>>>>>>>>>>>>>>> then hopefully the color pattern will be more evident and useful from a UI standpoint.
>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> For consistency this should be applied to icon
>>>>>>>>>>>>>>>>>>> buttons as well, like the magnifying-glass "search" icon and the "i"
>>>>>>>>>>>>>>>>>>> and "?" tooltip icons, in forms and so on, but not in
>>>>>>>>>>>>>>>>>>> an array like the admin icons where color consistency is more important.
>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>> — Gary
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
___
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.