[ZBX-10777] Consistent visual style for radios and checkboxes Created: 2016 May 11 Updated: 2017 May 30 Resolved: 2016 Nov 15 |
|
Status: | Closed |
Project: | ZABBIX BUGS AND ISSUES |
Component/s: | Frontend (F) |
Affects Version/s: | 3.0.1, 3.0.2 |
Fix Version/s: | 3.4.0alpha1 |
Type: | Incident report | Priority: | Trivial |
Reporter: | Pavel Amosov (Inactive) | Assignee: | Unassigned |
Resolution: | Fixed | Votes: | 0 |
Labels: | usability | ||
Remaining Estimate: | Not Specified | ||
Time Spent: | Not Specified | ||
Original Estimate: | Not Specified |
Attachments: |
![]() ![]() ![]() ![]() ![]() |
Description |
Radio buttons and checkboxes should look the same across all browsers. Currently, each browser styles them differently. |
Comments |
Comment by Aleksandrs Saveljevs [ 2016 Jul 05 ] |
Design available in development branch svn://svn.zabbix.com/branches/dev/ZBX-10777-trunk (originally svn://svn.zabbix.com/branches/dev/ZBX-10777). |
Comment by Aleksandrs Saveljevs [ 2016 Jul 05 ] |
(1) We have the following code in screen.scss: %form-custom-check-radio-style { ... clip: rect(1px, 1px, 1px, 1px); According to https://developer.mozilla.org/en-US/docs/Web/CSS/clip, the usage of "clip" is deprecated in favor of "clip-path". See also https://css-tricks.com/clipping-masking-css/ . Shall we rewrite it using "clip-path"? PavelA We should probably use something else instead, because: http://caniuse.com/#search=clip-path PavelA I suggest we replace 'clip' with 'display: none'. RESOLVED in r60895 asaveljevs Thank you! CLOSED. |
Comment by Aleksandrs Saveljevs [ 2016 Jul 19 ] |
(2) Radio buttons done in r60990. Checkboxes seem to be a bit more complicated from the programming design perspective. asaveljevs The solution offered in r61102 overrides CCheckBox->toString() method to generate a <label> element with a <span> in it after the <input>. It seems to work, but looks like a hack, because CCheckBox extends a CTag, so theoretically it should return one tag only. asaveljevs Another point to think about is that after this change, if we go to host's "Encryption" tab, the "Connections from host" strings became a label for the first checkbox. This is because CFormList->addRow() now sees a CCheckBox instead of CLabel. One possible solution to this would be to check if checkbox has a non-empty label. asaveljevs Made proper checkboxes all over frontend in r62833, r62837, r62838, r62962, r62963, and r62965. asaveljevs The problem with CFormList fixed in r62966 by applying the suggestion above. RESOLVED. iivs CLOSED |
Comment by Aleksandrs Saveljevs [ 2016 Jul 20 ] |
(3) It seems that methods startToString(), bodyToString(), and endToString() should be protected, not public. asaveljevs RESOLVED in r61123 (even though the commit message says a different thing). iivs Looks good. Fixed minor typo in r62476 asaveljevs CLOSED |
Comment by Ivo Kurzemnieks [ 2016 Sep 12 ] |
(4) Are we no longer supporting Opera 12.x? More and more visual bugs appear. PavelA Common, Opera 12 was released more then 3 years ago. The latest release number is 37 iivs Your argument is invalid. Some systems have 12.16 as latest version till today. Also if you would check once in a while older IE browsers, for example IE9 which we still support, you would notice that checkboxes there are also broken. Unfortunately we don't have any Opera 12.x usage statistics. Actually we don't have any statistics at all, but anyway for IE9 this sould be fixed regardless. Also you're wrong (again) - latest version is 39. Dear iivs, IE9 issue should be RESOLVED in r62440 iivs This fixed Opera 12.16 for me as well. Thank you, dear PavelA. |
Comment by Aleksandrs Saveljevs [ 2016 Sep 27 ] |
(5) Development was originally done in svn://svn.zabbix.com/branches/dev/ZBX-10777 , which was based on 3.0. Since the feature is now meant for 3.3, there is a need for a new branch based on the current trunk. asaveljevs RESOLVED in svn://svn.zabbix.com/branches/dev/ZBX-10777-trunk in r62817 and r62819. There were conflicts, so please verify that it has been properly merged. iivs Branch was a bit outdated and there were more conflicts in svn://svn.zabbix.com/branches/dev/ZBX-10777-trunk branch. Resolved conflicts in r63007. Please, review. asaveljevs Looks good. There was another conflict with (6) in iivs Thanks! CLOSED |
Comment by Aleksandrs Saveljevs [ 2016 Sep 27 ] |
(6) As pointed out by PavelA, radio buttons in host interfaces still use the old style, so the solution in (2) in r60990 is not complete. asaveljevs RESOLVED in r62828 and r62833. iivs CLOSED. |
Comment by Aleksandrs Saveljevs [ 2016 Sep 28 ] |
(7) There seems to be a problem in mass update forms: asaveljevs RESOLVED in r62838 by using PavelA's suggestion: put the string (e.g., "Severity") into checkbox's label and put the checkbox's span into the same label after the string. iivs CLOSED. |
Comment by Gunars Pujats (Inactive) [ 2016 Oct 03 ] |
(8) This subissue moved here from "for" attribute is not required since <input> is already inside the <label> tag. It can be removed in the following locations:
asaveljevs We have tried to take <input> elements outside of <label> elements during this development. It seems that we have taken them out in all pages listed above. Please check if there is anything more to be done. iivs CLOSED. |
Comment by Aleksandrs Saveljevs [ 2016 Oct 04 ] |
(9) No translation string changes. iivs CLOSED. |
Comment by Ivo Kurzemnieks [ 2016 Oct 06 ] |
(10) Please, add PHP doc and describe the newly added functions and parameters:
asaveljevs RESOLVED in r63083. iivs I added @return to new functions in r63129. Please, review. asaveljevs CLOSED |
Comment by Ivo Kurzemnieks [ 2016 Oct 06 ] |
(11) CVisibilityBox:45 PHP dev team came to conclusion that parent must be replaced with $this. asaveljevs RESOLVED in r63061. iivs CLOSED |
Comment by Ivo Kurzemnieks [ 2016 Oct 06 ] |
(12) CFormList:25 seems like cipbox is unused. I couldn't find usage in any previous Zabbix versions. Probaly can be removed. asaveljevs According to svn log, CIpBox first appeared in r6784, existed for a little while, and got removed in r16195. asaveljevs Removed from CFormList in r63063. RESOLVED. iivs CLOSED |
Comment by Ivo Kurzemnieks [ 2016 Oct 06 ] |
(13) configuration.host.edit.js.php:14 uses only one class checkbox-radio but configuration.host.edit.js.php:372 and configuration.services.edit.js.php:60 uses all 4 classes input checkbox checkbox-radio pointer. I think one class is enough. asaveljevs RESOLVED in r63064. iivs CLOSED |
Comment by Ivo Kurzemnieks [ 2016 Oct 06 ] |
(14) In Host edit form -> SNMP interfaces, it feels like it needs more space between the input text field and checkbox. is several other places like media popup, encryption tab the spacing feels off and indeed it is off by 1px. The line hight is fluid. It could be solved by using floats, clears and line-height, but are we're going to fix that, is a different question. See attached image. PavelA There's a "list-check-radio" class for vertical check/radio lists that sets the proper vertical spacing and text wrapping. Looks like it's not present. Please check forms.html. Current html markup differs from the prototype asaveljevs Added "list-hor-check-radio" to SNMP bulk checkbox in r63067 to synchronize it with the prototype mentioned above. Added "list-check-radio" to other checkbox lists in r63074. RESOLVED. iivs Now that's more like it. I slightly changed coding style, because it was hard to differentiate to which class methods belong. See r63130 asaveljevs Looks good. CLOSED. |
Comment by Ivo Kurzemnieks [ 2016 Oct 12 ] |
TESTED, but please review my changes before merging. |
Comment by Natalja Romancaka [ 2016 Oct 14 ] |
(15) In Monitoring -> Latest data in Firefox can't uncheck checkbox, in other browsers can't check and uncheck checkbox. Work only check/uncheck all checkboxes asaveljevs RESOLVED in r63224. iivs CLOSED |
Comment by Natalja Romancaka [ 2016 Oct 17 ] |
(16) Internet Explorer 9+ text in buttons is not centred in Configuration->Hosts->Zabbix server->Discovery (two templated discovery rules) PavelA I couldn't reproduce such behavior. Looks like it's already fixed. asaveljevs I assume that discussing this with natalja.zabbix did not find any evidence to the contrary. Therefore, closing this sub-issue as CANNOT REPRODUCE. |
Comment by Aleksandrs Saveljevs [ 2016 Oct 31 ] |
Available in pre-3.3.0 (trunk) r63444. |
Comment by Martins Valkovskis [ 2016 Nov 01 ] |
*(17)* Documentation: Updating all relevant frontend screenshots will have to be done over time. RESOLVED asaveljevs Perfect! CLOSED. |
Comment by Alexander Vladishev [ 2016 Nov 02 ] |
(18) increased height of the tables with check boxes PavelA Should be RESOLVED in r63482 gunarspujats CLOSED Available in pre-3.3.0 (trunk) r63524. |
Comment by Alexander Vladishev [ 2016 Nov 10 ] |
(19) Broken multiple selection of table rows with "shift" key PavelA RESOLVED in r63777 asaveljevs Looks great! CLOSED. Fixed in pre-3.3.0 (trunk) r63779. |