Author Topic: Checkboxes in Elastic on 1.4.0  (Read 4790 times)

Offline mats

  • Jr. Member
  • **
  • Posts: 11
Checkboxes in Elastic on 1.4.0
« on: December 07, 2019, 01:45:41 PM »
I'm trying to make the checkboxes in the mail list work as they do on Gmail, Hotmail and protonmail for example.

therefore I want to show the checkboxes all the time.
I also want to be able to check them

They seem to be generated by some java function and not through standard CSS and therefore I have been unable to mod it to behave the way I want.

I have attached a small screenshot of the checkboxes I want to be able to check

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Checkboxes in Elastic on 1.4.0
« Reply #1 on: December 08, 2019, 03:41:05 AM »
you could write a small plugin which adds this JS to the mail screen, something like this:
Code: [Select]
class elastic_checkboxes extends rcube_plugin
{
    public $task = 'mail';

    public function init()
    {
        $rcube = rcube::get_instance();

        if ($rcube->action == '') {
            $rcube->output->add_script("$('#messagelist').addClass('withselection');", 'foot');
        }
    }
}
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline mats

  • Jr. Member
  • **
  • Posts: 11
Re: Checkboxes in Elastic on 1.4.0
« Reply #2 on: December 08, 2019, 06:23:09 AM »
you could write a small plugin which adds this JS to the mail screen, something like this:
Code: [Select]
class elastic_checkboxes extends rcube_plugin
{
    public $task = 'mail';

    public function init()
    {
        $rcube = rcube::get_instance();

        if ($rcube->action == '') {
            $rcube->output->add_script("$('#messagelist').addClass('withselection');", 'foot');
        }
    }
}

Thank You. Made it like this and it did give me the checkboxes.

Code: [Select]
<?php

/**
 * elastic Check box plugin
 *
 */

class elastic_checkboxes extends rcube_plugin
{
    public 
$task 'mail';

    public function 
init()
    {
        
$rcube rcube::get_instance();

        if (
$rcube->action == '') {
            
$rcube->output->add_script("$('#messagelist').addClass('withselection');"'foot');
        }
    }
}

unfortunately it did create another issue
the area around the checkbox is also clickable. The entire red area in the attached file is clickable and I just want the checkbox to be clickable. Also I still can't get the checbox to become checked.
 

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Checkboxes in Elastic on 1.4.0
« Reply #3 on: December 08, 2019, 06:48:35 AM »
Quote
the area around the checkbox is also clickable
The plugin did not do that, its simply how that element works. The event is attached to the <td>.

Quote
Also I still can't get the checbox to become checked.
for that you'd need to write more JS which could interact with the message list once is has loaded and then select the message(s) you want.
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline alec

  • Hero Member
  • *****
  • Posts: 1,363
Re: Checkboxes in Elastic on 1.4.0
« Reply #4 on: December 08, 2019, 08:06:53 AM »
The list widget has enable_checkbox_selection() method. Use it.

rcmail.addEventListener('init', function() {
    rcmail.message_list.enable_checkbox_selection();
});

Offline mats

  • Jr. Member
  • **
  • Posts: 11
Re: Checkboxes in Elastic on 1.4.0
« Reply #5 on: December 08, 2019, 08:39:21 AM »
The list widget has enable_checkbox_selection() method. Use it.

rcmail.addEventListener('init', function() {
    rcmail.message_list.enable_checkbox_selection();
});

