Upgraded to ember 1.12.0

Upgraded ember list view to v 0.0.6 Moved required properties into list-view mixin Added SafeString to style bindings Part of emberjs#360
patsy-issa · Oct 15, 2015 · c436c9f · c436c9f
1 parent b35f015
commit c436c9f
Show file tree

Hide file tree

Showing 20 changed files with 217 additions and 65 deletions.
diff --git a/app/components/drag-handle.js b/app/components/drag-handle.js
@@ -1,5 +1,5 @@
 import Ember from "ember";
-const { computed } = Ember;
+const { computed, Handlebars: { SafeString } } = Ember;
 export default Ember.Component.extend({
   classNames: ['drag-handle'],
   classNameBindings: ['isLeft:drag-handle--left', 'isRight:drag-handle--right', 'class'],
@@ -49,9 +49,8 @@ export default Ember.Component.extend({
 
   style: computed('side', 'position', function () {
     if (this.get('side')) {
-      return this.get('side') + ':' + this.get('position') + 'px';
-    } else {
-      return '';
+      return new SafeString(`${this.get('side')}: ${this.get('position')}px;`);
     }
+    return '';
   })
 });
diff --git a/app/components/record-item.js b/app/components/record-item.js
@@ -1,5 +1,5 @@
 import Ember from 'ember';
-const { Component, computed } = Ember;
+const { Component, computed, Handlebars: { SafeString }, isEmpty } = Ember;
 const COLOR_MAP = {
   red: '#ff2717',
   blue: '#174fff',
@@ -18,10 +18,10 @@ export default Component.extend({
   // TODO: Color record based on `color` property.
   style: computed('model.color', function() {
     let colorName = this.get('model.color');
-    if (!Ember.isEmpty(colorName)) {
+    if (!isEmpty(colorName)) {
       let color = COLOR_MAP[colorName];
       if (color) {
-        return 'color:' + color + ';';
+        return new SafeString(`color: ${color};`);
       }
     }
     return '';

diff --git a/app/components/resizable-column.js b/app/components/resizable-column.js
@@ -1,12 +1,12 @@
 import Ember from "ember";
-const { computed } = Ember;
-export default Ember.Component.extend({
+const { Component, computed, Handlebars: { SafeString } } = Ember;
+export default Component.extend({
   width: null,
 
   attributeBindings: ['style'],
 
   style: computed('width', function () {
-    return '-webkit-flex: none; flex: none; width:' + this.get('width') + 'px;';
+    return new SafeString(`-webkit-flex: none; flex: none; width: ${this.get('width')}px;`);
   }),
 
   didInsertElement() {

diff --git a/app/components/route-item.js b/app/components/route-item.js
@@ -1,6 +1,6 @@
 import Ember from 'ember';
 import checkCurrentRoute from "ember-inspector/utils/check-current-route";
-const { Component, computed } = Ember;
+const { Component, computed, Handlebars: { SafeString } } = Ember;
 
 export default Component.extend({
   // passed as an attribute to the component
@@ -13,7 +13,7 @@ export default Component.extend({
   label: 'route-node',
 
   labelStyle: computed('model.parentCount', function() {
-    return 'padding-left: ' + ((+this.get('model.parentCount') * 20) + 5) + "px";
+    return new SafeString(`padding-left: ${+this.get('model.parentCount') * 20 + 5}px;`);
   }),
 
   isCurrent: computed('currentRoute', 'model.value.name', function() {
@@ -25,4 +25,3 @@ export default Component.extend({
     return checkCurrentRoute( currentRoute, this.get('model.value.name') );
   })
 });
-
diff --git a/app/components/view-item.js b/app/components/view-item.js
@@ -1,5 +1,5 @@
 import Ember from "ember";
-const { computed, Component } = Ember;
+const { computed, Component, Handlebars: { SafeString } } = Ember;
 const { not, bool } = computed;
 
 export default Component.extend({
@@ -25,7 +25,7 @@ export default Component.extend({
   }),
 
   labelStyle: computed('model.parentCount', function() {
-    return 'padding-left: ' + ((+this.get('model.parentCount') * 20) + 5) + "px";
+    return new SafeString(`padding-left: ${+this.get('model.parentCount') * 20 + 5}px;`);
   }),
 
   actions: {

diff --git a/app/controllers/promise-item.js b/app/controllers/promise-item.js
@@ -1,5 +1,5 @@
 import Ember from "ember";
-const { computed } = Ember;
+const { computed, Handlebars: { SafeString } } = Ember;
 const { alias, notEmpty, empty, gt, equal } = computed;
 
 const COLOR_MAP = {
@@ -29,7 +29,7 @@ export default Ember.ObjectProxy.extend({
     } else {
       color = 'blue';
     }
-    return 'background-color:' + COLOR_MAP[color] + ';color:white;';
+    return new SafeString(`background-color: ${COLOR_MAP[color]};color: white;'`);
   }),
 
 
@@ -52,12 +52,12 @@ export default Ember.ObjectProxy.extend({
       relevant = this.get('model').matchesExactly(this.get('effectiveSearch'));
     }
     if (!relevant) {
-      return 'opacity: 0.3';
+      return new SafeString('opacity: 0.3');
     }
   }),
 
   labelStyle: computed('level', function() {
-    return 'padding-left: ' + ((+this.get('level') * 20) + 5) + "px";
+    return new SafeString(`padding-left: ${+this.get('level') * 20 + 5}px;`);
   }),
 
   expandedClass: computed('hasChildren', 'isExpanded', function() {

diff --git a/app/controllers/render-item.js b/app/controllers/render-item.js
@@ -1,6 +1,6 @@
 import Ember from "ember";
 import escapeRegExp from "ember-inspector/utils/escape-reg-exp";
-const { ObjectController, computed, isEmpty, run, on, observer } = Ember;
+const { ObjectController, computed, isEmpty, run, on, observer, Handlebars: { SafeString } } = Ember;
 const { gt, readOnly } = computed;
 const { once } = run;
 
@@ -34,7 +34,7 @@ export default ObjectController.extend({
 
   nodeStyle: computed('searchMatch', function() {
     if (!this.get('searchMatch')) {
-      return 'opacity: 0.5';
+      return new SafeString('opacity: 0.5');
     }
   }),
 
@@ -47,7 +47,7 @@ export default ObjectController.extend({
   }),
 
   nameStyle: computed('level', function() {
-    return 'padding-left: ' + ((+this.get('level') * 20) + 5) + "px";
+    return new SafeString(`padding-left: ${+this.get('level') * 20 + 5}px;`);
   }),
 
   hasChildren: gt('children.length', 0),

diff --git a/app/styles/list_view.scss b/app/styles/list_view.scss
@@ -1,5 +1,4 @@
-
- .list-view {
+.list-view {
   position: relative;
   font-size: 11px;
   height: 100%;

diff --git a/app/views/instance-list.js b/app/views/instance-list.js
@@ -1,9 +1,23 @@
-import ListView from "ember-inspector/views/list";
-import ListItemView from "ember-inspector/views/list-item";
+import ListView from 'ember-inspector/views/list';
+import ListItemView from 'ember-inspector/views/list-item';
 
+/**
+ * @module Views
+ * @extends Views.List
+ * @class InstanceList
+ * @namespace Views
+ */
 export default ListView.extend({
+  /**
+   * @property itemViewClass
+   * @type {Ember.View}
+   */
   itemViewClass: ListItemView.extend({
-    templateName: "instance_item"
+    /**
+     * @property templateName
+     * @type {String}
+     * @default 'instance_item'
+     */
+    templateName: 'instance_item'
   })
-
 });
diff --git a/app/views/list-item.js b/app/views/list-item.js
@@ -1,4 +1,15 @@
-import ListItemView from "list-view/list-item-view";
+import ListItemView from 'ember-list-view/list-item-view';
+
+/**
+ * @module Views
+ * @extends ListItemView
+ * @class ListItem
+ * @namespace Views
+ */
 export default ListItemView.extend({
+  /**
+   * @property classNames
+   * @type {Array}
+   */
   classNames: ["list-tree__item-wrapper", "row-wrapper"]
 });
diff --git a/app/views/list.js b/app/views/list.js
@@ -1,13 +1,34 @@
-import Ember from "ember";
-import ListItemView from "ember-inspector/views/list-item";
-import ListView from "list-view/list-view";
-const { computed } = Ember;
+import Ember from 'ember';
+import ListView from 'ember-list-view';
+import ListItemView from 'ember-inspector/views/list-item';
 
+const { computed, computed: { alias } } = Ember;
+
+/**
+ * Base list view config
+ *
+ * @module Views
+ * @extends ListView
+ * @class List
+ * @namespace Views
+ */
 export default ListView.extend({
+  /**
+   * @property classNames
+   * @type {Array}
+   */
   classNames: ["list-tree"],
 
-  contentHeight: Ember.computed.alias('controller.controllers.application.contentHeight'),
+  /**
+   * @property contentHeight
+   * @type {Integer}
+   */
+  contentHeight: alias('controller.controllers.application.contentHeight'),
 
+  /**
+   * @property height
+   * @type {Integer}
+   */
   height: computed('contentHeight', function() {
     let headerHeight = 31;
     let contentHeight = this.get('contentHeight');
@@ -19,6 +40,17 @@ export default ListView.extend({
     }
     return contentHeight - headerHeight;
   }),
+
+  /**
+   * @property rowHeight
+   * @type {Integer}
+   * @default 30
+   */
   rowHeight: 30,
+
+  /**
+   * @property itemViewClass
+   * @type {Ember.View}
+   */
   itemViewClass: ListItemView
 });
diff --git a/app/views/promise-list.js b/app/views/promise-list.js
@@ -1,9 +1,23 @@
-import ListView from "ember-inspector/views/list";
+import ListView from 'ember-inspector/views/list';
 import ListItemView from "ember-inspector/views/list-item";
 
+/**
+ * @module Views
+ * @extends Views.List
+ * @class PromiseList
+ * @namespace Views
+ */
 export default ListView.extend({
+  /**
+   * @property itemViewClass
+   * @type {Ember.View}
+   */
   itemViewClass: ListItemView.extend({
-    templateName: "promise_item"
+    /**
+     * @property templateName
+     * @type {String}
+     * @default 'promise_item'
+     */
+    templateName: 'promise_item'
   })
-
 });
diff --git a/app/views/record-list.js b/app/views/record-list.js
@@ -1,15 +1,34 @@
 import Ember from 'ember';
-import ListView from "ember-inspector/views/list";
-import ListItemView from "ember-inspector/views/list-item";
+import ListView from 'ember-inspector/views/list';
+import ListItemView from 'ember-inspector/views/list-item';
 
-const { computed } = Ember;
-const { readOnly } = computed;
+const { computed: { readOnly } } = Ember;
 
+/**
+ * @module Views
+ * @extends Views.List
+ * @class RecordList
+ * @namespace Views
+ */
 export default ListView.extend({
+  /**
+   * @property itemViewClass
+   * @type {Ember.View}
+   */
   itemViewClass: ListItemView.extend({
-    templateName: "record_item",
+    /**
+     * @property templateName
+     * @type {String}
+     * @default 'record_item'
+     */
+    templateName: 'record_item',
 
-    // TODO: Look for a better way
+    /**
+     * TODO: Need a better way to pass this
+     *
+     * @property columns
+     * @type {Array}
+     */
     columns: readOnly('parentView.columns')
   })
 });
diff --git a/app/views/render-list.js b/app/views/render-list.js
@@ -1,13 +1,13 @@
 import Ember from "ember";
-const { View, computed } = Ember;
+const { View, computed, Handlebars: { SafeString } } = Ember;
 
 export default View.extend({
   attributeBindings: ['style'],
 
   classNames: ["list-tree", "list-tree_scrollable"],
 
   style: computed('height', function() {
-    return 'height:' + this.get('height') + 'px';
+    return new SafeString(`height: ${this.get('height')}px;`);
   }),
 
   contentHeight: Ember.computed.alias('controller.controllers.application.contentHeight'),

diff --git a/app/views/route-list.js b/app/views/route-list.js
@@ -1,14 +1,34 @@
 import Ember from 'ember';
-import ListView from "ember-inspector/views/list";
-import ListItemView from "ember-inspector/views/list-item";
-const { computed } = Ember;
-const { readOnly } = computed;
+import ListView from 'ember-inspector/views/list';
+import ListItemView from 'ember-inspector/views/list-item';
 
+const { computed: { readOnly } } = Ember;
+
+/**
+ * @module Views
+ * @extends Views.List
+ * @class RouteList
+ * @namespace Views
+ */
 export default ListView.extend({
+  /**
+   * @property itemViewClass
+   * @type {Ember.View}
+   */
   itemViewClass: ListItemView.extend({
-    templateName: "route_item",
+    /**
+     * @property templateName
+     * @type {String}
+     * @default 'route_item'
+     */
+    templateName: 'route_item',
 
-    // TODO: Need a better way to pass this
+    /**
+     * TODO: Need a better way to pass this
+     *
+     * @property currentRoute
+     * @type {String}
+     */
     currentRoute: readOnly('parentView.currentRoute')
   })
 });