From 72783a5f35b5817773440ab44cef2a6edb2d1b92 Mon Sep 17 00:00:00 2001 From: Mike Gerwitz Date: Wed, 8 Nov 2017 11:11:40 -0500 Subject: [PATCH 1/3] Add Dialog type id support for CSS styling * src/ui/dialog/Dialog.js (setTypeId): Add method. * src/ui/dialog/DialogDecorator.js (setTypeId): Add method. * src/ui/dialog/JqueryDialog.js (setTypeId): Add method. --- src/ui/dialog/Dialog.js | 12 ++++++++++++ src/ui/dialog/DialogDecorator.js | 12 ++++++++++++ src/ui/dialog/JqueryDialog.js | 23 +++++++++++++++++++++-- 3 files changed, 45 insertions(+), 2 deletions(-) diff --git a/src/ui/dialog/Dialog.js b/src/ui/dialog/Dialog.js index 44bd043..dd1a337 100644 --- a/src/ui/dialog/Dialog.js +++ b/src/ui/dialog/Dialog.js @@ -27,6 +27,18 @@ var Interface = require( 'easejs' ).Interface; */ module.exports = Interface( 'Dialog', { + /** + * Uniquely identify dialog type + * + * The `type_id` is exposed as a CSS class for styling. + * + * @param {string} type_id unique type identifier + * + * @return {Dialog} self + */ + 'public setTypeId': [ 'type_id' ], + + /** * Sets the dialog title * diff --git a/src/ui/dialog/DialogDecorator.js b/src/ui/dialog/DialogDecorator.js index 9f574c5..200ab0a 100644 --- a/src/ui/dialog/DialogDecorator.js +++ b/src/ui/dialog/DialogDecorator.js @@ -84,6 +84,18 @@ module.exports = AbstractClass }, + /** + * Uniquely identify dialog type + * + * The `type_id` is exposed as a CSS class for styling. + * + * @param {string} type_id unique type identifier + * + * @return {DialogDecorator} self + */ + 'public proxy setTypeId': '_dialog', + + /** * Sets the dialog title * diff --git a/src/ui/dialog/JqueryDialog.js b/src/ui/dialog/JqueryDialog.js index e195fb8..723594d 100644 --- a/src/ui/dialog/JqueryDialog.js +++ b/src/ui/dialog/JqueryDialog.js @@ -60,19 +60,38 @@ module.exports = Class( 'JqueryDialog' ) * * @return {undefined} */ - __construct: function( jquery ) + __construct: function( jquery, id ) { this._jquery = jquery; this._$dialog = this._jquery( '
' ) .dialog( { // don't show until we're ready - autoOpen: false + autoOpen: false, + + // default style + dialogClass: "liza.dialog", } ); }, + /** + * Uniquely identify dialog type + * + * The `type_id` is exposed as a CSS class for styling. + * + * @param {string} type_id unique type identifier + * + * @return {JqueryDialog} self + */ + 'public setTypeId': function( type_id ) + { + this._$dialog.dialog( { dialogClass: type_id } ); + return this; + }, + + /** * Sets the dialog title * From e1db46ad9edf731ec6a44d8d35758ae250d7cbd8 Mon Sep 17 00:00:00 2001 From: Mike Gerwitz Date: Wed, 8 Nov 2017 10:41:06 -0500 Subject: [PATCH 2/3] Extract dialog styling into new base.css * src/client/Client.js (createSideBar): Remove width/height, add `dialogClass'. * src/client/debug/BucketClientDebugTab.js (showBucketEditor, _genBucketEditorFields): Remove width/height and other CSS, add `dialogClass'. * src/client/debug/ClientDebugDialog.js (_createDialog): Remove width/height, add `dialogClass'. * src/css/base.css: New file. * src/ui/dialog/DirtyDialog.js (init): Remove size, set type id. * src/ui/dialog/EmailDialog.js (init): Remove size, set type id. * src/ui/dialog/ErrorDialog.js (init): Remove size, set type id. * src/ui/dialog/NotificationDialog.js (init): Remove size, set type id. * src/ui/dialog/QuoteNavDialog.js (init): Remove size, set type id. * src/ui/dialog/UiDialog.js (showErrorDialog): Remove size. Remove width param. (showNavErrorDialog): Remove size. (showQuoteNumberPrompt): Remove size, set type. --- src/client/Client.js | 7 +- src/client/debug/BucketClientDebugTab.js | 30 ++--- src/client/debug/ClientDebugDialog.js | 12 +- src/css/base.css | 146 +++++++++++++++++++++++ src/ui/dialog/DirtyDialog.js | 2 +- src/ui/dialog/EmailDialog.js | 2 +- src/ui/dialog/ErrorDialog.js | 2 +- src/ui/dialog/JqueryDialog.js | 15 ++- src/ui/dialog/NotificationDialog.js | 2 +- src/ui/dialog/QuoteNavDialog.js | 2 +- src/ui/dialog/UiDialog.js | 12 +- 11 files changed, 186 insertions(+), 46 deletions(-) create mode 100644 src/css/base.css diff --git a/src/client/Client.js b/src/client/Client.js index c8553c1..fc5e981 100644 --- a/src/client/Client.js +++ b/src/client/Client.js @@ -1551,10 +1551,9 @@ module.exports = Class( 'Client' ) // when the quote id is clicked, display a dialog listing their // options _self.uiDialog.showNavErrorDialog( { - title: 'Change quote id', - text: 'Would you like to:', - width: 550, - noX: false, + title: "Change quote id", + text: "Would you like to:", + noX: false, search: function() { diff --git a/src/client/debug/BucketClientDebugTab.js b/src/client/debug/BucketClientDebugTab.js index 31dae1c..5319689 100644 --- a/src/client/debug/BucketClientDebugTab.js +++ b/src/client/debug/BucketClientDebugTab.js @@ -520,16 +520,19 @@ module.exports = Class( 'BucketClientDebugTab' ) 'public showBucketEditor': function( staging, change_callback ) { var $editor = $( '
' ) - .dialog( { - title: "Bucket Editor", - width: 500, - height: 600, + .dialog( { + title: "Bucket Editor", + dialogClass: "liza-bucket-editor", - close: function() - { - staging.removeListener( 'stagingUpdate', listener ); - } - } ), + // this dialog is resizable, so we can't set this with CSS + width: 500, + height: 600, + + close: function() + { + staging.removeListener( 'stagingUpdate', listener ); + } + } ), listener = function( data ) { @@ -595,21 +598,14 @@ module.exports = Class( 'BucketClientDebugTab' ) $editor.append( $( '
' ) - .append( $( '
' ) + .append( $( '
' ) .text( name ) - .css( { - fontWeight: 'bold' - } ) .append( $( '' ) .attr( { name: name, type: 'text' } ) .val( JSON.stringify( vals ) ) - .css( { - width: '450px', - marginBottom: '1em' - } ) .change( ( function( name ) { return function() diff --git a/src/client/debug/ClientDebugDialog.js b/src/client/debug/ClientDebugDialog.js index 8ff81c5..01e555f 100644 --- a/src/client/debug/ClientDebugDialog.js +++ b/src/client/debug/ClientDebugDialog.js @@ -196,12 +196,12 @@ module.exports = Class( 'ClientDebugDialog' ) .append( this._createAutoloadToggle() ) .append( $tabs = this._createTabs() ) .dialog( { - title: "Developer Dialog", - modal: false, - width: 800, - height: 600, - - autoOpen: false, + title: "Developer Dialog", + dialogClass: "liza-dev-dialog", + width: 800, + height: 600, + modal: false, + autoOpen: false, open: function() { diff --git a/src/css/base.css b/src/css/base.css new file mode 100644 index 0000000..7342986 --- /dev/null +++ b/src/css/base.css @@ -0,0 +1,146 @@ +/** + * Base CSS for the Liza Data Collection Framework + * + * Copyright (C) 2017 R-T Specialty, LLC. + * + * This file is part of the Liza Data Collection Framework. + * + * liza is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +/* These styles dictate the intended display of certain elements and provide + * base functionality. + * + * XXX: Various parts of the system (like dialogs and certain groups) use + * jQuery UI. This will change in the future, but this drastically affects + * how the dialog is styled. This CSS file _does no_ provide a jQuery UI + * theme. + * + * XXX: Further, since jQuery UI's dialog styles are _inlined_ as the @style + * of the element itself, we need `!important'. + * + * TODO: Many, many things need to be moved into this stylesheet! + */ + + + +/* Navigation Dialogs + * ------------------ + * The dialog prompting for document (quote) id changes contains three + * separate buttons with sizable text, and so should be wide. + */ + +.liza-doc-nav-dialog { + width: 60ch !important; +} + +/* The document (quote) number dialog prompts for a number to view. Really, + * this should be consolodated with the above. It contains only an input + * box prefixed by 'WEB', with some descriptive text above it, and an OK + * button. + */ + +.liza-doc-id-prompt { + width: 35ch !important; +} + +/* When skipping between steps using the upper navigation, the + * "Dirty Dialog" asks whether the user wants to save or discard + * changes. It contains a third button---cancel---and should be wide enough + * to accommodate. + */ + +.liza-dirty-dialog { + width: 60ch !important; +} + + + +/* General-Purpose Dialogs + * ----------------------- + * The Error Dialog shows a generic message for normal users, and error + * details for internal users. + */ + +.liza-error-dialog { + width: 40ch !important; +} + +/* The Email dialog is an e-mail form that prompts for recipients, subject, + * and message. What you'd expect from a mail dialog. + */ + +.liza-email-dialog { + width: 50ch !important; +} + +.liza-email-dialog input { + width: 100%; +} + +.liza-email-dialog textarea { + width: 100%; + height: 10em; +} + +/* Notification dialogs serve as a basis for generic user notifications. + */ +.liza-notification-dialog { + width: 45ch !important; +} + + + +/* Developer Dialog + * ---------------- + * The developer dialog is intended for internal users to be able to inspect + * and modify the current state of the system. It is intended to be + * non-modal and toggleable. + * + * This dialog contains a lot of information, so the default size should be + * considerable. However, it should not be so large as to conceal the + * entire page by default, as certain types of interactions are reflected on + * the page itself. + */ + +.liza-dev-dialog { + /* we can't style width/height because it's resizable with jQuery UI */ +} + +/* The Bucket Editor is a separate dialog from the main Developer + * Dialog. It should be tall, as there tends to be a great amount of bucket + * values, and wide enough to display a good portion of a vector of strings + * (e.g. multi-index street addresses). + */ + +.liza-bucket-editor { + /* we can't style width/height because it's resizable with jQuery UI */ +} + +/* The fields containing the bucket value (serialized as JSON) expand to the + * entire width of the dialog. They are preceded by the name of the bucket + * value. Because of the width of the input field, they will be on separate + * lines. + */ + +.liza-bucket-editor .liza-bucket-field { + font-weight: bold; +} + +.liza-bucket-editor input { + width: 100%; + margin-bottom: 1em; + + font-weight: normal; +} diff --git a/src/ui/dialog/DirtyDialog.js b/src/ui/dialog/DirtyDialog.js index 8089309..99a6420 100644 --- a/src/ui/dialog/DirtyDialog.js +++ b/src/ui/dialog/DirtyDialog.js @@ -53,6 +53,7 @@ module.exports = Class( 'DirtyDialog' ) // set defaults this.getDialog() + .setTypeId( 'liza-dirty-dialog' ) .setHtml( '

Changes have been made to this step. Would you like ' + 'to:

' + @@ -70,7 +71,6 @@ module.exports = Class( 'DirtyDialog' ) '' ) .setResizable( false ) - .setSize( { x: 350 } ) .setModal() .setTitle( 'You have made changes to this step' ) .setButtons( { diff --git a/src/ui/dialog/EmailDialog.js b/src/ui/dialog/EmailDialog.js index be08d02..037d9f5 100644 --- a/src/ui/dialog/EmailDialog.js +++ b/src/ui/dialog/EmailDialog.js @@ -77,8 +77,8 @@ module.exports = Class( 'EmailDialog' ) // crate new dialog containing email form this.getDialog() + .setTypeId( 'liza-email-dialog' ) .setResizable( false ) - .setSize( { x: 450, y: 435 } ) .setModal() .setTitle( 'Email CSR' ) .setButtons( { diff --git a/src/ui/dialog/ErrorDialog.js b/src/ui/dialog/ErrorDialog.js index c1a62f6..e944fba 100644 --- a/src/ui/dialog/ErrorDialog.js +++ b/src/ui/dialog/ErrorDialog.js @@ -40,9 +40,9 @@ module.exports = Class( 'ErrorDialog' ) // set defaults this.getDialog() + .setTypeId( 'liza-error-dialog' ) .addClass( 'error' ) .setResizable( false ) - .setSize( { y: 'auto' } ) .setModal() .setTitle( 'An error has occurred' ); } diff --git a/src/ui/dialog/JqueryDialog.js b/src/ui/dialog/JqueryDialog.js index 723594d..f94bbfe 100644 --- a/src/ui/dialog/JqueryDialog.js +++ b/src/ui/dialog/JqueryDialog.js @@ -52,6 +52,13 @@ module.exports = Class( 'JqueryDialog' ) */ 'private _buttons': {}, + /** + * Dialog type id + * + * @type {string} + */ + 'private _typeId': 'liza-dialog', + /** * Initializes dialog @@ -68,9 +75,6 @@ module.exports = Class( 'JqueryDialog' ) .dialog( { // don't show until we're ready autoOpen: false, - - // default style - dialogClass: "liza.dialog", } ); }, @@ -87,7 +91,7 @@ module.exports = Class( 'JqueryDialog' ) */ 'public setTypeId': function( type_id ) { - this._$dialog.dialog( { dialogClass: type_id } ); + this._typeId = ''+type_id; return this; }, @@ -360,7 +364,8 @@ module.exports = Class( 'JqueryDialog' ) 'virtual public open': function() { this._$dialog.dialog( { - buttons: this._buttons + buttons: this._buttons, + dialogClass: this._typeId, } ); this._$dialog.dialog( 'open' ); diff --git a/src/ui/dialog/NotificationDialog.js b/src/ui/dialog/NotificationDialog.js index 5ba2708..33b566c 100644 --- a/src/ui/dialog/NotificationDialog.js +++ b/src/ui/dialog/NotificationDialog.js @@ -39,8 +39,8 @@ module.exports = Class( 'NotificationDialog' ) { // set defaults this.getDialog() + .setTypeId( 'liza-notification-dialog' ) .addClass( 'notification-dialog' ) - .setSize( { x: 400, y: 'auto' } ) .setModal() .hideTitlebar() .setResizable( false ); diff --git a/src/ui/dialog/QuoteNavDialog.js b/src/ui/dialog/QuoteNavDialog.js index 252a537..dcdbade 100644 --- a/src/ui/dialog/QuoteNavDialog.js +++ b/src/ui/dialog/QuoteNavDialog.js @@ -65,8 +65,8 @@ module.exports = Class( 'QuoteNavDialog' ) // set defaults this.getDialog() + .setTypeId( 'liza-doc-nav-dialog' ) .setResizable( false ) - .setSize( { x: 500, y: 'auto' } ) .setModal(); }, diff --git a/src/ui/dialog/UiDialog.js b/src/ui/dialog/UiDialog.js index 0557469..dee945f 100644 --- a/src/ui/dialog/UiDialog.js +++ b/src/ui/dialog/UiDialog.js @@ -73,17 +73,15 @@ module.exports = Class( 'UiDialog', * @param {string} text message to display * @param {string} caption button caption * @param {function()} callback function to call when button is clicked - * @param {number} width width of dialog (default 350) * * @return {UiDialog} self */ - showErrorDialog: function( text, caption, callback, width ) + showErrorDialog: function( text, caption, callback ) { callback = callback || function() {}; ErrorDialog( this._createDialog() ) .setHtml( text ) - .setSize( { x: ( width || 350 ) } ) .onClose( callback ) .appendButton( caption ) .open(); @@ -120,7 +118,6 @@ module.exports = Class( 'UiDialog', QuoteNavDialog( this._createDialog() ) .setHtml( '

' + text + '

' ) - .setSize( { x: ( options.width || 500 ) } ) .hideX( ( options.noX ) ? true : false ) .setTitle( options.title || 'A navigation error has occurred' ) @@ -240,6 +237,8 @@ module.exports = Class( 'UiDialog', } this._createDialog() + .setTitle( 'Enter quote number' ) + .setTypeId( 'liza-doc-id-prompt' ) .setHtml( $( '
' ).html( '

Please enter the quote number of the quote you would ' + @@ -248,12 +247,7 @@ module.exports = Class( 'UiDialog', .append( $quote_input ) ) .setResizable( false ) - .setSize( { - x: 250, - y: 'auto' - } ) .setModal() - .setTitle( 'Enter quote number' ) .hideX() .onOpen( function() From f7a320b58c0b66673f824f1a7c95b952ea69383d Mon Sep 17 00:00:00 2001 From: Mike Gerwitz Date: Wed, 8 Nov 2017 11:56:24 -0500 Subject: [PATCH 3/3] Remove paragraph from dev dialog It lies now. * src/client/debug/ClientDebugDialog.js (_createDialog): Remove paragraph. Adjust case on keybinding text. --- src/client/debug/ClientDebugDialog.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/client/debug/ClientDebugDialog.js b/src/client/debug/ClientDebugDialog.js index 01e555f..1ad0e7d 100644 --- a/src/client/debug/ClientDebugDialog.js +++ b/src/client/debug/ClientDebugDialog.js @@ -182,14 +182,10 @@ module.exports = Class( 'ClientDebugDialog' ) this._showSidebarWarning(); return $( '

' ) - .append( $( '

' ).text( - "Everything in this dialog can be done via the console. " + - "This simply exists to make life easier." - ) ) .append( $( '

' ).html( "To view this dialog: " + "one can use the key combination " + - "CTRL+SHIFT+D, or getProgramDebug()" + + "Ctrl+Shift+D, or getProgramDebug()" + ".toggle() from the console. The latter may " + "also be used even if the user is not logged in internally." ) )