Thank you. I will look into that and see if I can understand it (I'm not skilled in javascript or php at all)

Offline mats

  • Jr. Member
  • **
  • Posts: 11
Re: Checkboxes in Elastic on 1.4.0
« Reply #6 on: December 08, 2019, 02:37:02 PM »
Well, now I got checkboxes but they still don't work the way I want.   :(
If I click on a message topic it checks the checkbox for that message.
I want it to select the checkbox then I click on the checkbox as an ordinary checkbox behaves.

Offline mats

  • Jr. Member
  • **
  • Posts: 11
Re: Checkboxes in Elastic on 1.4.0
« Reply #7 on: December 09, 2019, 10:51:14 AM »
To add some screenshots.

the first issue is that the entire row (in black) will select the checkbox.
Only a click on the checkbox should do that ( in my eyes (That is also how Outlook.com, gmail, proton-mail and rainloop works))

If i do click somewhere in the black the message gets selected and is loaded. (in blue)

If i now unselect the checkbox. It deselects the message and unloads it. (I just want to uncheck the checkbox. not unload the message). It results in the black picture again.

Now the "fun" begins. If i now check the checkbox. The row becomes blue again but the message is not loaded.
So the behavior isn't consistent either - this might be a bug   



« Last Edit: December 09, 2019, 11:17:27 AM by mats »

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Checkboxes in Elastic on 1.4.0
« Reply #8 on: December 09, 2019, 11:19:27 AM »
Quote
the first issue is that the entire row (in black) will select the checkbox.
The purpose of the checkbox is to indicate if the message is selected, when you click the message you select it, so the box is ticked. If you click another message with out a mod key like ctrl or shift then the selection changes and so does the state of the checkboxes.

Quote
Only a click on the checkbox should do that (That is also how Outlook.com, gmail, proton-mail and rainloop works)
On outlook.com when you select multiple messages the checkboxes are ticked no matter where you click on the row. This is not too different from Roundcube behaviour - for me at least - on outlook.com checkboxes are not visible unless you select multiple messages, on roundcube they are only visisble if you turn them on. so for "normal" single message selection the behaviour is the same, no visible tickbox. Now in Roundcube you can have the tickboxes visible all the time, IMO ticking them when the message is selected is consistent behaviour. I am not familiar with the other services you mentioned.

Quote
I just want to uncheck the checkbox. not unload the message
IMO that would be very confusing because on the one hand the lack of a tick in the checkbox would suggest the message is not selected and yet it must be selected to be the message you are viewing. In this scenario would you expect clicking "reply" on the toolbar to do?

Quote
Now the "fun" begins. If i now check the checkbox. The row becomes blue again but the message is not loaded.
So the behavior isn't consistent either - this might be a bug
The behvaiour will be slightly different if you select one message vs multiple messages as its not possible to display multiple messages in the preview pane at the same time.
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline mats

  • Jr. Member
  • **
  • Posts: 11
Re: Checkboxes in Elastic on 1.4.0
« Reply #9 on: December 09, 2019, 03:55:58 PM »
It's always hard to explain things over the internet but I'll do my best

Quote
the first issue is that the entire row (in black) will select the checkbox.
The purpose of the checkbox is to indicate if the message is selected, when you click the message you select it, so the box is ticked. If you click another message with out a mod key like ctrl or shift then the selection changes and so does the state of the checkboxes.

Well in my eyes that's two different things. One is selecting one message - that is indicated by the highlighting of the message and should not check the checkbox.
Checking the checkbox(es) or holding down control to select multiple messages means that I want to select more than one.

There is also another difference in behavior here. With Roundcube if i have one message highlighted and click on the checkboxes for two other I now have three selected messages. With Outlook or Protonmail (I was logged in to those) both of them will deselect the highighted message and only include the ones I actively checked. 

Quote
Quote
Only a click on the checkbox should do that (That is also how Outlook.com, gmail, proton-mail and rainloop works)
On outlook.com when you select multiple messages the checkboxes are ticked no matter where you click on the row.
When you select multiple messages yes - but I was still speaking of just one message and Outlook does not check the checkbox then. If you select one - only highlighting is used to indicate the selected message. That's what I want Roundcube to do to, highlight the message and do not check the checkbox for that message. I don't know if there are different versions of outlook.com but I got checkboxes (or checkcircles actually). I Attached a screenshot of it and the highligting used to show that a message is selected.

Quote
Quote
I just want to uncheck the checkbox. not unload the message
IMO that would be very confusing because on the one hand the lack of a tick in the checkbox would suggest the message is not selected and yet it must be selected to be the message you are viewing. In this scenario would you expect clicking "reply" on the toolbar to do?
I agree  ;) My error

Quote
Quote
Now the "fun" begins. If i now check the checkbox. The row becomes blue again but the message is not loaded.
So the behavior isn't consistent either - this might be a bug
The behvaiour will be slightly different if you select one message vs multiple messages as its not possible to display multiple messages in the preview pane at the same time.
Yes if there would have been more than one message selected I agree but there was only one message selected.
It gets both checked and highlighted but not loaded. You cant click on it to load it either without unselecting it first.

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Checkboxes in Elastic on 1.4.0
« Reply #10 on: December 10, 2019, 07:17:22 AM »
Of course, there are going to be some differences between different packages, there would not be a lot of value in making something identical.

Quote
When you select multiple messages yes - but I was still speaking of just one message and Outlook does not check the checkbox then. If you select one - only highlighting is used to indicate the selected message. That's what I want Roundcube to do to, highlight the message and do not check the checkbox for that message. I don't know if there are different versions of outlook.com but I got checkboxes (or checkcircles actually). I Attached a screenshot of it and the highligting used to show that a message is selected.
I don't think you can know that exactly because the checkboxes in outlook.com are hidden unless multiple messages are ticked. Yes, they show up on hover but IMO that’s not quite the same.

