Merge pull request #240 from massive/migrate-to-webpack

Migrate flame.js to Webpack

mixins/menu_view_support.js

@@ -30,7 +30,7 @@ export default Ember.Mixin.create({
         var totalPadding = paddingTop + paddingBottom;
         var margin = this.get('menuMargin');
         var menuOuterHeight = this.get('items').get('length') * this.get('itemHeight') + totalPadding + 2 * borderWidth;
-        var wh = $(window).height();
+        var wh = Ember.$(window).height();
         var anchorTop = anchorElement.offset().top;
         var anchorHeight = anchorElement.outerHeight();
         var layout = this.get('layout');

stylesheets/error_message.css.scss

@@ -1,4 +1,4 @@
-@import 'mixins';
+@import 'mixins.css.scss';
 
 // This is outside the form-view element, so we can't use it as parent selector
 .flame-form-view-validation-error {
@@ -13,22 +13,22 @@
 
     &.points-to-right .pointer {
         float: right;
-        background-image: image-url('images/error_triangle_right.png');
+        background-image: url("../images/error_triangle_right.png");
     }
 
     &.points-to-left .pointer {
-        background-image: image-url('images/error_triangle_left.png');
+        background-image: url("../images/error_triangle_left.png");
         float: left;
     }
 
     &.skinny.points-to-left .pointer {
         margin-top: 0;
-        background-image: image-url('images/error_triangle_left_skinny.png');
+        background-image: url("../images/error_triangle_left_skinny.png");
     }
 
     &.skinny.points-to-right .pointer {
         margin-top: 0;
-        background-image: image-url('images/error_triangle_right_skinny.png');
+        background-image: url("../images/error_triangle_right_skinny.png");
     }
 
     .error-box {

stylesheets/flame.css.scss

@@ -1,35 +1,5 @@
-//= require ./reset
-//= require_self
-//= require ./views/label_view
-//= require ./views/button_view
-//= require ./views/checkbox_view
-//= require ./views/radio_button_view
-//= require ./views/select_button_view
-//= require ./views/text_field_view
-//= require ./views/search_text_field_view
-//= require ./views/disclosure_view
-//= require ./views/split_view
-//= require ./views/tab_view
-//= require ./views/collection_view
-//= require ./views/table_view
-//= require ./views/table_view
-//= require ./views/form_view
-//= require ./views/progress_view
-//= require ./views/scroll_view
-//= require ./views/list_view
-//= require ./views/lazy_list_view
-//= require ./views/list_item_view
-//= require ./views/tree_item_view
-//= require ./views/lazy_tree_item_view
-//= require ./views/stack_item_view
-//= require ./views/panel
-//= require ./views/menu_view
-//= require ./views/popover
-//= require ./views/tooltip
-//= require ./views/alert_panel
-//= require ./error_message
-
-@import 'mixins';
+@import "reset.css";
+@import "mixins.css.scss";
 
 body {
     font-size: $default-font-size;
@@ -52,9 +22,6 @@ input[type="password"] {
 }
 
 *[contenteditable="true"] {
-    -moz-user-select: text !important;
-    -ms-user-select: text !important;
-    -webkit-user-select: text !important;
     user-select: text !important;
 }
 

stylesheets/mixins.css.scss

@@ -40,14 +40,5 @@ $default-font-size: 13px;
 }
 
 @mixin user-select($user-select) {
-    -ms-user-select: $user-select;
-    -webkit-user-select: $user-select;
     user-select: $user-select;
-    @if $user-select == none {
-        -moz-user-select: -moz-none;
-    } @else if $user-select == auto {
-        -moz-user-select: text;
-    } @else {
-        -moz-user-select: $user-select;
-    }
 }

stylesheets/views/button_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import "../mixins.css.scss";
 
 .flame-button-view {
     border: 1px solid #999;

stylesheets/views/checkbox_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-button-view.flame-checkbox-view {
     @include no-gradient();

stylesheets/views/combo_box_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-combo-box-view {
     background: none;

stylesheets/views/lazy_list_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-lazy-list-view {
     overflow: visible;

stylesheets/views/list_item_view.css.scss

@@ -3,5 +3,6 @@
     border: 1px #ccc;
     overflow: hidden;
     white-space: nowrap;
-    line-height: normal; // this is to emulate pre-reset look, but this may be interpreted differently by browsers
+    // this is to emulate pre-reset look, but this may be interpreted differently by browsers
+    line-height: normal;
 }

stylesheets/views/list_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-list-view {
     & .flame-list-item-view.is-selected,

stylesheets/views/menu_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-menu {
     font-size: 12px;
@@ -46,13 +46,13 @@
 
             &.scroll-up {
                 &.is-shown {
-                    background-image: image-url('images/triangle_up.svg');
+                    background-image: url('../../images/triangle_up.svg');
                 }
             }
 
             &.scroll-down {
                 &.is-shown {
-                    background-image: image-url('images/triangle_down.svg');
+                    background-image: url('../../images/triangle_down.svg');
                 }
             }
         }
@@ -77,18 +77,18 @@
         color: white;
 
         .menu-indicator {
-            background: image-url('images/triangle_right_white.svg') no-repeat 50% 50%;
+            background: url('../../images/triangle_right_white.svg') no-repeat 50% 50%;
         }
 
         .flame-menu-item-view-checkmark {
-            background: image-url('images/checkmark_white.png') no-repeat 0 3px;
+            background: url('../../images/checkmark_white.png') no-repeat 0 3px;
         }
     }
 
     .flame-menu-item-view-checkmark {
         position: absolute;
         left: 4px;
-        background: image-url('images/checkmark_grey.png') no-repeat 0 3px;
+        background: url('../../images/checkmark_grey.png') no-repeat 0 3px;
         width: 12px;
         height: 100%;
     }
@@ -99,6 +99,6 @@
         top: 0;
         width: 16px;
         height: 100%;
-        background: image-url('images/triangle_right.svg') no-repeat 50% 50%;
+        background: url('../../images/triangle_right.svg') no-repeat 50% 50%;
     }
 }

stylesheets/views/panel.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-panel {
     border: 1px solid #888;
@@ -19,7 +19,7 @@
     }
 
     .flame-resize-thumb {
-        background-image: image-url('images/resize_thumb.png');
+        background-image: url('../../images/resize_thumb.png');
         cursor: nwse-resize;
     }
 }

stylesheets/views/popover.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-popover {
     @include no-gradient();

stylesheets/views/progress_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-progress-view {
     .progress-container {

stylesheets/views/radio_button_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-checkbox-view.flame-radio-button-view {
     .flame-checkbox-box {

stylesheets/views/search_text_field_view.css.scss

@@ -2,9 +2,8 @@
     padding-right: 25px;
 
     & > input {
-        background: image-url('images/search.svg') no-repeat 4px 2px;
         border-radius: 10px;
-        background-color: white;
+        background: white url('../../images/search.svg') no-repeat 4px 2px;
         padding-left: 21px;
     }
 }

stylesheets/views/select_button_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-select-button-view {
     label {

stylesheets/views/split_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-vertical-split-view > .flame-split-view-divider {
     border-style: none solid;

stylesheets/views/tab_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-tab-view-tabs .flame-button-view {
     position: static;

stylesheets/views/table_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-table-view {
     line-height: normal;
@@ -137,12 +137,12 @@
             }
 
             &.sort-asc {
-                background-image: image-url('images/sort_asc.png');
+                background-image: url('../../images/sort_asc.png');
                 background-position-y: 8px;
             }
 
             &.sort-desc {
-                background-image: image-url('images/sort_desc.png');
+                background-image: url('../../images/sort_desc.png');
                 background-position-y: 0;
             }
         }

stylesheets/views/text_field_view.css.scss

@@ -1,4 +1,4 @@
-@import '../mixins';
+@import '../mixins.css.scss';
 
 .flame-text {
     overflow: visible;

views/alert_panel.js

@@ -5,16 +5,17 @@ import LabelView from '../views/label_view';
 import ImageView from '../views/image_view';
 import VerticalStackLayoutManager from '../layout_managers/vertical_stack_layout_manager';
 import { nearest } from '../utils/computed_nearest';
-import { image } from '../utils/images';
 import { measureString } from '../utils/string_measurement';
 
+import '../stylesheets/views/alert_panel.css.scss';
+
 const { alias } = Ember.computed;
 
 const AlertPanel = Panel.extend();
 
-export const INFO_ICON = image('info_icon.svg');
-export const WARN_ICON = image('warn_icon.svg');
-export const ERROR_ICON = image('error_icon.svg');
+import INFO_ICON from 'lib/flame/images/info_icon.svg';
+import WARN_ICON from 'lib/flame/images/warn_icon.svg';
+import ERROR_ICON from 'lib/flame/images/error_icon.svg';
 
 export const AlertPanelButtonView = View.extend({
     layout: { width: '100%', right: 0, height: 30 },

views/button_view.js

@@ -2,6 +2,8 @@ import View from '../view';
 import ActionSupport from '../mixins/action_support';
 import Statechart, { State } from '../statechart';
 
+import '../stylesheets/views/button_view.css.scss';
+
 export default View.extend(ActionSupport, Statechart, {
     defaultHeight: 24,
     classNames: ['flame-button-view'],

views/checkbox_view.js

@@ -1,5 +1,8 @@
 import ButtonView from './button_view';
-import { image } from '../utils/images';
+
+import '../stylesheets/views/checkbox_view.css.scss';
+
+import imgUrl from 'lib/flame/images/checkmark.svg';
 
 // A checkbox. The state of the checkbox is indicated by the isSelected property.
 export default ButtonView.extend({
@@ -11,13 +14,12 @@ export default ButtonView.extend({
         buffer.push('<div class="flame-checkbox-box"></div>');
         this.renderCheckMark(buffer);
         var tooltip = this.get('tooltip') || '';
-        buffer.push('<label class="flame-checkbox-label" title="' + tooltip + '">');
+        buffer.push(`<label class="flame-checkbox-label" title="${tooltip}">`);
         buffer.push(Ember.isNone(this.get('title')) ? '' : Handlebars.Utils.escapeExpression(this.get('title')));
         buffer.push('</label>');
     },
 
     renderCheckMark: function(buffer) {
-        var imgUrl = image('checkmark.svg');
-        buffer.push('<div class="flame-view flame-checkbox-checkmark" style="left: 4px; top: 2px;"><img src="' + imgUrl + '"></div>');
+        buffer.push(`<div class="flame-view flame-checkbox-checkmark" style="left: 4px; top: 2px;"><img src="${imgUrl}"></div>`);
     }
 });

views/collection_view.js

@@ -2,6 +2,8 @@ import ViewSupport from '../mixins/view_support';
 import LayoutSupport from '../mixins/layout_support';
 import EventManager from '../mixins/event_manager';
 
+import '../stylesheets/views/collection_view.css.scss';
+
 export default Ember.CollectionView.extend(ViewSupport, LayoutSupport, EventManager, {
     classNames: ['flame-collection-view']
 });

views/combo_box_view.js

@@ -1,7 +1,10 @@
 import ButtonView from './button_view';
 import SelectButtonView from './select_button_view';
 import TextFieldView from './text_field_view';
-import { image } from '../utils/images';
+
+import '../stylesheets/views/combo_box_view.css.scss';
+
+import selectButtonArrow from 'lib/flame/images/select_button_arrow.svg';
 
 export default SelectButtonView.extend({
     classNames: ['flame-combo-box-view'],
@@ -18,7 +21,7 @@ export default SelectButtonView.extend({
 
     buttonView: ButtonView.extend({
         acceptsKeyResponder: false,
-        handlebars: '<img src="%@">'.fmt(image('select_button_arrow.svg')),
+        handlebars: `<img src="${selectButtonArrow}">`,
         layout: { right: -2, width: 22, height: 22 },
 
         action: function() {

views/disclosure_view.js

@@ -1,11 +1,15 @@
 import LabelView from './label_view';
-import { image } from '../utils/images';
+
+import '../stylesheets/views/disclosure_view.css.scss';
+
+import triangleDown from 'lib/flame/images/disclosure_triangle_down.svg';
+import triangleRight from 'lib/flame/images/disclosure_triangle_right.svg';
 
 export default LabelView.extend({
     classNames: ['flame-disclosure-view'],
 
-    imageExpanded: image('disclosure_triangle_down.svg'),
-    imageCollapsed: image('disclosure_triangle_right.svg'),
+    imageExpanded: triangleDown,
+    imageCollapsed: triangleRight,
 
     image: function() {
         return this.get('visibilityTarget') ? this.get('imageExpanded') : this.get('imageCollapsed');