Dialog CSS styling
commit
e2b17e9e8a
|
@ -1551,9 +1551,8 @@ module.exports = Class( 'Client' )
|
||||||
// when the quote id is clicked, display a dialog listing their
|
// when the quote id is clicked, display a dialog listing their
|
||||||
// options
|
// options
|
||||||
_self.uiDialog.showNavErrorDialog( {
|
_self.uiDialog.showNavErrorDialog( {
|
||||||
title: 'Change quote id',
|
title: "Change quote id",
|
||||||
text: 'Would you like to:',
|
text: "Would you like to:",
|
||||||
width: 550,
|
|
||||||
noX: false,
|
noX: false,
|
||||||
|
|
||||||
search: function()
|
search: function()
|
||||||
|
|
|
@ -522,6 +522,9 @@ module.exports = Class( 'BucketClientDebugTab' )
|
||||||
var $editor = $( '<div>' )
|
var $editor = $( '<div>' )
|
||||||
.dialog( {
|
.dialog( {
|
||||||
title: "Bucket Editor",
|
title: "Bucket Editor",
|
||||||
|
dialogClass: "liza-bucket-editor",
|
||||||
|
|
||||||
|
// this dialog is resizable, so we can't set this with CSS
|
||||||
width: 500,
|
width: 500,
|
||||||
height: 600,
|
height: 600,
|
||||||
|
|
||||||
|
@ -595,21 +598,14 @@ module.exports = Class( 'BucketClientDebugTab' )
|
||||||
|
|
||||||
$editor.append(
|
$editor.append(
|
||||||
$( '<div>' )
|
$( '<div>' )
|
||||||
.append( $( '<div>' )
|
.append( $( '<div class="liza-bucket-field">' )
|
||||||
.text( name )
|
.text( name )
|
||||||
.css( {
|
|
||||||
fontWeight: 'bold'
|
|
||||||
} )
|
|
||||||
.append( $( '<input>' )
|
.append( $( '<input>' )
|
||||||
.attr( {
|
.attr( {
|
||||||
name: name,
|
name: name,
|
||||||
type: 'text'
|
type: 'text'
|
||||||
} )
|
} )
|
||||||
.val( JSON.stringify( vals ) )
|
.val( JSON.stringify( vals ) )
|
||||||
.css( {
|
|
||||||
width: '450px',
|
|
||||||
marginBottom: '1em'
|
|
||||||
} )
|
|
||||||
.change( ( function( name )
|
.change( ( function( name )
|
||||||
{
|
{
|
||||||
return function()
|
return function()
|
||||||
|
|
|
@ -182,14 +182,10 @@ module.exports = Class( 'ClientDebugDialog' )
|
||||||
this._showSidebarWarning();
|
this._showSidebarWarning();
|
||||||
|
|
||||||
return $( '<div>' )
|
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(
|
.append( $( '<p>' ).html(
|
||||||
"<strong>To view this dialog:</strong> " +
|
"<strong>To view this dialog:</strong> " +
|
||||||
"one can use the key combination " +
|
"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 " +
|
".toggle()</code> from the console. The latter may " +
|
||||||
"also be used even if the user is not logged in internally."
|
"also be used even if the user is not logged in internally."
|
||||||
) )
|
) )
|
||||||
|
@ -197,10 +193,10 @@ module.exports = Class( 'ClientDebugDialog' )
|
||||||
.append( $tabs = this._createTabs() )
|
.append( $tabs = this._createTabs() )
|
||||||
.dialog( {
|
.dialog( {
|
||||||
title: "Developer Dialog",
|
title: "Developer Dialog",
|
||||||
modal: false,
|
dialogClass: "liza-dev-dialog",
|
||||||
width: 800,
|
width: 800,
|
||||||
height: 600,
|
height: 600,
|
||||||
|
modal: false,
|
||||||
autoOpen: false,
|
autoOpen: false,
|
||||||
|
|
||||||
open: function()
|
open: function()
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -27,6 +27,18 @@ var Interface = require( 'easejs' ).Interface;
|
||||||
*/
|
*/
|
||||||
module.exports = Interface( 'Dialog',
|
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
|
* Sets the dialog title
|
||||||
*
|
*
|
||||||
|
|
|
@ -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
|
* Sets the dialog title
|
||||||
*
|
*
|
||||||
|
|
|
@ -53,6 +53,7 @@ module.exports = Class( 'DirtyDialog' )
|
||||||
|
|
||||||
// set defaults
|
// set defaults
|
||||||
this.getDialog()
|
this.getDialog()
|
||||||
|
.setTypeId( 'liza-dirty-dialog' )
|
||||||
.setHtml(
|
.setHtml(
|
||||||
'<p>Changes have been made to this step. Would you like ' +
|
'<p>Changes have been made to this step. Would you like ' +
|
||||||
'to:</p>' +
|
'to:</p>' +
|
||||||
|
@ -70,7 +71,6 @@ module.exports = Class( 'DirtyDialog' )
|
||||||
'</ul>'
|
'</ul>'
|
||||||
)
|
)
|
||||||
.setResizable( false )
|
.setResizable( false )
|
||||||
.setSize( { x: 350 } )
|
|
||||||
.setModal()
|
.setModal()
|
||||||
.setTitle( 'You have made changes to this step' )
|
.setTitle( 'You have made changes to this step' )
|
||||||
.setButtons( {
|
.setButtons( {
|
||||||
|
|
|
@ -77,8 +77,8 @@ module.exports = Class( 'EmailDialog' )
|
||||||
|
|
||||||
// crate new dialog containing email form
|
// crate new dialog containing email form
|
||||||
this.getDialog()
|
this.getDialog()
|
||||||
|
.setTypeId( 'liza-email-dialog' )
|
||||||
.setResizable( false )
|
.setResizable( false )
|
||||||
.setSize( { x: 450, y: 435 } )
|
|
||||||
.setModal()
|
.setModal()
|
||||||
.setTitle( 'Email CSR' )
|
.setTitle( 'Email CSR' )
|
||||||
.setButtons( {
|
.setButtons( {
|
||||||
|
|
|
@ -40,9 +40,9 @@ module.exports = Class( 'ErrorDialog' )
|
||||||
|
|
||||||
// set defaults
|
// set defaults
|
||||||
this.getDialog()
|
this.getDialog()
|
||||||
|
.setTypeId( 'liza-error-dialog' )
|
||||||
.addClass( 'error' )
|
.addClass( 'error' )
|
||||||
.setResizable( false )
|
.setResizable( false )
|
||||||
.setSize( { y: 'auto' } )
|
|
||||||
.setModal()
|
.setModal()
|
||||||
.setTitle( 'An error has occurred' );
|
.setTitle( 'An error has occurred' );
|
||||||
}
|
}
|
||||||
|
|
|
@ -52,6 +52,13 @@ module.exports = Class( 'JqueryDialog' )
|
||||||
*/
|
*/
|
||||||
'private _buttons': {},
|
'private _buttons': {},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dialog type id
|
||||||
|
*
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
'private _typeId': 'liza-dialog',
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initializes dialog
|
* Initializes dialog
|
||||||
|
@ -60,19 +67,35 @@ module.exports = Class( 'JqueryDialog' )
|
||||||
*
|
*
|
||||||
* @return {undefined}
|
* @return {undefined}
|
||||||
*/
|
*/
|
||||||
__construct: function( jquery )
|
__construct: function( jquery, id )
|
||||||
{
|
{
|
||||||
this._jquery = jquery;
|
this._jquery = jquery;
|
||||||
|
|
||||||
this._$dialog = this._jquery( '<div>' )
|
this._$dialog = this._jquery( '<div>' )
|
||||||
.dialog( {
|
.dialog( {
|
||||||
// don't show until we're ready
|
// 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
|
* Sets the dialog title
|
||||||
*
|
*
|
||||||
|
@ -341,7 +364,8 @@ module.exports = Class( 'JqueryDialog' )
|
||||||
'virtual public open': function()
|
'virtual public open': function()
|
||||||
{
|
{
|
||||||
this._$dialog.dialog( {
|
this._$dialog.dialog( {
|
||||||
buttons: this._buttons
|
buttons: this._buttons,
|
||||||
|
dialogClass: this._typeId,
|
||||||
} );
|
} );
|
||||||
|
|
||||||
this._$dialog.dialog( 'open' );
|
this._$dialog.dialog( 'open' );
|
||||||
|
|
|
@ -39,8 +39,8 @@ module.exports = Class( 'NotificationDialog' )
|
||||||
{
|
{
|
||||||
// set defaults
|
// set defaults
|
||||||
this.getDialog()
|
this.getDialog()
|
||||||
|
.setTypeId( 'liza-notification-dialog' )
|
||||||
.addClass( 'notification-dialog' )
|
.addClass( 'notification-dialog' )
|
||||||
.setSize( { x: 400, y: 'auto' } )
|
|
||||||
.setModal()
|
.setModal()
|
||||||
.hideTitlebar()
|
.hideTitlebar()
|
||||||
.setResizable( false );
|
.setResizable( false );
|
||||||
|
|
|
@ -65,8 +65,8 @@ module.exports = Class( 'QuoteNavDialog' )
|
||||||
|
|
||||||
// set defaults
|
// set defaults
|
||||||
this.getDialog()
|
this.getDialog()
|
||||||
|
.setTypeId( 'liza-doc-nav-dialog' )
|
||||||
.setResizable( false )
|
.setResizable( false )
|
||||||
.setSize( { x: 500, y: 'auto' } )
|
|
||||||
.setModal();
|
.setModal();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -73,17 +73,15 @@ module.exports = Class( 'UiDialog',
|
||||||
* @param {string} text message to display
|
* @param {string} text message to display
|
||||||
* @param {string} caption button caption
|
* @param {string} caption button caption
|
||||||
* @param {function()} callback function to call when button is clicked
|
* @param {function()} callback function to call when button is clicked
|
||||||
* @param {number} width width of dialog (default 350)
|
|
||||||
*
|
*
|
||||||
* @return {UiDialog} self
|
* @return {UiDialog} self
|
||||||
*/
|
*/
|
||||||
showErrorDialog: function( text, caption, callback, width )
|
showErrorDialog: function( text, caption, callback )
|
||||||
{
|
{
|
||||||
callback = callback || function() {};
|
callback = callback || function() {};
|
||||||
|
|
||||||
ErrorDialog( this._createDialog() )
|
ErrorDialog( this._createDialog() )
|
||||||
.setHtml( text )
|
.setHtml( text )
|
||||||
.setSize( { x: ( width || 350 ) } )
|
|
||||||
.onClose( callback )
|
.onClose( callback )
|
||||||
.appendButton( caption )
|
.appendButton( caption )
|
||||||
.open();
|
.open();
|
||||||
|
@ -120,7 +118,6 @@ module.exports = Class( 'UiDialog',
|
||||||
|
|
||||||
QuoteNavDialog( this._createDialog() )
|
QuoteNavDialog( this._createDialog() )
|
||||||
.setHtml( '<p>' + text + '</p>' )
|
.setHtml( '<p>' + text + '</p>' )
|
||||||
.setSize( { x: ( options.width || 500 ) } )
|
|
||||||
.hideX( ( options.noX ) ? true : false )
|
.hideX( ( options.noX ) ? true : false )
|
||||||
.setTitle( options.title || 'A navigation error has occurred' )
|
.setTitle( options.title || 'A navigation error has occurred' )
|
||||||
|
|
||||||
|
@ -240,6 +237,8 @@ module.exports = Class( 'UiDialog',
|
||||||
}
|
}
|
||||||
|
|
||||||
this._createDialog()
|
this._createDialog()
|
||||||
|
.setTitle( 'Enter quote number' )
|
||||||
|
.setTypeId( 'liza-doc-id-prompt' )
|
||||||
.setHtml(
|
.setHtml(
|
||||||
$( '<div>' ).html(
|
$( '<div>' ).html(
|
||||||
'<p>Please enter the quote number of the quote you would ' +
|
'<p>Please enter the quote number of the quote you would ' +
|
||||||
|
@ -248,12 +247,7 @@ module.exports = Class( 'UiDialog',
|
||||||
.append( $quote_input )
|
.append( $quote_input )
|
||||||
)
|
)
|
||||||
.setResizable( false )
|
.setResizable( false )
|
||||||
.setSize( {
|
|
||||||
x: 250,
|
|
||||||
y: 'auto'
|
|
||||||
} )
|
|
||||||
.setModal()
|
.setModal()
|
||||||
.setTitle( 'Enter quote number' )
|
|
||||||
.hideX()
|
.hideX()
|
||||||
|
|
||||||
.onOpen( function()
|
.onOpen( function()
|
||||||
|
|
Loading…
Reference in New Issue