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..1ad0e7d 100644 --- a/src/client/debug/ClientDebugDialog.js +++ b/src/client/debug/ClientDebugDialog.js @@ -182,26 +182,22 @@ 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." ) ) .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/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/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 e195fb8..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 @@ -60,19 +67,35 @@ 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, } ); }, + /** + * 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._typeId = ''+type_id; + return this; + }, + + /** * Sets the dialog title * @@ -341,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()