Dialog CSS styling
commit
e2b17e9e8a
|
@ -1551,9 +1551,8 @@ 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,
|
||||
title: "Change quote id",
|
||||
text: "Would you like to:",
|
||||
noX: false,
|
||||
|
||||
search: function()
|
||||
|
|
|
@ -522,6 +522,9 @@ module.exports = Class( 'BucketClientDebugTab' )
|
|||
var $editor = $( '<div>' )
|
||||
.dialog( {
|
||||
title: "Bucket Editor",
|
||||
dialogClass: "liza-bucket-editor",
|
||||
|
||||
// this dialog is resizable, so we can't set this with CSS
|
||||
width: 500,
|
||||
height: 600,
|
||||
|
||||
|
@ -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()
|
||||
|
|
|
@ -182,14 +182,10 @@ 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."
|
||||
) )
|
||||
|
@ -197,10 +193,10 @@ module.exports = Class( 'ClientDebugDialog' )
|
|||
.append( $tabs = this._createTabs() )
|
||||
.dialog( {
|
||||
title: "Developer Dialog",
|
||||
modal: false,
|
||||
dialogClass: "liza-dev-dialog",
|
||||
width: 800,
|
||||
height: 600,
|
||||
|
||||
modal: false,
|
||||
autoOpen: false,
|
||||
|
||||
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',
|
||||
{
|
||||
/**
|
||||
* 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
|
||||
*
|
||||
|
|
|
@ -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
|
||||
*
|
||||
|
|
|
@ -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( {
|
||||
|
|
|
@ -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( {
|
||||
|
|
|
@ -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' );
|
||||
}
|
||||
|
|
|
@ -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( '<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
|
||||
*
|
||||
|
@ -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' );
|
||||
|
|
|
@ -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 );
|
||||
|
|
|
@ -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();
|
||||
},
|
||||
|
||||
|
|
|
@ -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()
|
||||
|
|
Loading…
Reference in New Issue