IGNITE-8199 Web console: Improved UI/UX of Confirmation dialog for unsaved changes.
Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/2105290b Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/2105290b Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/2105290b Branch: refs/heads/ignite-7251 Commit: 2105290b2b04363b766635e0455fae5d9d1ef2f2 Parents: caa7bd9 Author: Ilya Borisov <[email protected]> Authored: Thu Sep 13 22:40:44 2018 +0700 Committer: Alexey Kuznetsov <[email protected]> Committed: Thu Sep 13 22:40:44 2018 +0700 ---------------------------------------------------------------------- .../services/ConfigChangesGuard.js | 2 +- .../app/components/page-configure/style.scss | 24 ++++++++++++++++++-- 2 files changed, 23 insertions(+), 3 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/2105290b/modules/web-console/frontend/app/components/page-configure/services/ConfigChangesGuard.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-configure/services/ConfigChangesGuard.js b/modules/web-console/frontend/app/components/page-configure/services/ConfigChangesGuard.js index a84b120..7e2df80 100644 --- a/modules/web-console/frontend/app/components/page-configure/services/ConfigChangesGuard.js +++ b/modules/web-console/frontend/app/components/page-configure/services/ConfigChangesGuard.js @@ -74,7 +74,7 @@ export default class ConfigChangesGuard { You have unsaved changes. Are you sure you want to discard them? </p> - <details> + <details class='config-changes-guard__details'> <summary>Click here to see changes</summary> <div style='max-height: 400px; overflow: auto;'>${html.format(changes)}</div> </details> http://git-wip-us.apache.org/repos/asf/ignite/blob/2105290b/modules/web-console/frontend/app/components/page-configure/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-configure/style.scss b/modules/web-console/frontend/app/components/page-configure/style.scss index 851eddf..365e058 100644 --- a/modules/web-console/frontend/app/components/page-configure/style.scss +++ b/modules/web-console/frontend/app/components/page-configure/style.scss @@ -33,10 +33,10 @@ page-configure { display: flex; flex-direction: row; padding: 10px 20px 10px 30px; - box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.2), 0px 3px 4px -1px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 3px 4px -1px rgba(0, 0, 0, 0.2); position: -webkit-sticky; position: sticky; - bottom: 0px; + bottom: 0; // margin: 20px -30px -30px; background: white; border-radius: 0 0 4px 4px; @@ -313,3 +313,23 @@ list-editable .pc-form-group__text-title { background: white; z-index: 2; } + +.config-changes-guard__details { + cursor: pointer; + + summary { + list-style: none; + } + + summary::-webkit-details-marker { + display: none; + } + + summary:before { + content: 'ⶠ'; + } + + &[open] summary:before { + content: '⼠'; + } +}
