feat: add first-pass draft of ratings Rater to replace Slider

sencha-workspace/SlateDemonstrationsTeacher/app/controller/Demonstrations.js

@@ -86,7 +86,7 @@ Ext.define('SlateDemonstrationsTeacher.controller.Demonstrations', {
             modal: true,
             layout: 'fit',
             minWidth: 300,
-            width: 600,
+            width: 960,
             minHeight: 600,
 
             mainView: {
@@ -316,7 +316,7 @@ Ext.define('SlateDemonstrationsTeacher.controller.Demonstrations', {
 
 
         // fetch demonstration and show window
-        if (!demonstration || (typeof demonstration == 'object' && !demonstration.isModel)) {
+        if (!demonstration || typeof demonstration == 'object' && !demonstration.isModel) {
             demonstration = DemonstrationModel.create(Ext.apply({
                 Class: 'Slate\\CBL\\Demonstrations\\ExperienceDemonstration',
                 Demonstrated: new Date()
@@ -350,4 +350,4 @@ Ext.define('SlateDemonstrationsTeacher.controller.Demonstrations', {
             Ext.Logger.error('Invalid demonstration option');
         }
     }
-});
+});

sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.js

@@ -0,0 +1,96 @@
+Ext.define('Slate.cbl.field.ratings.Rater', {
+    extend: 'Ext.Container',
+    xtype: 'slate-cbl-ratings-rater',
+    requires: [
+        'Slate.cbl.model.Skill'
+    ],
+
+    config: {
+        skill: null,
+        level: null,
+    },
+
+    componentCls: 'slate-cbl-ratings-rater',
+
+    items: [{
+        xtype: 'label',
+        cls: 'x-form-item-label',
+        text: 'Skill code and descriptor',
+    }, {
+        xtype: 'container',
+        layout: 'hbox',
+        margin: '4 0',
+        items: [{
+            xtype: 'button',
+            scale: 'large',
+            text: 'Clear',
+            cls: 'slate-cbl-ratings-rater-clear-btn',
+        }, {
+            flex: 1,
+            xtype: 'segmentedbutton',
+            margin: '0 0 0 16',
+            defaults: {
+                scale: 'large',
+            },
+            items: [{
+                cls: 'slate-cbl-ratings-rater-menu-btn',
+                glyph: 'xf0c9', // fa-bars
+                menu: {
+                    items: [{
+                        text: '1',
+                    }, {
+                        text: '2',
+                    }, {
+                        text: '3',
+                    }, {
+                        text: '4',
+                    }, {
+                        text: 'DNM',
+                    }],
+                },
+            }, {
+                text: 'M',
+            }, {
+                text: '5',
+            }, {
+                text: '6',
+            }, {
+                text: '7',
+            }, {
+                text: '8',
+            }, {
+                text: '9',
+            }, {
+                text: '10',
+            }, {
+                text: '11',
+            }, {
+                text: '12',
+            }, {
+                glyph: 'xf00c', // fa-check
+            }],
+        }],
+    }],
+
+    // config handlers
+    // applySkill: function(skill, oldSkill) {
+    //     if (!skill) {
+    //         return null;
+    //     }
+
+    //     if (!skill.isModel) {
+    //         if (oldSkill && skill.ID == oldSkill.getId()) {
+    //             oldSkill.set(skill, { dirty: false });
+    //             return oldSkill;
+    //         }
+
+    //         skill = Slate.cbl.model.Skill.create(skill);
+    //     }
+
+    //     return skill;
+    // },
+
+    // updateSkill: function(skill) {
+    //     this.setFieldLabel(skill ? skill.get('Code') + '—' + skill.get('Descriptor') : null);
+    // },
+});

sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.scss

@@ -0,0 +1,19 @@
+.slate-cbl-ratings-rater {
+    .x-btn-icon-el-default-large.x-btn-glyph { // TODO replace selector?
+        font-size: 14px;
+    }
+}
+
+.slate-cbl-ratings-rater-clear-btn {
+    .x-btn-inner {
+        font-size: 13px;
+        text-transform: uppercase;
+    }
+}
+
+.slate-cbl-ratings-rater-menu-btn {
+    // matching framework selector
+    .x-btn-arrow-right > .x-btn-icon.x-btn-no-text.x-btn-button-default-large {
+        padding-right: 0;
+    }
+}

sencha-workspace/packages/slate-cbl/src/field/ratings/Slider.js

@@ -459,4 +459,4 @@ Ext.define('Slate.cbl.field.ratings.Slider', {
 }, function(Slider) {
     // make this class statically observable so instances can monitor other instances for tip showing
     Ext.util.Observable.observe(Slider);
-});
+});

sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.js

@@ -35,10 +35,10 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
 
     // component configuration
     componentCls: 'slate-cbl-ratings-studentcompetency',
-    padding: '16 75',
+    padding: '16',
 
     // container configuration
-    defaultType: 'slate-cbl-ratings-slider',
+    defaultType: 'slate-cbl-ratings-rater',
     layout: 'anchor',
     defaults: {
         anchor: '100%',
@@ -48,13 +48,27 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
         {
             dock: 'top',
 
-            xtype: 'component',
-            itemId: 'competencyInfo',
+            xtype: 'container',
+            layout: 'hbox',
             hidden: true,
-            tpl: [
-                '<h4 class="competency-descriptor">{Descriptor}</h4>',
-                '<blockquote class="competency-statement">{Statement}</blockquote>'
-            ]
+            itemId: 'competencyInfo',
+            items: [{
+                flex: 1,
+                xtype: 'component',
+                itemId: 'competencyInfoHeader',
+                tpl: [
+                    '<header class="competency-header">',
+                        '<h4 class="competency-descriptor">{Descriptor}</h4>',
+                        '<blockquote class="competency-statement">{Statement}</blockquote>',
+                    '</header>',
+                ]
+            }, {
+                xtype: 'button',
+                margin: '0 0 0 16',
+                text: 'Remove',
+                tooltip: 'Remove this competency from the demonstration',
+                glyph: 'xf00d', // fa-times
+            }],
         }
     ],
 
@@ -81,6 +95,7 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
     updateStudentCompetency: function(studentCompetency) {
         var me = this,
             competencyInfoCmp = me.getDockedComponent('competencyInfo'),
+            competencyInfoHeader = competencyInfoCmp.getComponent('competencyInfoHeader'),
             skillValueQueue = me.skillValueQueue,
             skillFieldsMap = me.skillFieldsMap = {},
             currentLevel, competencyData, skills,
@@ -94,7 +109,7 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
             currentLevel = studentCompetency.get('Level');
             competencyData = studentCompetency.get('Competency');
             me.setSelectedCompetency(competencyData.Code);
-            competencyInfoCmp.setData(competencyData);
+            competencyInfoHeader.setData(competencyData);
             competencyInfoCmp.show();
 
             skills = competencyData.Skills || [];
@@ -269,4 +284,4 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
             }
         }
     }
-});
+});

sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.scss

@@ -1,4 +1,8 @@
 .slate-cbl-ratings-studentcompetency {
+    .competency-header {
+        max-width: 480px;
+    }
+
     h4 {
         margin: 0 0 .25em;
     }
@@ -7,7 +11,8 @@
         border: none;
         color: #666;
         font-style: italic;
+        line-height: (4/3);
         margin: 0;
         padding: 0;
     }
-}
+}