From 6e40fea9623ff48eb7b28deb85824ae9457a601b Mon Sep 17 00:00:00 2001 From: Ryon Coleman Date: Tue, 8 Dec 2020 17:45:16 +0000 Subject: [PATCH] feat: add first-pass draft of ratings Rater to replace Slider --- .../app/controller/Demonstrations.js | 6 +- .../slate-cbl/src/field/ratings/Rater.js | 96 +++++++++++++++++++ .../slate-cbl/src/field/ratings/Rater.scss | 19 ++++ .../slate-cbl/src/field/ratings/Slider.js | 2 +- .../src/field/ratings/StudentCompetency.js | 35 +++++-- .../src/field/ratings/StudentCompetency.scss | 7 +- 6 files changed, 150 insertions(+), 15 deletions(-) create mode 100644 sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.js create mode 100644 sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.scss diff --git a/sencha-workspace/SlateDemonstrationsTeacher/app/controller/Demonstrations.js b/sencha-workspace/SlateDemonstrationsTeacher/app/controller/Demonstrations.js index 06f8d3c76..f4b999089 100644 --- a/sencha-workspace/SlateDemonstrationsTeacher/app/controller/Demonstrations.js +++ b/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'); } } -}); \ No newline at end of file +}); diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.js b/sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.js new file mode 100644 index 000000000..ea632e93a --- /dev/null +++ b/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); + // }, +}); diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.scss b/sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.scss new file mode 100644 index 000000000..6f48c93c0 --- /dev/null +++ b/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; + } +} diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/Slider.js b/sencha-workspace/packages/slate-cbl/src/field/ratings/Slider.js index 9191afcd4..e53de03b5 100644 --- a/sencha-workspace/packages/slate-cbl/src/field/ratings/Slider.js +++ b/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); -}); \ No newline at end of file +}); diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.js b/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.js index 3606b2b8a..e89245aaf 100644 --- a/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.js +++ b/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: [ - '

{Descriptor}

', - '
{Statement}
' - ] + itemId: 'competencyInfo', + items: [{ + flex: 1, + xtype: 'component', + itemId: 'competencyInfoHeader', + tpl: [ + '
', + '

{Descriptor}

', + '
{Statement}
', + '
', + ] + }, { + 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', { } } } -}); \ No newline at end of file +}); diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.scss b/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.scss index a5acb09cf..59a55ec39 100644 --- a/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.scss +++ b/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; } -} \ No newline at end of file +}