In the Elastic skin in Roundcube there are no checkboxes unless you choose to turn them on - coz you want to do you message selection that way. So you wouldnt generally see that the box is ticked when you only have 1 message selection because you wouldn't turn them on unless you wanted to do multiple selection.

I think in Roundcube its simply the case that the checkboxes are part of the indication of message selection, if it’s one message or one hundred the behaviour is the same. Its not something that can really be customised its part of how the list element works.
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline mats

  • Jr. Member
  • **
  • Posts: 11
Re: Checkboxes in Elastic on 1.4.0
« Reply #11 on: December 10, 2019, 02:13:00 PM »
Of course, there are going to be some differences between different packages, there would not be a lot of value in making something identical.

No, but it is a good idea to follow standards. If Google, Microsoft and even more vendors do the same thing - that is a de facto standard. My users do expect that a checkbox should behave the same way regardless of which webmail the use

Quote
Quote
When you select multiple messages yes - but I was still speaking of just one message and Outlook does not check the checkbox then. If you select one - only highlighting is used to indicate the selected message. That's what I want Roundcube to do to, highlight the message and do not check the checkbox for that message. I don't know if there are different versions of outlook.com but I got checkboxes (or checkcircles actually). I Attached a screenshot of it and the highligting used to show that a message is selected.
I don't think you can know that exactly because the checkboxes in outlook.com are hidden unless multiple messages are ticked. Yes, they show up on hover but IMO that’s not quite the same.
Outlook shows the checkbox as soon as the message is selected. The blue message in the earlier screenshot is a selected message with a very visible round(!) checkbox in it. A hovered message is not blue in color (it will however show the check circle too). 

Quote
I think in Roundcube its simply the case that the checkboxes are part of the indication of message selection, if it’s one message or one hundred the behaviour is the same. Its not something that can really be customised its part of how the list element works.
Well, in my eyes it is time to fix the listelement then.
I have started digging into list.js to see if i can figure out how to fix it. so far the results must be described as mixed ;)

Edit:
Found and removed the clickable area around the checkbox. Might be an idea to make that a configurable option
« Last Edit: December 10, 2019, 03:28:10 PM by mats »

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Checkboxes in Elastic on 1.4.0
« Reply #12 on: December 11, 2019, 05:22:52 AM »
Sure, there are certain ways of doing things in software that user expect and its good practise to follow that.

What I meant was that in Roundcube doesn’t need to implement its checkboxes in a certain way just coz outlook.com does.

If I understand right, then your only issue is about the specific behaviour when a single message is selected and in the Elastic skin the checkboxes are not visible by default, it is assumed that a user would only turn them on when they wanted to use them and if you want to use them then checking them makes sense.

Quote
Found and removed the clickable area around the checkbox. Might be an idea to make that a configurable option
I believe this is a usability feature aimed mostly at touch devices, the checkboxes are (relatively) small and some users might struggle to check them when using a touch device, expanding the target area makes the boxes easier to use.
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline mats

  • Jr. Member
  • **
  • Posts: 11
Re: Checkboxes in Elastic on 1.4.0
« Reply #13 on: December 12, 2019, 11:36:26 AM »
Sure, there are certain ways of doing things in software that user expect and its good practise to follow that.

What I meant was that in Roundcube doesn’t need to implement its checkboxes in a certain way just coz outlook.com does.
My opinion is that if outlook, Gmail, Protonmail and others do it in the same way that is a so large userbase that it has to bee seen as a standard and then that behavior should be honored. If it's just one doing it, then it's optional in my Eyes


If I understand right, then your only issue is about the specific behaviour when a single message is selected and in the Elastic skin the checkboxes are not visible by default, it is assumed that a user would only turn them on when they wanted to use them and if you want to use them then checking them makes sense.

No, my Issue is that roundcube does not follow the "standard" which makes my users complain that it doesn't work for them.

So far there are at least 4 sub issues with single message select (Multi will be looked at when this is fixed)

1. You can check the checkbox by clicking outside of the checkbox. Not a standard behavior
 - Fixed by removing the lines making the area clickable and optionally larger checkboxes
   
Code: [Select]
/*
   cell.onclick = function(e) {
    if (!$(e.target).is('input')) {
      key = rcube_event.get_modifier(e);
  console.log("click");
      $(chbox).prop('checked', !chbox.checked).change();
    }
    e.stopPropagation();

  };
  */

2.Messages gets checked without checking the checkbox. Not a standard behavior
 - Fixed by removing the automatic checking
 
