<table><tr><td style="">ngraham requested changes to this revision.<br />ngraham added a comment.<br />This revision now requires changes to proceed.
</td><a style="text-decoration: none; padding: 4px 8px; margin: 0 8px 8px; float: right; color: #464C5C; font-weight: bold; border-radius: 3px; background-color: #F7F7F9; background-image: linear-gradient(to bottom,#fff,#f1f0f1); display: inline-block; border: 1px solid rgba(71,87,120,.2);" href="https://phabricator.kde.org/D25375">View Revision</a></tr></table><br /><div><div><p>In general the UI here is pretty good. I think we can polish it a bit. In particular, instead of having a header for a section and then a checkbox below it to enable that section with the same text as the header, here's an idea for an alternative: just use the checkbox itself as the header. For example:</p>
<div class="remarkup-code-block" style="margin: 12px 0;" data-code-lang="text" data-sigil="remarkup-code-block"><pre class="remarkup-code" style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; padding: 12px; margin: 0; background: rgba(71, 87, 120, 0.08);">[] Audible bell
Custom Bell: [] Sound: [ ]
[] Visual bell
Duration: [99]
Visual effect: (o) Flash color: [ color ]
( ) Invert screen</pre></div>
<p>Another thing: you can save a lot of space by taking advantage of the properties of a FormLayout by splitting strings up a bit. For example, for Slow Keys, you can do the following:</p>
<div class="remarkup-code-block" style="margin: 12px 0;" data-code-lang="text" data-sigil="remarkup-code-block"><pre class="remarkup-code" style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; padding: 12px; margin: 0; background: rgba(71, 87, 120, 0.08);">Show System Bell: [x] When a key is pressed
[ ] When a key is accepted
[ ] When a key is rejected</pre></div>
<p>Finally, I notice that the <span><span class="phui-tag-view phui-tag-type-shade phui-tag-grey phui-tag-shade "><span class="phui-tag-core ">Apply</span></span></span> button never gets enabled when a control is changed.</p></div></div><br /><div><strong>INLINE COMMENTS</strong><div><div style="margin: 6px 0 12px 0;"><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D25375#inline-143741">View Inline</a><span style="color: #4b4d51; font-weight: bold;">Bell.qml:35</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">id: systemBell</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">text:</span> <span style="color: #004012">i18n</span><span class="p">(</span><span style="color: #766510">"Use system bell"</span><span class="p">)</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">checked:</span> <span style="color: #004012">kcm</span><span class="p">.</span><span style="color: #004012">bellSettings</span><span class="p">.</span><span style="color: #004012">systemBell</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">Instead of having a header and then a checkbox to enable it, with the same text as the header, let's just use the checkbox itself as the header. i.e.:</p>
<div class="remarkup-code-block" style="margin: 12px 0;" data-code-lang="text" data-sigil="remarkup-code-block"><pre class="remarkup-code" style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; padding: 12px; margin: 0; background: rgba(71, 87, 120, 0.08);">[] Audible bell
Custom Bell: [] Sound: [ ]
[] Visual bell
Duration: [99]
Visual effect: (o) Flash color: [ color ]
( ) Invert screen</pre></div></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D25375#inline-143740">View Inline</a><span style="color: #4b4d51; font-weight: bold;">Bell.qml:47</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span class="p">}</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #004012">QQC2</span><span class="p">.</span><span style="color: #004012">TextField</span> <span class="p">{</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">id: textEdit</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">Indent this by one GridUnit to show that its dependency on the checkbox above it, or place it on the same line</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D25375#inline-143737">View Inline</a><span style="color: #4b4d51; font-weight: bold;">Bell.qml:70</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">text:</span> <span style="color: #004012">i18n</span><span class="p">(</span><span style="color: #766510">"Invert Screen"</span><span class="p">)</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">enabled:</span> <span style="color: #aa2211">!</span><span style="color: #004012">kcm</span><span class="p">.</span><span style="color: #004012">bellSettings</span><span class="p">.</span><span style="color: #004012">isImmutable</span><span class="p">(</span><span style="color: #766510">"InvertScreen"</span><span class="p">)</span> <span style="color: #aa2211">&&</span> <span style="color: #004012">kcm</span><span class="p">.</span><span style="color: #004012">bellSettings</span><span class="p">.</span><span style="color: #004012">visibleBell</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">checked:</span> <span style="color: #004012">kcm</span><span class="p">.</span><span style="color: #004012">bellSettings</span><span class="p">.</span><span style="color: #004012">invertScreen</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">This radio button never gets enabled</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D25375#inline-143738">View Inline</a><span style="color: #4b4d51; font-weight: bold;">Bell.qml:81</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">onCheckedChanged:</span> <span style="color: #004012">kcm</span><span class="p">.</span><span style="color: #004012">bellSettings</span><span class="p">.</span><span style="color: #004012">invertScreen</span> <span style="color: #aa2211">=</span> <span style="color: #aa2211">!</span><span style="color: #004012">checked</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">enabled:</span> <span style="color: #aa2211">!</span><span style="color: #004012">kcm</span><span class="p">.</span><span style="color: #004012">bellSettings</span><span class="p">.</span><span style="color: #004012">isImmutable</span><span class="p">(</span><span style="color: #766510">"InvertScreen"</span><span class="p">)</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span class="p">}</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">This radio button never gets enabled</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D25375#inline-143739">View Inline</a><span style="color: #4b4d51; font-weight: bold;">Bell.qml:94</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">onValueChanged:</span> <span style="color: #004012">kcm</span><span class="p">.</span><span style="color: #004012">bellSettings</span><span class="p">.</span><span style="color: #004012">visibleBellPause</span> <span style="color: #aa2211">=</span> <span style="color: #004012">value</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">Kirigami.FormData.label:</span> <span style="color: #004012">i18n</span><span class="p">(</span><span style="color: #766510">"Duration"</span><span class="p">)</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span class="p">}</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">"Duration:"</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D25375#inline-143742">View Inline</a><span style="color: #4b4d51; font-weight: bold;">MouseNavigation.qml:38</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">onCheckStateChanged:</span> <span style="color: #004012">kcm</span><span class="p">.</span><span style="color: #004012">mouseSettings</span><span class="p">.</span><span style="color: #004012">mouseKeys</span> <span style="color: #aa2211">=</span> <span style="color: #004012">checked</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">enabled:</span> <span style="color: #aa2211">!</span><span style="color: #004012">kcm</span><span class="p">.</span><span style="color: #004012">keyboardSettings</span><span class="p">.</span><span style="color: #004012">isImmutable</span><span class="p">(</span><span style="color: #766510">"MouseKeys"</span><span class="p">)</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span class="p">}</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">This checkbox never gets enabled</p></div></div></div></div></div><br /><div><strong>REPOSITORY</strong><div><div>R119 Plasma Desktop</div></div></div><br /><div><strong>REVISION DETAIL</strong><div><a href="https://phabricator.kde.org/D25375">https://phabricator.kde.org/D25375</a></div></div><br /><div><strong>To: </strong>tcanabrava, ngraham<br /><strong>Cc: </strong>ognarb, mart, ngraham, plasma-devel, LeGast00n, The-Feren-OS-Dev, jraleigh, fbampaloukas, GB_2, ragreen, ZrenBot, alexeymin, himcesjf, lesliezhai, ali-mohamed, jensreuterberg, abetts, sebas, apol, ahiemstra<br /></div>