Changeset 366


Ignore:
Timestamp:
07/18/12 18:49:11 (13 years ago)
Author:
tjcschipper
Message:
  • AdaptiveForm? really isn't anything yet, but it's supposed to become a way to encapsulate forms that add/remove inputs based on other input's (selected) values.
  • Created a skeleton for the question editor. It's almost an exact copy of SurveyAdvanced?.
Location:
Dev/branches/rest-dojo-ui/client/rft
Files:
6 added
6 deleted
6 edited
2 moved

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/rft/css/layout.css

    r364 r366  
    272272}
    273273fieldset.align label {
     274    color: #ffffff;
    274275    display: inline-block;
    275276    width: 100px !important;
     277}
     278
     279.claro .newline {
     280    float: left;
     281    clear: both;
    276282}
    277283
    … …  
    340346/* Experimental background colour inheritance */
    341347.claro div.blue.inheritBgColor,
    342 .claro .blue .inheritBgColor,
    343 .claro.blue .inheritBgColor {
     348.claro .blue .inheritBgColor {
    344349    background-color: #0072bc;
    345350    color: #ffffff;
    346351}
    347352.claro div.green.inheritBgColor,
    348 .claro .green .inheritBgColor,
    349 .claro.green .inheritBgColor {
     353.claro .green .inheritBgColor {
    350354    background-color: #3aa605;
    351355    color: #ffffff;
    352356}
    353357.claro div.orange.inheritBgColor,
    354 .claro .orange .inheritBgColor,
    355 .claro.orange .inheritBgColor {
     358.claro .orange .inheritBgColor {
    356359    background-color: #ff5b12;
    357360    color: #ffffff;
    358361}
    359362.claro div.purple.inheritBgColor,
    360 .claro .purple .inheritBgColor,
    361 .claro.purple .inheritBgColor {
     363.claro .purple .inheritBgColor {
    362364    background-color: #6529b7;
    363365    color: #ffffff;
    364366}
    365367.claro div.red.inheritBgColor,
    366 .claro .red .inheritBgColor,
    367 .claro.red .inheritBgColor {
     368.claro .red .inheritBgColor {
    368369    background-color: #8c0310;
    369370    color: #ffffff;
    370371}
    371372.claro div.trans.inheritBgColor,
    372 .claro .trans .inheritBgColor,
    373 .claro.trans .inheritBgColor {
     373.claro .trans .inheritBgColor {
    374374    background-color: transparent;
    375375    color: #ffffff;
    376376}
    377377.claro div.blue.inheritBgColor.light,
    378 .claro .blue .inheritBgColor.light,
    379 .claro.blue .inheritBgColor.light {
     378.claro .blue .inheritBgColor.light {
    380379    background-color: #0794d1;
    381380    color: #ffffff;
    382381}
    383382.claro div.green.inheritBgColor.light,
    384 .claro .green .inheritBgColor.light,
    385 .claro.green .inheritBgColor.light {
     383.claro .green .inheritBgColor.light {
    386384    background-color: #79ca0a;
    387385    color: #ffffff;
    388386}
    389387.claro div.orange.inheritBgColor.light,
    390 .claro .orange .inheritBgColor.light,
    391 .claro.orange .inheritBgColor.light {
     388.claro .orange .inheritBgColor.light {
    392389    background-color: #ff9140;
    393390    color: #ffffff;
    394391}
    395392.claro div.purple.inheritBgColor.light,
    396 .claro .purple .inheritBgColor.light,
    397 .claro.purple .inheritBgColor.light {
     393.claro .purple .inheritBgColor.light {
    398394    background-color: #993dec;
    399395    color: #ffffff;
    400396}
    401397.claro div.red.inheritBgColor.light,
    402 .claro .red .inheritBgColor.light,
    403 .claro.red .inheritBgColor.light {
     398.claro .red .inheritBgColor.light {
    404399    background-color: #bd0013;
    405400    color: #ffffff;

  • Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css

    r349 r366  
    11/* And now for the RFT specific stuff! */
    22/*LargeButton*/
     3.claro .rftLargeButton,
     4.claro .rftLargeButton * {
     5    user-select: none;
     6    -webkit-user-select: none;
     7}
    38.claro .rftLargeButton {
    49    margin-right: 16px;
     10    height: 30px;
    511}
    612.claro .rftLargeButton .dijitButtonNode {

  • Dev/branches/rest-dojo-ui/client/rft/pages/question.html

    r363 r366  
    1 <div data-dojo-type="rft.pages.surveyAdvanced">
     1<div data-dojo-type="rft.pages.question" class="orange">
    22        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
    33                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    44                        <h2>
    55                                <span class="rftIcon rftIconSurvey"></span>
    6                                 <span class="headerText">Survey A [Design]</span>
     6                                <span class="headerText">Question 123 [Editing]</span>
    77                        </h2>
    88                </div>
    … …  
    1010                       
    1111                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    12                                 <div data-dojo-type="dijit.layout.AccordionContainer" class="blue">
    13                                         <div data-dojo-type="dijit.layout.ContentPane" title="Content" data-dojo-props="iconClass:'rftIcon rftIconPlus'">
    14                                                 <div id="SurveyEditorToolkit" data-dojo-props="skipForm: true, accept:[], selfAccept: false, copyOnly: true, horizontal: false, singular: true">
    15                                                        
    16                                                 </div>
    17                                         </div>
    18                                 </div>
     12                                <div id="QuestionEditorToolkit"></div>
    1913                        </div>
    2014                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
    21                                 <button id="btnSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save</button>
    2215                                <button id="btnDiscard" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard</button>
    23                                 <button id="btnBack" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconUndo'">Exit Design</button>
     16                                <button id="btnSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save and exit</button>
    2417                        </div>
    2518                </div>
    2619                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    27                         <div id="SurveyEditorPreview">
     20                        <div id="QuestionEditorPreview">
    2821                               
    2922                        </div>
    30 
    31                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPlus'">Add new</button>
    3223                </div>
    3324        </div>

  • Dev/branches/rest-dojo-ui/client/rft/pages/question.js

    r363 r366  
    88    'rft/content',
    99    'dijit/registry',
    10     'dojo/on'],
    11     function(declare, lang, Deferred, LineWithActionsWidget, store, _Page, api, content, registry, on){
    12         return declare('rft.pages.surveyAdvanced', [_Page], {
     10    'dojo/on',
     11    'dojo/behavior',
     12    'dojo/query',
     13    'rft/ui/QuestionEditorPreview',
     14    'rft/ui/QuestionEditorToolkit',
     15    'dijit/form/FilteringSelect'],
     16    function(declare, lang, Deferred, LineWithActionsWidget, store, _Page, api, content, registry, on, behavior, query){
     17        return declare('rft.pages.question', [_Page], {
    1318            object: null,
     19            preview: null,
     20           
    1421            onVisit: function() {
    1522                if (this.pageArgs.uid) {
    … …  
    2330
    2431                this._setupButtons();
     32                this._setupEditor();
    2533            },
    2634            onLeave: function() {
    2735                this.inherited(arguments);
    2836            },
    29             _confirmSave: function() {
    30                 return confirm("Do you want to save?");
     37            _setupButtons: function() {
     38                var behaviorMap = {
     39                    "#btnSave": {
     40                        onclick: lang.hitch(this, function(){
     41                            this._saveSurvey();
     42                        })
     43                    },
     44                    "#btnDiscard": {
     45                        onclick: lang.hitch(this, function(){
     46                            this._restartEditor();
     47                        })
     48                    }
     49                }
     50                behavior.add(behaviorMap);
     51                behavior.apply();
    3152            },
    32             _saveSurvey: function() {
    33             },
    34             _restartEditor: function() {
    35             },
    36             _backToEditor: function() {
    37                 if (this._confirmSave()) {
    38                     this._saveSurvey()
    39                     content.goTo('survey', {uid: this.object._id});
    40                 } else {
    41                     content.goTo('survey', {uid: this.object._id});
    42                 }
    43             },
    44             _setupButtons: function() {
    45                 registry.byId("btnSave").on("click", lang.hitch(this, function() {
    46                     this._saveSurvey();
    47                 }));
    48                 registry.byId("btnDiscard").on("click", lang.hitch(this, function() {
    49                     this._restartEditor();
    50                 }));
    51                 registry.byId("btnBack").on("click", lang.hitch(this, function() {
    52                     this._backToEditor();
    53                 }));
     53            _setupEditor: function() {
     54                this.toolkit = new rft.ui.QuestionEditorToolkit();
     55                this.toolkit.placeAt("QuestionEditorToolkit");
     56
     57                this.preview = new rft.ui.QuestionEditorPreview();
     58                this.preview.placeAt("QuestionEditorPreview");
    5459            }
    5560        });

  • Dev/branches/rest-dojo-ui/client/rft/pages/questions.js

    r343 r366  
    11define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event',
    2     'dojo/_base/Deferred','rft/store','rft/ui/_Page','rft/ui/AccordionList'],
    3     function(declare,lang,event,Deferred,store,_Page,AccordionList) {
     2    'dojo/_base/Deferred','rft/store','rft/ui/_Page','rft/ui/AccordionList', 'rft/content'],
     3    function(declare,lang,event,Deferred,store,_Page,AccordionList,content) {
    44        return declare('rft.pages.questions',[_Page],{
    55            constructor: function() {
    … …  
    88            },
    99            onVisit: function() {
     10                debugger;
    1011                this._list = new AccordionList({
    1112                    actions: {
    12                         'Edit': lang.hitch(this,'_editQuestion')
     13                        'Edit': {
     14                            callback: lang.hitch(this,'_editQuestion'),
     15                            properties: {
     16                                blockButton: true,
     17                                icon: "Edit",
     18                                label: "Edit"
     19                            }
     20                        }
     21
     22                       
    1323                    },
    1424                    idProperty: store.idProperty,
    … …  
    3242            },
    3343            _editQuestion: function(question) {
    34                 this.questionForm.reset();
    35                 this.questionWidget.set('value',question);
    36                 this.questionDialog.show();
     44                content.goTo("question", {uid: question._id});
     45                // this.questionForm.reset();
     46                // this.questionWidget.set('value',question);
     47                // this.questionDialog.show();
    3748            },
    3849            onSaveQuestion: function(evt) {
    … …  
    5263            }
    5364        });
    54     });
     65});

  • Dev/branches/rest-dojo-ui/client/rft/run.js

    r365 r366  
    4545    'rft/pages/index',
    4646    'rft/pages/questions',
     47    'rft/pages/question',
    4748    'rft/pages/session',
    4849    'rft/pages/sessions',
    4950    'rft/pages/surveys',
    50     'rft/pages/survey',
    51     'rft/pages/surveyAdvanced'
     51    'rft/pages/survey'
    5252    ],
    5353    function(win,parser,LoginDialog,dom,connect,auth,content) {

  • Dev/branches/rest-dojo-ui/client/rft/ui/MenuLink.js

    r274 r366  
    66        },
    77        onClick: function(){
     8            debugger;
    89            content.goTo(this.pageId);
    910        }

  • Dev/branches/rest-dojo-ui/client/rft/ui/_Page.js

    r354 r366  
    3636            /** Event fired before leaving the page. Return false to prevent */
    3737            onLeave: function(){
     38                debugger;
    3839                dijit.findWidgets(this.domNode).forEach(function(w){
    3940                    w.destroyRecursive(false);
    4041                });
     42                return true;
    4143            }
    4244        });
    43     });
     45});
Note: See TracChangeset for help on using the changeset viewer.