Message control icons, with no text

Discussion in 'Suggestions' started by WildcatMedia, Jan 25, 2017.

  1. WildcatMedia

    WildcatMedia Customer

    8
    4
    3
    Style: Flat Awesome + 1.5.12 / XenBase framework
    Property Group: [XB] Font Awesome

    As I mentioned in another thread, a nice option would be to disable the text labels next to the message control icons. With both visible, they could be somewhat redundant.

    We can currently turn on the Font Awesome icons next to the message controls here:

    upload_2017-1-25_23-25-27.png
    Which results in this:

    [​IMG]

    A second option to add to the properties might be:

    [ x ] Disable Message Control Text Labels
    Removes labels next to Font Awesome icons in message controls

    Which would give us this:

    [​IMG]

    Note that this would apply to both the public and private controls.

    Since the lone "+" would not mean anything to most users, I would suggest the multi-quote possibly be two icons, as such:

    [​IMG]

    Or even fa-quote-left would possibly work:
    upload_2017-1-25_23-31-12.png ...or... + upload_2017-1-25_23-31-16.png (with the + being in bolded text, and not the Font Awesome + symbol).

    The orange + in a square is a CSS addition I made to access the sharing dialog (the "Add-This" service)--it is simply hyperlinked to the same place as the post number next to it, as members did not know that was a link. I will be replacing that with the fa-share-alt icon upload_2017-1-25_23-33-4.png . (But, that is something I would do myself, as it is not an official part of the theme.) Just wanted to note it here, in case anyone wonders where it came from.

    The only hitch I can think of is the Like icon. Clicking once "likes" a thread. Click it again and the thread is "unliked." In the text version, the Like text changes to Unlike. Perhaps the theme could toggle between these two Font Awesome icons--the filled icon thumbs-up to indicate it is liked, and the other icon thumbs-o-up to indicate it is not liked.

    upload_2017-1-25_23-43-24.png
     
    Russ and Steve like this.
  2. Russ

    Russ Designer

    10,827
    2,561
    113
    We setup a lot of the other FA icons area spans wrapped around the text so if you have an icon enabled you can use CSS to hide the text wrapped in the span. We can look into doing this approach on the message area instead of pure CSS.
     
    WildcatMedia likes this.
  3. WildcatMedia

    WildcatMedia Customer

    8
    4
    3
    An easy way I thought of was to wrap the text in conditionals, but that may not work when you get to the Multi Quote and Like buttons, as they change state when clicked on. For instance, in the post template:

    Code:
    Copy Source
    <xen:if is="{$post.canDelete}"><a href="{xen:link posts/delete, $post}" class="item control delete OverlayTrigger"><span></span>{xen: phrase delete}</a></xen:if>
    Wrapping {xen: phrase delete} with a {xen:if ....} conditional based on the selection of that checkbox could turn the text off.

    But it gets more complicated for Likes:

    Code:
    Copy Source
    <xen:if is="{$post.canLike}">
                        <a href="{xen:link posts/like, $post}" class="LikeLink item control {xen:if $post.like_date, unlike, like}" data-container="#likes-post-{$post.post_id}"><span></span><span class="LikeLabel">{xen:if $post.like_date, {xen: phrase unlike}, {xen:phrase like}}</span></a>
                    </xen:if>
    I can't recall if a xen:if can be nested within another in the manner I am thinking of. (Been a while since I've done this.)

    {xen:if $post.like_date, {xen:if ....}{xen: phrase unlike}{/xen:if}, {xen:if ....}{xen: phrase like}{/xen:if}}

    If there is an easier way in CSS to toggle them, that would work. But after poking around with it a bit myself, I think the logic involved would probably require getting into the actual templates, as you say.

    Thanks for looking into this. :)

    (Dang it...had to put spaces in xen: phrase so I wouldn't get xen:phrase. :D )
     

Share This Page