Launcher: allow score effect on 'none' shape. Fixes romannurik#35

yxlolxy · Jan 19, 2017 · 58503e5 · 58503e5
1 parent ce88e24
commit 58503e5
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 72 deletions.
diff --git a/app/scripts/pages/launchericons.js b/app/scripts/pages/launchericons.js
@@ -41,6 +41,20 @@ const GRID_OVERLAY_SVG =
     </svg>`;
 
 
+const DEFAULT_EFFECT_OPTIONS = [
+  { id: 'none', title: 'None' },
+  { id: 'elevate', title: 'Elevate' },
+  { id: 'shadow', title: 'Cast shadow' },
+  { id: 'score', title: 'Score' }
+];
+
+
+const NO_SHAPE_EFFECT_OPTIONS = [
+  { id: 'none', title: 'None' },
+  { id: 'score', title: 'Score' }
+];
+
+
 export class LauncherIconGenerator extends BaseGenerator {
   get densities() {
     return new Set(['xxxhdpi' /* must be first */, 'web', 'xxhdpi', 'xhdpi', 'hdpi', 'mdpi']);
@@ -90,27 +104,27 @@ export class LauncherIconGenerator extends BaseGenerator {
             { id: 'vrect', title: 'Tall rect' },
             { id: 'hrect', title: 'Wide rect' }
           ],
-          defaultValue: 'square'
+          defaultValue: 'square',
+          onChange: newValue => {
+            backColorField.setEnabled(newValue != 'none');
+            let newEffectsOptions = newValue == 'none'
+                ? NO_SHAPE_EFFECT_OPTIONS
+                : DEFAULT_EFFECT_OPTIONS;
+            if (!newEffectsOptions.find(e => e.id == effectsField.getValue())) {
+              effectsField.setValue(newEffectsOptions[0].id);
+            }
+            effectsField.setOptions(newEffectsOptions);
+          }
         }),
         (effectsField = new studio.EnumField('effects', {
           title: 'Effect',
           buttons: true,
-          options: [
-            { id: 'none', title: 'None' },
-            { id: 'elevate', title: 'Elevate' },
-            { id: 'shadow', title: 'Cast shadow' },
-            { id: 'score', title: 'Score' },
-            // { id: 'dogear', title: 'Folded' }
-          ],
+          options: DEFAULT_EFFECT_OPTIONS,
           defaultValue: 'none'
         }))
       ]
     });
-    this.form.onChange(field => {
-      backColorField.setEnabled(this.form.getValues().backgroundShape != 'none');
-      effectsField.setEnabled(this.form.getValues().backgroundShape != 'none');
-      this.regenerateDebounced_();
-    });
+    this.form.onChange(field => this.regenerateDebounced_());
   }
 
   regenerate() {
@@ -218,7 +232,8 @@ export class LauncherIconGenerator extends BaseGenerator {
         drawFn_(ctx, foreSrcCtx, studio.Util.mult(targetRect, mult),
             {x: 0, y: 0, w: foreSrcCtx.canvas.width, h: foreSrcCtx.canvas.height});
       },
-      effects: []
+      effects: [],
+      mask: !!(values.backgroundShape == 'none')
     };
 
     if (values.backgroundShape != 'none' &&values.effects == 'shadow') {
@@ -260,7 +275,7 @@ export class LauncherIconGenerator extends BaseGenerator {
       children: [
         values.backgroundShape != 'none' ? backgroundLayer : null,
         foregroundLayer,
-        (values.backgroundShape != 'none' && values.effects == 'score') ? scoreLayer : null,
+        values.effects == 'score' ? scoreLayer : null,
       ],
       effects: [
         {

diff --git a/app/scripts/studio/fields.js b/app/scripts/studio/fields.js
@@ -166,60 +166,6 @@ export class TextField extends Field {
 }
 
 
-export class AutocompleteTextField extends Field {
-  createUi(container) {
-    var fieldContainer = $('.form-field-container', super.createUi(container));
-
-    var datalistId = this.getHtmlId() + '-datalist';
-
-    this.el_ = $('<input>')
-        .attr('type', 'text')
-        .attr('placeholder', this.params_.placeholder)
-        .addClass('form-field-text')
-        .attr('list', datalistId)
-        .val(this.getValue())
-        .on('input', ev => this.setValue($(ev.currentTarget).val(), true))
-        .appendTo(fieldContainer);
-
-    this.datalistEl_ = $('<datalist>')
-        .attr('id', datalistId)
-        .appendTo(fieldContainer);
-
-    this.setOptions(this.params_.options);
-  }
-
-  setOptions(options = []) {
-    this.datalistEl_.empty();
-    options.forEach(option => this.datalistEl_.append($('<option>').attr('value', option)));
-  }
-
-  getValue() {
-    var value = this.value_;
-    if (typeof value != 'string') {
-      value = this.params_.defaultValue || '';
-    }
-    return value;
-  }
-
-  setValue(val, pauseUi) {
-    let oldValue = this.value_;
-    this.value_ = val;
-    if (!pauseUi) {
-      this.el_.val(val);
-    }
-    this.notifyChanged_(val, oldValue);
-  }
-
-  serializeValue() {
-    return this.getValue();
-  }
-
-  deserializeValue(s) {
-    this.setValue(s);
-  }
-}
-
-
 export class ColorField extends Field {
   createUi(container) {
     var fieldContainer = $('.form-field-container', super.createUi(container));
@@ -308,6 +254,10 @@ export class EnumField extends Field {
   }
 
   setOptions(options) {
+    if (!this.el_) {
+      return;
+    }
+
     options = (options || []).map(option =>
         (typeof option == 'string')
             ? {id: option, title: String(option)}

diff --git a/app/scripts/studio/imagefield.js b/app/scripts/studio/imagefield.js
@@ -16,7 +16,7 @@
 
 import {default as WebFont} from 'webfontloader';
 
-import {Field, TextField, RangeField, BooleanField, AutocompleteTextField, EnumField} from './fields';
+import {Field, TextField, RangeField, BooleanField, EnumField} from './fields';
 import {Form} from './forms';
 import {Util} from './util';
 import {imagelib} from '../imagelib';

diff --git a/app/scripts/studio/index.js b/app/scripts/studio/index.js
@@ -15,15 +15,14 @@
  */
 
 import {Form} from './forms';
-import {Field, TextField, AutocompleteTextField, ColorField, EnumField,
+import {Field, TextField, ColorField, EnumField,
         BooleanField, RangeField} from './fields';
 import {ImageField} from './imagefield';
 import {Hash} from './hash';
 import {Util} from './util';
 import {Zip} from './zip';
 
 export const studio = {
-  AutocompleteTextField,
   BooleanField,
   ColorField,
   EnumField,