Change multi-select action

[allisonmuise]

Instead of adding to the current selection when any area of a record in the table is selected, provide a check box on the left side of each row in the table. Features are selected by clicking the check box, and unselected by clearing the check box (or the 'clear all' menu option)

Clicking a feature in the map should:

• highlight the row in the table
• scroll the table to show the record
• not add the row to the selection

Check boxes should be styled like these:
HTML:

<p>
    <input type="checkbox" id="test1" />
    <label for="test1">Red</label>
</p>
<p>
    <input type="checkbox" id="test2" checked="checked" />
    <label for="test2">Yellow</label>
</p>

CSS:

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 2px;
  width: 17px; height: 17px;
  border: 1px solid #777;
  background: #f8f8f8;
}

/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: 0; left: 4px;
  font-size: 14px;
  color: #09ad7e;
  transition: all .2s;
}

/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}

[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

/* hover style just for information */
label:hover:before {
  border: 1px solid #4778d9!important;
}





/* Useless styles, just for demo design */

body {
  font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
  color: #777;
}

h1, h2 {
  margin-bottom: 5px;
  font-weight: normal;
  text-align: center;
}

h2 {
  margin: 5px 0 2em;
  color: #aaa;
}

form {
  width: 80px;
  margin: 0 auto;
}

.txtcenter {
  margin-top: 4em;
  font-size: .9em;
  text-align: center;
  color: #aaa;
}
.copy {

 margin-top: 2em; 
}

.copy a {
 text-decoration: none;
 color: #4778d9;
}```

[allisonmuise]

Single click of feature on map = Active feature
Investigate options for adding to selection from map: CTRL+click or clicking the active feature again? Please recommend an approach.

[CTLocalGovTeam]

@allisonmuise
We will use the following approach:

1. Clicking a feature on map = Active feature
2. Clicking the active feature = Will get added to Selected Items
3. Clicking the Feature which is Active + Selected = Will deselect and deactivate the feature

Please confirm.

[allisonmuise]

Please proceed with this approach

[CTLocalGovTeam]

@allisonmuise,
We are noticing a strange issue with the style being used for displaying the tick mark in the checkbox, i.e.,

/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔'; // heavy check mark
  position: absolute;
  top: 0; left: 4px;
  font-size: 14px;
  color: #09ad7e; // green color
  transition: all .2s;
}

On Samsung Tab 4 (Android v4.4.2), the tick mark always appears red in color, inspite of assigning green color to it. On desktops and iPad, it displays correctly in green color.

If you browse this reference url that displays these font symbols on a desktop browser you will see the heavy check mark is displayed in black color

However if the same url is browsed on a Samsung Tab 4, it would look red in color as in this screnshot taken on a Samsung Tab 4.

In fact, if you browse this issue on a Samsung Tab 4, you will see a thick red tick in the code block above, and thick black tick on all other browsers.

[allisonmuise]

This issue seems to be limited to Android 4.4.2.

Here are my test results:

HTC M8 (v5.0.1) : black
Samsung Galaxy Tab 2 (v4.1.2) : black
Samsung Galaxy S4 (v4.4.2) : red
Samsung Galaxy Tab S (v4.4.2) : red

What are the options to avoid browser inconsistencies? Could we use another font or a sprite without losing performance? What would be the impact on dev time?

[allisonmuise]

possibly related to this?
https://code.google.com/p/android/issues/detail?id=61771

[CTLocalGovTeam]

To avoid browser & device inconsistencies we can use the following approach.

Instead of using font or sprite image. We can use a png image to display the check mark.

For implementing this we need to change few CSS properties as shown below

a.  Original properties:-
content: '✔';
top: 0;
left: 4px;

b.  Changed properties:-
content: url('../images/check-mark-14.png');
top: 2px;
left: 3px;

This approach can be incorporated in Sprint 2. Please suggest.

We have gone through the suggested link (code.google.com), but we think that is not related to the current issue.

Below is a screenshot of how the green tick png image would appear in all devices & browsers.

[allisonmuise]

That works for me! Please proceed with this approach.

[CTLocalGovTeam]

@allisonmuise

Ok.
This will be accommodated in sprint 2.

[allisonmuise]

verified