employer
/
liza
1
0
Fork 0
Code Releases Activity

Dialog CSS styling

master
Mike Gerwitz 2017-11-08 14:21:07 -05:00
parent c41d0aa924 f7a320b58c
commit e2b17e9e8a
13 changed files with 228 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/client/Client.js
View File

@ -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()
{

30
src/client/debug/BucketClientDebugTab.js
View File

@ -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()

18
src/client/debug/ClientDebugDialog.js
View File

@ -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()
{

146
src/css/base.css 100644
View File

@ -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;
}

12
src/ui/dialog/Dialog.js
View File

@ -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
*

12
src/ui/dialog/DialogDecorator.js
View File

@ -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
*

2
src/ui/dialog/DirtyDialog.js
View File

@ -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( {

2
src/ui/dialog/EmailDialog.js
View File

@ -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( {

2
src/ui/dialog/ErrorDialog.js
View File

@ -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' );
}

30
src/ui/dialog/JqueryDialog.js
View File

@ -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' );

2
src/ui/dialog/NotificationDialog.js
View File

@ -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 );

2
src/ui/dialog/QuoteNavDialog.js
View File

@ -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();
},

12
src/ui/dialog/UiDialog.js
View File

@ -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()