From 2fd07f9052049012cba35c0a0346a52934a92aa3 Mon Sep 17 00:00:00 2001 From: Cesar Del Solar Date: Sun, 20 Nov 2016 13:11:10 -0800 Subject: [PATCH 1/6] Simplify styling logic - add business logic class. Use Immutable. --- .../static/js/wordwalls/reactapp/app.jsx | 34 +---- .../js/wordwalls/reactapp/forms/select.jsx | 4 +- .../wordwalls/reactapp/forms/text_input.jsx | 2 +- .../js/wordwalls/reactapp/gameboard.jsx | 27 ++-- .../static/js/wordwalls/reactapp/style.js | 142 ++++++++++++++++++ .../wordwalls/reactapp/topbar/preferences.jsx | 6 +- .../wordwalls/reactapp/topbar/prefs_modal.jsx | 81 ++++------ .../reactapp/topbar/prefs_modal_body.jsx | 53 ++++--- .../js/wordwalls/reactapp/wordwalls_app.jsx | 17 +-- 9 files changed, 228 insertions(+), 138 deletions(-) create mode 100644 djAerolith/wordwalls/static/js/wordwalls/reactapp/style.js diff --git a/djAerolith/wordwalls/static/js/wordwalls/reactapp/app.jsx b/djAerolith/wordwalls/static/js/wordwalls/reactapp/app.jsx index 3c42b0a8..971261b2 100644 --- a/djAerolith/wordwalls/static/js/wordwalls/reactapp/app.jsx +++ b/djAerolith/wordwalls/static/js/wordwalls/reactapp/app.jsx @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import Styling from './style'; import WordwallsApp from './wordwalls_app'; class App { @@ -10,41 +11,10 @@ class App { */ static initialize(options) { // WordwallsApp will be the holder of state. - let style; let listName; let autoSave; - if (options.addlParams.style != null) { - style = JSON.parse(options.addlParams.style); - // Add default options that may not have been there. - if (style.tc.showChips !== false) { - style.tc.showChips = true; - } - if (!style.tc.selection) { - style.tc.selection = '1'; - } - if (!style.tc.customOrder) { - style.tc.customOrder = ''; - } - style.bc.hideLexiconSymbols = style.bc.hideLexiconSymbols || false; - } else { - // Default style. - style = { - tc: { - on: true, - selection: '1', - customOrder: '', - blankCharacter: '?', - font: 'mono', - showChips: true, - bold: false, - }, - bc: { - showBorders: false, - hideLexiconSymbols: false, - }, - }; - } + const style = new Styling(options.addlParams.style); // Get the list name from one of two places. if (options.addlParams.saveName) { listName = options.addlParams.saveName; diff --git a/djAerolith/wordwalls/static/js/wordwalls/reactapp/forms/select.jsx b/djAerolith/wordwalls/static/js/wordwalls/reactapp/forms/select.jsx index 874595b6..582b9a18 100644 --- a/djAerolith/wordwalls/static/js/wordwalls/reactapp/forms/select.jsx +++ b/djAerolith/wordwalls/static/js/wordwalls/reactapp/forms/select.jsx @@ -3,7 +3,7 @@ import React from 'react'; const Select = (props) => { - const inputColSizeClass = `col-lg-${props.colSize}`; + const inputColSizeClass = `col-md-${props.colSize}`; const options = []; props.options.forEach((element, idx) => options.push(