Code: [Select]
//if (this.checkbox_selection)
// $('.selection > input', this.rows[id].obj).prop('checked', true);

 2.1 When checking a highlighted message the message gets deselected. Caused by logical error in highlighting
  - Fixed by adding a verification whether the message should be checked or deselected and unchecked. Not sure this is
    the optimum fix though
   
Code: [Select]
else
{
  //  Dont deselect the row if it's just a checkbox selection
  if(this.selection.length == 1  && $('.selection > input', this.rows[id].obj).prop('checked')==true)
    {
    console.log("Selection patch");
    return;
    }
   
  else  // unselect row

3. When you check and select a single message - the message isn't loaded. Usability feature that the users wants
 - Needs to intercept that checking and do the same thing as clicking on a message does


Quote
Quote
Found and removed the clickable area around the checkbox. Might be an idea to make that a configurable option
I believe this is a usability feature aimed mostly at touch devices, the checkboxes are (relatively) small and some users might struggle to check them when using a touch device, expanding the target area makes the boxes easier to use.
It makes it easier to "hit" but it also is an unexpected behavior since you did not click on the checkbox.
After thinking a little bit more on this I think a better way of doing this is to make the checkboxes larger.
It should be rather easy to set the height and width of the checkbox in CSS
I would like an option in the config file for it like use_large_checkboxes=yes that would assign a different css tag with the larger values defined;
« Last Edit: December 12, 2019, 11:40:27 AM by mats »

Offline mats

  • Jr. Member
  • **
  • Posts: 11
Re: Checkboxes in Elastic on 1.4.0
« Reply #14 on: December 17, 2019, 12:19:38 PM »
Been working a little more on this.

I have redone my patches in a little different way.

in
Code: [Select]
select_row: function(id, mod_key, with_mouse)
change
Code: [Select]
this.highlight_row(id, true) to
Code: [Select]
this.highlight_row(id, true,false,with_mouse);
That's so that my modified highlight_row can determine if a multiselect is being done with keyboard or mouse

Code: [Select]
highlight_row: function(id, multiple, norecur,with_mouse)
{
 
   
 
  if (!this.rows[id])
    return;

  if (!multiple) {
 
    if (this.selection.length > 1 || !this.in_selection(id)) {
      this.clear_selection(null, true);
      this.selection[0] = id;
      $(this.rows[id].obj).addClass('selected').attr('aria-selected', 'true');

      if (this.checkbox_selection)
  {   
        //$('.selection > input', this.rows[id].obj).prop('checked', true);
  }
}
  }
  else {
    var n,pre, post, p = this.in_selection(id, true);


    if (p === false) { // select row
   
  this.selection.push(id);
      $(this.rows[id].obj).addClass('selected').attr('aria-selected', 'true');

      if (!norecur && !this.rows[id].expanded)
  {
       
this.highlight_children(id, true);
  }


  //Multiselect mouse. Only the checked items should be highlighted
  if (with_mouse)
    {   
    for (n in this.rows)
      {
  if (!($('.selection > input', this.rows[n].obj).prop('checked')))
            {
            $(this.rows[n].obj).removeClass('selected').removeAttr('aria-selected');
        }  
          }

  else //Multiselect keyboard. Make sure all highlighted rows gets checked
  { 
for (n in this.selection)
{
  $('.selection > input', this.rows[this.selection[n]].obj).prop('checked', true);
}
  }

}
    else { //handle the first row
  if(p==0  && $('.selection > input', this.rows[id].obj).prop('checked')==true)
    {
$(this.rows[id].obj).addClass('selected').attr('aria-selected', 'true');
    }
  else // unselect row
    { 
        pre = this.selection.slice(0, p);
        post = this.selection.slice(p+1, this.selection.length);

        this.selection = pre.concat(post);
        $(this.rows[id].obj).removeClass('selected').removeAttr('aria-selected');

        if (this.checkbox_selection)
          $('.selection > input', this.rows[id].obj).prop('checked', false);

        if (!norecur && !this.rows[id].expanded)
          this.highlight_children(id, false);
}
  }
  }
},

This makes checkboxes behave more like the other webmail clients.

I have also removed the function that makes the area around a checkbox act like it was a part of the checkbox.
If someone wants bigger checkboxes in the mail list i prefer a pure CSS fix for that. something like
Code: [Select]
div#messagelist-content.scroller  .listing td.selection input[type=checkbox] {
    transform: scale(1.5);
}

Remaining on the TODO-list.
A lot of testing. 
Maybe make it a config option to use small or large checkboxes.
try to get RoundCube to load the message if there is only one message checked (and selected)

But it starts looking good in my eyes