Mike Gerwitz

Activist for User Freedom

aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMike Gerwitz <mike.gerwitz@rtspecialty.com>2017-11-08 14:21:07 -0500
committerMike Gerwitz <mike.gerwitz@rtspecialty.com>2017-11-08 14:21:07 -0500
commite2b17e9e8a741031f59b222947d513528a08317e (patch)
treecc5ba871565041f5f1567fd17a5f7944d1afab0d
parentc41d0aa92439f57489a6fd1b0dce65919ddff680 (diff)
parentf7a320b58c0b66673f824f1a7c95b952ea69383d (diff)
downloadliza-e2b17e9e8a741031f59b222947d513528a08317e.tar.gz
liza-e2b17e9e8a741031f59b222947d513528a08317e.tar.bz2
liza-e2b17e9e8a741031f59b222947d513528a08317e.zip
Dialog CSS stylingv3.2.0
-rw-r--r--src/client/Client.js7
-rw-r--r--src/client/debug/BucketClientDebugTab.js30
-rw-r--r--src/client/debug/ClientDebugDialog.js18
-rw-r--r--src/css/base.css146
-rw-r--r--src/ui/dialog/Dialog.js12
-rw-r--r--src/ui/dialog/DialogDecorator.js12
-rw-r--r--src/ui/dialog/DirtyDialog.js2
-rw-r--r--src/ui/dialog/EmailDialog.js2
-rw-r--r--src/ui/dialog/ErrorDialog.js2
-rw-r--r--src/ui/dialog/JqueryDialog.js30
-rw-r--r--src/ui/dialog/NotificationDialog.js2
-rw-r--r--src/ui/dialog/QuoteNavDialog.js2
-rw-r--r--src/ui/dialog/UiDialog.js12
13 files changed, 228 insertions, 49 deletions
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 = $( '<div>' )
- .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(
$( '<div>' )
- .append( $( '<div>' )
+ .append( $( '<div class="liza-bucket-field">' )
.text( name )
- .css( {
- fontWeight: 'bold'
- } )
.append( $( '<input>' )
.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 $( '<div>' )
- .append( $( '<p>' ).text(
- "Everything in this dialog can be done via the console. " +
- "This simply exists to make life easier."
- ) )
.append( $( '<p>' ).html(
"<strong>To view this dialog:</strong> " +
"one can use the key combination " +
- "<samp>CTRL+SHIFT+D</samp>, or <code>getProgramDebug()" +
+ "<samp>Ctrl+Shift+D</samp>, or <code>getProgramDebug()" +
".toggle()</code> 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 <http://www.gnu.org/licenses/>.
+ */
+
+/* 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
@@ -28,6 +28,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
*
* @param {string} title 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
@@ -85,6 +85,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
*
* @param {string} title 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(
'<p>Changes have been made to this step. Would you like ' +
'to:</p>' +
@@ -70,7 +71,6 @@ module.exports = Class( 'DirtyDialog' )
'</ul>'
)
.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,20 +67,36 @@ module.exports = Class( 'JqueryDialog' )
*
* @return {undefined}
*/
- __construct: function( jquery )
+ __construct: function( jquery, id )
{
this._jquery = jquery;
this._$dialog = this._jquery( '<div>' )
.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
*
* @param {string} title 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( '<p>' + text + '</p>' )
- .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(
$( '<div>' ).html(
'<p>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()