https://tracker.ceph.com/https://tracker.ceph.com/favicon.ico2018-08-24T10:26:41ZCeph Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1193942018-08-24T10:26:41ZVolker Theile
<ul><li><strong>Subject</strong> changed from <i>mgr/dashboard: UI style guide how to handle invalid form input</i> to <i>mgr/dashboard: Style guide to give a the UI an overall look and feel</i></li><li><strong>Description</strong> updated (<a title="View differences" href="/journals/119394/diff?detail_id=117930">diff</a>)</li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1193982018-08-24T11:39:44ZPatrick Seidensal
<ul></ul><p>Volker Theile wrote:</p>
<blockquote>
<ul>
<li>Mark invalid form fields as red and show a meaningful error message</li>
<li>Do NOT use notifications for form validation messages</li>
<li>Use async validation during typing wherever possible</li>
<li>Do NOT use notifications on successful actions</li>
<li>...</li>
</ul>
</blockquote>
<p>I agree with all those points but also think, as you do, that, for some form elements, it's not possible to validate on every keystroke simply because of the time it'd take or the load it'd produce.</p>
<p>+1</p> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1194352018-08-27T07:59:02ZLenz Grimmer
<ul><li><strong>Related to</strong> <i><a class="issue tracker-6 status-1 priority-3 priority-lowest" href="/issues/24210">Documentation #24210</a>: mgr/dashboard: Implement and document UX design workflow and guidelines</i> added</li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1196022018-08-29T10:40:04ZStephan Müller
<ul></ul><p>I would suggest to add a list of components that should be used if possible.<br />As this topic has the potential to raise a lot of bike-shed painting discussions, it makes sense to schedule a meeting to evaluate all needed things in an ehterpad first and than add the outcome to this, to this tracker issue or just link the etherpad</p> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1197192018-08-31T14:53:40ZPatrick Seidensal
<ul></ul><p>I was just asked to use the WarningPanelComponent for error messages to reuse components which are already there and to be consistent accros the UI. I think it's worth noting it in the style guide, too.</p> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1198842018-09-05T09:43:52ZPatrick Seidensal
<ul></ul><p>Although specifically created for SUSE, it might make sense to adopt the <a href="https://eosdesignsystem.herokuapp.com/writing/ux-writing" class="external">Writing Guides</a> in the UI wherever text is presented to the user. There's also a similar <a href="https://brand.redhat.com/applications/writing/" class="external">Writing Guide</a> from RedHat. <ins>Discussing the writing style seems to be worth of having a separate discussion</ins> about it, as it could be rather comprehensive and time consuming. It could also make sense to cherry pick from both worlds.</p> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1198952018-09-05T11:02:31ZErnesto Puerta
<ul><li><strong>Related to</strong> <i><a class="issue tracker-4 status-1 priority-4 priority-default parent" href="/issues/35688">Cleanup #35688</a>: mgr/dashboard: Community branding & styling recommendations</i> added</li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1200722018-09-06T07:31:41ZVolker Theile
<ul><li><strong>Description</strong> updated (<a title="View differences" href="/journals/120072/diff?detail_id=118675">diff</a>)</li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1200732018-09-06T07:32:22ZVolker Theile
<ul><li><strong>Description</strong> updated (<a title="View differences" href="/journals/120073/diff?detail_id=118676">diff</a>)</li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1201132018-09-06T19:13:55ZPatrick Seidensal
<ul></ul><p>We use different buttons to cancel a dialog/wizard. One type of button looks just like a link, the other is a white button. And one time there's a back button instead of a cancel button. Sometimes it's a modal dialog, sometimes the dialog is embedded in the page. I don't have a strong opinion on any of these but we should stick to one type of button and dialog.</p>
<p>Some examples:</p>
<p><img src="https://tracker.ceph.com/attachments/download/3690/add-user-embedded.png" alt="" /><br /><img src="https://tracker.ceph.com/attachments/download/3691/confirmation-dialog.png" alt="" /><br /><img src="https://tracker.ceph.com/attachments/download/3692/custom-dialog-osd-flags.png" alt="" /></p>
<p><em>edit:</em></p>
<p>There seems to be consistency with adding/creating something. These forms are always embedded.</p> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1201442018-09-07T09:31:37ZPatrick Seidensal
<ul><li><strong>File</strong> <a href="/attachments/download/3690/add-user-embedded.png">add-user-embedded.png</a> <a class="icon-only icon-magnifier" title="View" href="/attachments/3690/add-user-embedded.png">View</a> added</li><li><strong>File</strong> <a href="/attachments/download/3691/confirmation-dialog.png">confirmation-dialog.png</a> <a class="icon-only icon-magnifier" title="View" href="/attachments/3691/confirmation-dialog.png">View</a> added</li><li><strong>File</strong> <a href="/attachments/download/3692/custom-dialog-osd-flags.png">custom-dialog-osd-flags.png</a> <a class="icon-only icon-magnifier" title="View" href="/attachments/3692/custom-dialog-osd-flags.png">View</a> added</li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1209192018-09-18T09:23:44ZLenz Grimmer
<ul><li><strong>Related to</strong> <i><a class="issue tracker-4 status-3 priority-3 priority-lowest closed" href="/issues/36070">Cleanup #36070</a>: mgr/dashboard: Use a unified quoting style (double quotes) across all UI elements (e.g. notifications)</i> added</li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1213962018-09-25T12:05:17ZVolker Theile
<ul><li><strong>Description</strong> updated (<a title="View differences" href="/journals/121396/diff?detail_id=120069">diff</a>)</li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1290522019-02-11T12:27:35ZLenz Grimmer
<ul><li><strong>Related to</strong> <i><a class="issue tracker-4 status-5 priority-4 priority-default closed" href="/issues/33606">Cleanup #33606</a>: mgr/dashboard: Use ModalComponent in all modals</i> added</li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1290542019-02-11T12:28:00ZLenz Grimmer
<ul><li><strong>Related to</strong> <i><a class="issue tracker-1 status-1 priority-4 priority-default" href="/issues/34312">Bug #34312</a>: mgr/dashboard: Style guide for frontend/Angular coding conventions</i> added</li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1290682019-02-11T12:35:05ZLenz Grimmer
<ul><li><strong>Related to</strong> <i><a class="issue tracker-2 status-3 priority-4 priority-default closed" href="/issues/36607">Feature #36607</a>: mgr/dashboard: Display description on mouse hover</i> added</li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1614422020-03-22T13:14:41ZBhaskar Aditya
<ul></ul><p>Hi, My name is Bhaskar, a GSoC applicant, I have submitted my draft proposal on the project idea CEPH dashboard UI enhancements and this is one of the issues under it.<br />Can you suggest any starting point for this issue??</p> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1729082020-08-14T08:40:42ZLenz Grimmer
<ul><li><strong>Tags</strong> set to <i>documentation</i></li><li><strong>Assignee</strong> set to <i>Ishan Rai</i></li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1781472020-10-28T14:48:07ZLenz Grimmer
<ul><li><strong>Status</strong> changed from <i>New</i> to <i>Resolved</i></li><li><strong>Target version</strong> set to <i>v16.0.0</i></li></ul> Dashboard - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feelhttps://tracker.ceph.com/issues/27218?journal_id=1914012021-04-15T17:25:23ZErnesto Puerta
<ul><li><strong>Project</strong> changed from <i>mgr</i> to <i>Dashboard</i></li><li><strong>Category</strong> changed from <i>132</i> to <i>General</i></li></ul>