Ignore:
Timestamp:
03/23/14 22:58:54 (11 years ago)
Author:
hendrikvanantwerpen
Message:
  • Added grey icons for better highlighting, synced block and large buttons.
  • Introduced extra color for text, now disabled/inactive/hovered -> it's not very clear though.
  • Added confirmation on irrevertable actions.
  • Added support for query string in our new request implementation.
Location:
Dev/trunk/src/client/qed-client
Files:
8 added
12 edited

Legend:

Unmodified
Added
Removed

  • Dev/trunk/src/client/qed-client/css/icons.less

    r443 r529  
    11#rft {
    2         &.claro {
    3                 .rftIcon {
    4                         .noOffset;
    5                         float: left;
    6                         display: inline-block;
    7                         border: none;
    8                         background-color: transparent;
    9                         background-repeat: no-repeat;
    10                 }
    11         }
     2    &.claro {
     3       
     4    .rftIcon {
     5            .noOffset;
     6            float: left;
     7            display: inline-block;
     8            border: none;
     9            background-color: transparent;
     10            background-repeat: no-repeat;
     11        }
     12    }
    1213
    13         .rftIconApplication {
    14                 background-position: 0px 0px;
    15         }
    16         .rftIconDashboard {
    17                 background-position: -32px 0px;
    18         }
    19         .rftIconSession {
    20                 background-position: -64px 0px;
    21         }
    22         .rftIconSessionActive {
    23                 background-position: -96px 0px;
    24         }
    25         .rftIconSessionTemplate {
    26                 background-position: -128px 0px;
    27         }
    28         .rftIconSurvey {
    29                 background-position: -160px 0px;
    30         }
    31         .rftIconQuestion {
    32                 background-position: -192px 0px;
    33         }
    34         .rftIconQuestionFill {
    35                 background-position: -224px 0px;
    36         }
    37         .rftIconRespondent {
    38                 background-position: -256px 0px;
    39         }
    40         .rftIconAnswer {
    41                 background-position: -288px 0px;
    42         }
    43         .rftIconAnswerSet {
    44                 background-position: -320px 0px;
    45         }
    46         .rftIconGameData {
    47                 background-position: -352px 0px;
    48         }
    49         .rftIconUser {
    50                 background-position: -384px 0px;
    51         }
    52                 //Actions
    53         .rftIconAccept {
    54                 background-position: -416px 0px;
    55         }
    56         .rftIconCancel {
    57                 background-position: -448px 0px;
    58         }
    59         .rftIconPlus {
    60                 background-position: -480px 0px;
    61         }
    62         .rftIconMinus {
    63                 background-position: -512px 0px;
    64         }
    65         .rftIconIncrease {
    66                 background-position: -544px 0px;
    67         }
    68         .rftIconDecrease {
    69                 background-position: -576px 0px;
    70         }
    71         .rftIconDelete {
    72                 background-position: -608px 0px;
    73         }
    74         .rftIconHome {
    75                 background-position: -640px 0px;
    76         }
    77         .rftIconPreview {
    78                 background-position: -672px 0px;
    79         }
    80         .rftIconSave {
    81                 background-position: -704px 0px;
    82         }
    83         .rftIconDiscard {
    84                 background-position: -736px 0px;
    85         }
    86         .rftIconProperties {
    87                 background-position: -768px 0px;
    88         }
    89         .rftIconUndo {
    90                 background-position: -800px 0px;
    91         }
    92         .rftIconRedo {
    93                 background-position: -832px 0px;
    94         }
    95         .rftIconBack {
    96                 background-position: -864px 0px;
    97         }
    98         .rftIconForward {
    99                 background-position: -896px 0px;
    100         }
    101         .rftIconRefresh {
    102                 background-position: -928px 0px;
    103         }
    104         .rftIconHelp {
    105                 background-position: -960px 0px;
    106         }
    107         .rftIconInspect {
    108                 background-position: -992px 0px;
    109         }
    110         .rftIconTag {
    111                 background-position: -1024px 0px;
    112         }
    113         .rftIconImage {
    114                 background-position: -1056px 0px;
    115         }
    116         .rftIconEdit {
    117                 background-position: -1088px 0px;
    118         }
    119         .rftIconLock {
    120                 background-position: -1120px 0px;
    121         }
    122         .rftIconUnlock {
    123                 background-position: -1152px 0px;
    124         }
    125         .rftIconPreset {
    126                 background-position: -1184px 0px;
    127         }
    128         .rftIconTextBlock {
    129                 background-position: -1216px 0px;
    130         }
    131         .rftIconPageBreak {
    132                 background-position: -1248px 0px;
    133         }
    134         .rftIconExternal {
    135                 background-position: -1280px 0px;
    136         }
    137         .rftIconInput {
    138                 background-position: -1312px 0px;
    139         }
    140         .rftIconPublish {
    141                 background-position: -1344px 0px;
    142         }
    143         //Arrows
    144         .rftIconFullArrowUp {
    145                 background-position: -1696px 0px;
    146         }
    147         .rftIconFullArrowDown {
    148                 background-position: -1728px 0px;
    149         }
    150         .rftIconFullArrowLeft {
    151                 background-position: -1760px 0px;
    152         }
    153         .rftIconFullArrowRight {
    154                 background-position: -1792px 0px;
    155         }
    156         .rftIconHalfArrowUp {
    157                 background-position: -1824px 0px;
    158         }
    159         .rftIconHalfArrowDown {
    160                 background-position: -1856px 0px;
    161         }
    162         .rftIconHalfArrowLeft {
    163                 background-position: -1888px 0px;
    164         }
    165         .rftIconHalfArrowRight {
    166                 background-position: -1920px 0px;
    167         }
     14    .rftIconApplication {
     15        background-position: 0px 0px;
     16    }
     17    .rftIconDashboard {
     18        background-position: -32px 0px;
     19    }
     20    .rftIconSession {
     21        background-position: -64px 0px;
     22    }
     23    .rftIconSessionActive {
     24        background-position: -96px 0px;
     25    }
     26    .rftIconSessionTemplate {
     27        background-position: -128px 0px;
     28    }
     29    .rftIconSurvey {
     30        background-position: -160px 0px;
     31    }
     32    .rftIconQuestion {
     33        background-position: -192px 0px;
     34    }
     35    .rftIconQuestionFill {
     36        background-position: -224px 0px;
     37    }
     38    .rftIconRespondent {
     39        background-position: -256px 0px;
     40    }
     41    .rftIconAnswer {
     42        background-position: -288px 0px;
     43    }
     44    .rftIconAnswerSet {
     45        background-position: -320px 0px;
     46    }
     47    .rftIconGameData {
     48        background-position: -352px 0px;
     49    }
     50    .rftIconUser {
     51        background-position: -384px 0px;
     52    }
     53        //Actions
     54    .rftIconAccept {
     55        background-position: -416px 0px;
     56    }
     57    .rftIconCancel {
     58        background-position: -448px 0px;
     59    }
     60    .rftIconPlus {
     61        background-position: -480px 0px;
     62    }
     63    .rftIconMinus {
     64        background-position: -512px 0px;
     65    }
     66    .rftIconIncrease {
     67        background-position: -544px 0px;
     68    }
     69    .rftIconDecrease {
     70        background-position: -576px 0px;
     71    }
     72    .rftIconDelete {
     73        background-position: -608px 0px;
     74    }
     75    .rftIconHome {
     76        background-position: -640px 0px;
     77    }
     78    .rftIconPreview {
     79        background-position: -672px 0px;
     80    }
     81    .rftIconSave {
     82        background-position: -704px 0px;
     83    }
     84    .rftIconDiscard {
     85        background-position: -736px 0px;
     86    }
     87    .rftIconProperties {
     88        background-position: -768px 0px;
     89    }
     90    .rftIconUndo {
     91        background-position: -800px 0px;
     92    }
     93    .rftIconRedo {
     94        background-position: -832px 0px;
     95    }
     96    .rftIconBack {
     97        background-position: -864px 0px;
     98    }
     99    .rftIconForward {
     100        background-position: -896px 0px;
     101    }
     102    .rftIconRefresh {
     103        background-position: -928px 0px;
     104    }
     105    .rftIconHelp {
     106        background-position: -960px 0px;
     107    }
     108    .rftIconInspect {
     109        background-position: -992px 0px;
     110    }
     111    .rftIconTag {
     112        background-position: -1024px 0px;
     113    }
     114    .rftIconImage {
     115        background-position: -1056px 0px;
     116    }
     117    .rftIconEdit {
     118        background-position: -1088px 0px;
     119    }
     120    .rftIconLock {
     121        background-position: -1120px 0px;
     122    }
     123    .rftIconUnlock {
     124        background-position: -1152px 0px;
     125    }
     126    .rftIconPreset {
     127        background-position: -1184px 0px;
     128    }
     129    .rftIconTextBlock {
     130        background-position: -1216px 0px;
     131    }
     132    .rftIconPageBreak {
     133        background-position: -1248px 0px;
     134    }
     135    .rftIconExternal {
     136        background-position: -1280px 0px;
     137    }
     138    .rftIconInput {
     139        background-position: -1312px 0px;
     140    }
     141    .rftIconPublish {
     142        background-position: -1344px 0px;
     143    }
     144    //Arrows
     145    .rftIconFullArrowUp {
     146        background-position: -1696px 0px;
     147    }
     148    .rftIconFullArrowDown {
     149        background-position: -1728px 0px;
     150    }
     151    .rftIconFullArrowLeft {
     152        background-position: -1760px 0px;
     153    }
     154    .rftIconFullArrowRight {
     155        background-position: -1792px 0px;
     156    }
     157    .rftIconHalfArrowUp {
     158        background-position: -1824px 0px;
     159    }
     160    .rftIconHalfArrowDown {
     161        background-position: -1856px 0px;
     162    }
     163    .rftIconHalfArrowLeft {
     164        background-position: -1888px 0px;
     165    }
     166    .rftIconHalfArrowRight {
     167        background-position: -1920px 0px;
     168    }
    168169}

  • Dev/trunk/src/client/qed-client/css/mixins.less

    r443 r529  
    6767        .setIconSize(@size, "");
    6868}
     69.setIcon (@size, grey) {
     70        .setIconSize(@size, "g");
     71}
    6972.setIcon (@size) {
    7073        .setIconSize(@size, "");

  • Dev/trunk/src/client/qed-client/css/qed.less

    r513 r529  
    1515@import "fonts.less";
    1616@import "icons.less";
     17@import "loading.less";
    1718@import "layout.less";
    1819@import "forms.less";

  • Dev/trunk/src/client/qed-client/css/variables.less

    r492 r529  
    66@headers: #999999;
    77@text: #ffffff;
     8@inactivetext: #aaaaaa;
    89@disabledtext: #777777;
    910

  • Dev/trunk/src/client/qed-client/css/widgets/BlockButton.less

    r492 r529  
    55    height: @button_block_height;
    66    vertical-align: top;
    7     color: @text;
     7    color: @inactivetext;
    88
    99    &.dijitDisabled {
    1010        color: @disabledtext;
     11    }
     12
     13    &.dijitHover {
     14        color: @text;
    1115    }
    1216
    … …  
    3034
    3135        .rftIcon {
    32             .setIcon(16px);
     36            .setIcon(16px, grey);
    3337        }
    3438    }
    … …  
    3943        .rftIcon {
    4044            vertical-align: top;
    41             .setIcon(16px, black);
     45            .setIcon(16px, white);
    4246        }
    4347    }

  • Dev/trunk/src/client/qed-client/css/widgets/LargeButton.less

    r492 r529  
    77        height: @button_large_height;
    88        padding: 3px;
    9         color: @text;
     9        color: @inactivetext;
    1010
    1111        &*, * {
    … …  
    2020        }
    2121
     22        &.dijitHover {
     23            color: @text;
     24        }
     25
    2226        .dijitButtonNode {
    2327
    … …  
    3034
    3135            .rftIcon {
    32                 .setIcon(24px);
     36                .setIcon(24px, grey);
    3337            }
    3438
    … …  
    4549        }
    4650
    47         &.rftLargeButtonHover .dijitButtonNode,
    48         &.rftLargeButtonActive .dijitButtonNode {
     51        &.rftLargeButtonHover,
     52        &.rftLargeButtonActive {
    4953            .transition (0.1s);
     54            .rftIcon {
     55                vertical-align: top;
     56                .setIcon(24px, white);
     57            }
    5058        }
    5159    }

  • Dev/trunk/src/client/qed-client/model/widgets/QuestionEditorToolkit.js

    r510 r529  
    111111        },
    112112        _onCategoryAdd: function() {
     113            // it seems, the button is not disabled properly and still
     114            // generates click events, that's why we chack here.
     115            if ( this.disabled || this.readOnly ) { return; }
    113116            this._categoryList.appendItem(this._categorySelect.get('displayedValue'));
    114117            this._categorySelect.reset();

  • Dev/trunk/src/client/qed-client/model/widgets/templates/QuestionEditorToolkit.html

    r513 r529  
    11<form>
    22        <div data-dojo-type="../../widgets/TitleGroup">
    3                 <div data-dojo-type="dijit/TitlePane" class="orange" data-dojo-props="open:true" title="Properties" data-dojo-props="iconClass:'rftIcon rftIconProperties'">
     3                <div data-dojo-type="dijit/TitlePane"
     4             class="orange"
     5             data-dojo-props="open:true"
     6             title="Properties"
     7             data-dojo-props="iconClass:'rftIcon rftIconProperties'">
    48            <fieldset class="align">
    5                 <label>Title:</label><input data-dojo-type="dijit/form/ValidationTextBox" required="required" name="title"/>
    6                 <label>Code:</label><input data-dojo-type="dijit/form/ValidationTextBox" required="required" name="code"/>
     9                <label>Title:</label><input data-dojo-type="dijit/form/ValidationTextBox"
     10                                            required="required" name="title"/>
     11                <label>Code:</label><input data-dojo-type="dijit/form/ValidationTextBox"
     12                                           required="required" name="code"/>
    713                <label>Categories:</label>
    8                 <div data-dojo-attach-point="categoryListNode" class="rftLineListView"></div>
     14                <div data-dojo-attach-point="categoryListNode"
     15                     class="rftLineListView"></div>
    916                <div data-dojo-attach-point="categoryBoxNode"></div>
    10                 <button class="inheritBgColor" data-dojo-type="dijit/form/Button" data-dojo-attach-event="onClick:_onCategoryAdd" data-dojo-props="baseClass:'rftBlockButton', iconClass: 'rftIcon rftIconPlus'">Add</button><br/>
     17                <button class="inheritBgColor"
     18                        data-dojo-type="dijit/form/Button"
     19                        data-dojo-attach-event="onClick:_onCategoryAdd"
     20                        data-dojo-props="baseClass:'rftBlockButton', iconClass: 'rftIcon rftIconPlus'">
     21                  Add</button><br/>
    1122                <label>Topic:</label>
    1223                <div data-dojo-attach-point="topicBoxNode"></div>
    13                 <label>Description:</label><textarea data-dojo-type="dijit/form/Textarea" name="description"></textarea>
     24                <label>Description:</label>
     25                <textarea data-dojo-type="dijit/form/Textarea"
     26                          name="description"></textarea>
    1427            </fieldset>
    1528                </div>
    1629
    17                 <div data-dojo-type="dijit/TitlePane" title="Content" data-dojo-props="iconClass:'rftIcon rftIconPlus', open:false">
     30                <div data-dojo-type="dijit/TitlePane"
     31             title="Content"
     32             data-dojo-props="iconClass:'rftIcon rftIconPlus', open:false">
    1833                        <div data-dojo-attach-point="ToolkitContentSourceNode"></div>
    1934                </div>
    2035
    21                 <div data-dojo-type="dijit/TitlePane" title="Inputs" data-dojo-props="iconClass:'rftIcon rftIconInput', open:false">
     36                <div data-dojo-type="dijit/TitlePane"
     37             title="Inputs"
     38             data-dojo-props="iconClass:'rftIcon rftIconInput', open:false">
    2239                        <div data-dojo-attach-point="ToolkitInputsSourceNode"></div>
    2340                </div>

  • Dev/trunk/src/client/qed-client/pages/questions.js

    r495 r529  
    5050        },
    5151        onDeleteQuestion: function(question) {
     52            if ( !confirm("Are you sure you want to delete this question?") ) {
     53                return;
     54            }
    5255            questions.remove(question)
    5356            .then(lang.hitch(this,function(){
    … …  
    6265        },
    6366        onPublishQuestion: function(question) {
     67            if ( !confirm("After publication the question cannot be modified anymore, are you sure?") ) {
     68                return;
     69            }
    6470            question.publicationDate = new Date();
    6571            questions.save(question)

  • Dev/trunk/src/client/qed-client/pages/surveyRun.js

    r519 r529  
    4747            .then(lang.hitch(this,function(allResponses){
    4848                array.forEach(allResponses, function(response){
    49                     var actions = {};
     49                    var actions = {}, w;
    5050                    if ( !response.publicationDate ) {
    5151                        actions.Delete = {
    52                             callback: function(){
    53                                 responses.remove(response)
    54                                 .then(function(){
    55                                     w.destroy();
    56                                 });
    57                             },
     52                            callback: lang.hitch(this,function(){
     53                                // We cannot bind _onDeleteResponse
     54                                // directly, because of the
     55                                // initialization problem with w. We
     56                                // need it in the handler, but we need
     57                                // to pass the handler as an argument
     58                                // on the creation of w.
     59                                this._onDeleteResponse(response,w);
     60                            }),
    5861                            properties: {
    5962                                icon: 'Delete',
    … …  
    6265                        };
    6366                    }
    64                     var w = new LineWithActionsWidget({
     67                    w = new LineWithActionsWidget({
    6568                        actions: actions
    6669                    });
    … …  
    7073                }, this);
    7174            }));
     75        },
     76        _onDeleteResponse: function(response,w) {
     77            if ( !confirm("Are you sure you want to delete this survey response?") ) {
     78                return;
     79            }
     80            responses.remove(response)
     81            .then(function(){
     82                w.destroy();
     83            });
    7284        },
    7385        _handlePropChange: function(e) {

  • Dev/trunk/src/client/qed-client/pages/surveys.js

    r508 r529  
    1616            if ( this._started ) { return; }
    1717            this.inherited(arguments);
     18            this.draftsTab.set('title','Drafts (<span class="qedLoading"></span>)');
     19            this.publishedTab.set('title','Published (<span class="qedLoading"></span>)');
     20            this.runsTab.set('title','Runs (<span class="qedLoading"></span>)');
    1821            this.refresh();
    1922        },
    … …  
    2225        },
    2326        _onPublishSurvey:function(survey){
    24             var self = this;
     27            if ( !confirm("After publication the survey cannot be modified anymore, are you sure?") ) {
     28                return;
     29            }
    2530            survey.publicationDate = new Date();
    2631            surveys.save(survey)
    27             .then(function(){
    28                 self.refreshDrafts();
    29                 self.refreshPublished();
    30             },lang.hitch(this,function(err){
     32            .then(lang.hitch(this,function(){
     33                this.refreshDrafts();
     34                this.refreshPublished();
     35            }),lang.hitch(this,function(err){
    3136                this.notify(err.error,'error');
    3237            }));
    3338        },
    3439        _onDeleteSurvey:function(survey){
    35             var self = this;
     40            if ( !confirm("Are you sure you want to delete this draft survey?") ) {
     41                return;
     42            }
    3643            surveys.remove(survey)
    37             .then(function(){
    38                 self.refreshDrafts();
    39             },lang.hitch(this,function(err){
     44            .then(lang.hitch(this,function(){
     45                this.refreshDrafts();
     46            }),lang.hitch(this,function(err){
    4047                this.notify(err.error,'error');
    4148            }));
    … …  
    6269        },
    6370        _onRunDelete: function(surveyRun) {
     71            if ( !confirm("Are you sure you want to delete this survey run?") ) {
     72                return;
     73            }
    6474            surveyRuns.remove(surveyRun)
    6575            .then(lang.hitch(this,function(){
    … …  
    135145                                label: 'Run',
    136146                                tooltip: 'Run survey',
    137                                 icon: 'Run'
     147                                icon: 'Forward'
    138148                            }
    139149                        }]

  • Dev/trunk/src/client/qed-client/pages/templates/surveys.html

    r443 r529  
    88    </div>
    99
    10     <div data-dojo-attach-point="tabContainer" data-dojo-type="dijit/layout/TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
     10    <div data-dojo-attach-point="tabContainer"
     11         data-dojo-type="dijit/layout/TabContainer"
     12         class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
    1113
    12         <div data-dojo-type="dijit/layout/BorderContainer" title="Drafts" data-dojo-attach-point="draftsTab">
     14        <div data-dojo-type="dijit/layout/BorderContainer"
     15             title="Drafts"
     16             data-dojo-attach-point="draftsTab">
    1317            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'" data-dojo-attach-point="draftsContainer">
    1418            </div>
    … …  
    1721        </div>
    1822
    19         <div data-dojo-type="dijit/layout/BorderContainer" title="Published" data-dojo-attach-point="publishedTab">
    20             <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'" data-dojo-attach-point="publishedContainer">
     23        <div data-dojo-type="dijit/layout/BorderContainer"
     24             title="Published"
     25             data-dojo-attach-point="publishedTab">
     26            <div data-dojo-type="dijit/layout/ContentPane"
     27                 data-dojo-props="region: 'center'"
     28                 data-dojo-attach-point="publishedContainer">
    2129            </div>
    22             <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
     30            <div data-dojo-type="dijit/layout/ContentPane"
     31                 data-dojo-props="region: 'bottom'"
     32                 style="height: 40px;">
    2333            </div>
    2434        </div>
    2535
    26         <div data-dojo-type="dijit/layout/BorderContainer" title="Runs" data-dojo-attach-point="runsTab">
    27             <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'" data-dojo-attach-point="runsContainer">
     36        <div data-dojo-type="dijit/layout/BorderContainer"
     37             title="Runs"
     38             data-dojo-attach-point="runsTab">
     39            <div data-dojo-type="dijit/layout/ContentPane"
     40                 data-dojo-props="region: 'center'"
     41                 data-dojo-attach-point="runsContainer">
    2842            </div>
    29             <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
     43            <div data-dojo-type="dijit/layout/ContentPane"
     44                 data-dojo-props="region: 'bottom'"
     45                 style="height: 40px;">
    3046            </div>
    3147        </div>
    3248    </div>
    3349
    34     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
    35         <button data-dojo-type="dijit/form/Button" class="blue" data-dojo-props="baseClass: 'rftBlockButton', iconClass: 'rftIcon rftIconNew'" data-dojo-attach-event="onClick:_onNewSurvey">New survey</button>
     50    <div data-dojo-type="dijit/layout/ContentPane"
     51         data-dojo-props="region: 'bottom'"
     52         style="height: 40px;">
     53        <button data-dojo-type="dijit/form/Button"
     54                class="blue"
     55                data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconNew'"
     56                data-dojo-attach-event="onClick:_onNewSurvey">New survey</button>
    3657    </div>
    3758
Note: See TracChangeset for help on using the changeset viewer.