From 7392c32c8314013a8eabac039edb0e943d1caee3 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <gamedev@alamantus.com>
Date: Sat, 1 Apr 2017 14:56:34 -0600
Subject: [PATCH] Bulma styling changes

---
 .gitignore                            |  1 +
 src/components/Button.jsx             |  2 +-
 src/components/Checkbox.jsx           |  2 +-
 src/components/Dropdown.jsx           | 35 +++++++++-----
 src/components/EditDictionaryForm.jsx | 66 ++++++++++++++-------------
 src/components/FixedPage.jsx          | 10 ++--
 src/components/Input.jsx              |  8 ++--
 src/components/TextArea.jsx           | 28 ++++++++----
 src/components/WordForm.jsx           | 10 ++--
 src/index.html                        |  2 +-
 src/index.jsx                         | 18 ++++----
 webpack.config.js                     | 22 ++++-----
 12 files changed, 117 insertions(+), 87 deletions(-)

diff --git a/.gitignore b/.gitignore
index 25a478e..829df86 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 php/google/
 node_modules/
 public/
+.idea/
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 8284f4e..9c62e41 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -11,7 +11,7 @@ export class Button extends Component {
 
   // Always give the Button a 'clickable' class and then add any others.
   processClasses() {
-    var classes = 'button is-small';
+    var classes = 'button';
 
     if (this.props.classes) {
       classes += ' ' + this.props.classes;
diff --git a/src/components/Checkbox.jsx b/src/components/Checkbox.jsx
index 4fb14e4..5473e9e 100644
--- a/src/components/Checkbox.jsx
+++ b/src/components/Checkbox.jsx
@@ -21,7 +21,7 @@ export class Checkbox extends Input {
 
   render() {
     return (
-      <label>
+      <label className='checkbox'>
         <span>
           {this.props.name}
           {this.showHelperLink()}
diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
index f6ce890..71e6d67 100644
--- a/src/components/Dropdown.jsx
+++ b/src/components/Dropdown.jsx
@@ -40,20 +40,31 @@ export class Dropdown extends Input {
 
   render() {
     return (
-      <label className='control'>
-        <div className='level'>
-          <span className='label level-item'>
-            {this.props.name}
-          </span>
-          <span className='level-item'>
+      <div className='control'>
+
+        <div className='level is-marginless'>
+
+          <div className='level-item'>
+            <label className='label' for={this.generatedId}>
+              {this.props.name}
+            </label>
+          </div>
+
+          <div className='level-item'>
             {this.showHelperLink()}
-          </span>
+          </div>
+
         </div>
-        <select value={this.state.value} onChange={this.handleOnChange} disabled={(this.state.isDisabled) ? 'disabled' : null}>
-          <option value=" "></option>
-          {this.parseOptions(this.props.optionsList)}
-        </select>
-      </label>
+
+        <p className='control'>
+          <span className='select'>
+            <select value=' ' onChange={this.handleOnChange} disabled={(this.state.isDisabled) ? 'disabled' : null}>
+              <option value=' '></option>
+              {this.parseOptions(this.props.optionsList)}
+            </select>
+          </span>
+        </p>
+      </div>
     );
   }
 }
diff --git a/src/components/EditDictionaryForm.jsx b/src/components/EditDictionaryForm.jsx
index 36d28c6..73ab2c0 100644
--- a/src/components/EditDictionaryForm.jsx
+++ b/src/components/EditDictionaryForm.jsx
@@ -47,46 +47,50 @@ export class EditDictionaryForm extends Component {
         
         <h2>Edit Dictionary</h2>
 
-        <div className='settings-column'>
+        <div className='columns'>
 
-          <Input name='Dictionary Name'
-            value={this.props.details.name}
-            ref={(inputComponent) => this.nameField = inputComponent} />
+          <div className='column'>
 
-          <TextArea name='Dictionary Details'
-            value={this.props.details.description}
-            ref={(inputComponent) => this.descriptionField = inputComponent} />
+            <Input name='Dictionary Name'
+              value={this.props.details.name}
+              ref={(inputComponent) => this.nameField = inputComponent} />
 
-          <Input name='Parts of Speech'
-            value={this.props.settings.partsOfSpeech}
-            ref={(inputComponent) => this.partsOfSpeechField = inputComponent} />
+            <TextArea name='Dictionary Details'
+              value={this.props.details.description}
+              ref={(inputComponent) => this.descriptionField = inputComponent} />
 
-          <Input name='Classification'
-            value={this.props.details.listTypeName}
-            helperLink={{
-              action: () => alert('The word used to describe the list of words represented by this dictionary. By default, it is "Dictionary", but it could be "Lexicon" or some other classification.')
-            }}
-            ref={(inputComponent) => this.listTypeNameField = inputComponent} />
+            <Input name='Parts of Speech'
+              value={this.props.settings.partsOfSpeech}
+              ref={(inputComponent) => this.partsOfSpeechField = inputComponent} />
 
-          <Checkbox name='Allow Duplicates'
-            value={this.props.settings.allowDuplicates}
-            ref={(inputComponent) => this.allowDuplicatesField = inputComponent} />
+            <Input name='Classification'
+              value={this.props.details.listTypeName}
+              helperLink={{
+                action: () => alert('The word used to describe the list of words represented by this dictionary. By default, it is "Dictionary", but it could be "Lexicon" or some other classification.')
+              }}
+              ref={(inputComponent) => this.listTypeNameField = inputComponent} />
 
-          <Checkbox name='Case-Sensitive'
-            value={this.props.settings.caseSensitive}
-            ref={(inputComponent) => this.caseSensitiveField = inputComponent} />
+            <Checkbox name='Allow Duplicates'
+              value={this.props.settings.allowDuplicates}
+              ref={(inputComponent) => this.allowDuplicatesField = inputComponent} />
 
-          <Checkbox name='Sort by Definition'
-            value={this.props.settings.sortByEquivalent}
-            ref={(inputComponent) => this.sortByEquivalentField = inputComponent} />
+            <Checkbox name='Case-Sensitive'
+              value={this.props.settings.caseSensitive}
+              ref={(inputComponent) => this.caseSensitiveField = inputComponent} />
 
-          <Checkbox name='Dictionary Is Complete'
-            value={this.props.settings.isComplete}
-            ref={(inputComponent) => this.isCompleteField = inputComponent} />
+            <Checkbox name='Sort by Definition'
+              value={this.props.settings.sortByEquivalent}
+              ref={(inputComponent) => this.sortByEquivalentField = inputComponent} />
 
-          <Checkbox name='Dictionary Is Public'
-            value={this.props.settings.isPublic}
-            ref={(inputComponent) => this.isPublicField = inputComponent} />
+            <Checkbox name='Dictionary Is Complete'
+              value={this.props.settings.isComplete}
+              ref={(inputComponent) => this.isCompleteField = inputComponent} />
+
+            <Checkbox name='Dictionary Is Public'
+              value={this.props.settings.isPublic}
+              ref={(inputComponent) => this.isPublicField = inputComponent} />
+
+          </div>
 
         </div>
 
diff --git a/src/components/FixedPage.jsx b/src/components/FixedPage.jsx
index 8124e63..efcd12e 100644
--- a/src/components/FixedPage.jsx
+++ b/src/components/FixedPage.jsx
@@ -33,13 +33,15 @@ export class FixedPage extends Component {
           <div className='modal-background' onClick={this.hide}></div>
 
           <div className={contentClass}>
+            <div className='box'>
             
-            <Button classes='modal-close'
-              action={this.hide}
-              label='Close' />
+              <Button classes='modal-close'
+                action={this.hide}
+                label='Close' />
 
-            {this.props.children}
+              {this.props.children}
 
+            </div>
           </div>
 
         </div>
diff --git a/src/components/Input.jsx b/src/components/Input.jsx
index 6ab3266..401bdd8 100644
--- a/src/components/Input.jsx
+++ b/src/components/Input.jsx
@@ -23,7 +23,7 @@ export class Input extends Component {
     //   doValidate: props.doValidate || true
     // };
 
-    this.generatedId = 'input' + props.idManager.nextStr;
+    this.generatedId = 'input' + window.idManager.nextStr;
 
     this.state = {
       value: props.value || '',
@@ -53,13 +53,13 @@ export class Input extends Component {
     if (this.props.helperLink) {
       if (this.props.helperLink.url) {
         return (
-          <a className='button is-small inline-button' href={this.props.helperLink.url} target='_blank' title={this.props.helperLink.hover}>
+          <a className='button is-small' href={this.props.helperLink.url} target='_blank' title={this.props.helperLink.hover}>
             {this.props.helperLink.label}
           </a>
         );
       } else {
         return (
-            <Button classes='inline-button'
+            <Button classes='is-small'
               action={this.props.helperLink.action}
               label={this.props.helperLink.label || '?'} />
         );
@@ -79,7 +79,7 @@ export class Input extends Component {
 
   render() {
     return (
-      <div>
+      <div className='control'>
 
           <div className='level is-marginless'>
 
diff --git a/src/components/TextArea.jsx b/src/components/TextArea.jsx
index d5b4af8..cf905de 100644
--- a/src/components/TextArea.jsx
+++ b/src/components/TextArea.jsx
@@ -26,7 +26,7 @@ export class TextArea extends Input {
   render() {
     return (
       <div className='control'>
-        <div className='level'>
+        <div className='level is-marginless'>
           <div className='level-item'>
             <label className='label' for={this.generatedId}>
                 {this.props.name}
@@ -34,14 +34,26 @@ export class TextArea extends Input {
           </div>
 
           <div className='level-item'>
-              <FixedPage id={this.generatedId + '_textbox'} contentClass='no-scroll' buttonClasses='maximize-button' buttonText='Maximize'>
-                <label><span>{this.props.name}</span></label>
+            <FixedPage id={this.generatedId + '_textbox'}
+              contentClass='no-scroll'
+              buttonClasses='is-small'
+              buttonText='Maximize'>
+              <header className='header'>
+                <h3 className='title'>
+                  {this.props.name}
+                </h3>
+              </header>
 
-                <textarea id={this.generatedId} className='fullscreen-textbox'
-                  onChange={linkEvent(this, this.handleMaximizedTextboxClose)}
-                  onKeyDown={linkEvent(this, this.handleOnKeyDown)}
-                  ref={(textarea) => {this.maximizedTextarea = textarea}} />
-              </FixedPage>
+              <section className='section'>
+                <p className='control'>
+                  <textarea id={this.generatedId} className='textarea'
+                    onChange={linkEvent(this, this.handleMaximizedTextboxClose)}
+                    onKeyDown={linkEvent(this, this.handleOnKeyDown)}
+                    ref={(textarea) => {this.maximizedTextarea = textarea}} />
+                </p>
+              </section>
+
+            </FixedPage>
           </div>
 
         </div>
diff --git a/src/components/WordForm.jsx b/src/components/WordForm.jsx
index f83d987..e34ac18 100644
--- a/src/components/WordForm.jsx
+++ b/src/components/WordForm.jsx
@@ -97,12 +97,12 @@ export class WordForm extends Component {
 
     return (
       <div className='form'>
-        <Input name='Word' idManager={this.props.idManager}
+        <Input name='Word'
           value={nameDefaultValue}
           onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
           ref={(inputComponent) => this.wordField = inputComponent} />
 
-        <Input name='Pronunciation' idManager={this.props.idManager}
+        <Input name='Pronunciation'
           helperLink={{
             url: "http://r12a.github.io/pickers/ipa/",
             label: "IPA Characters",
@@ -112,17 +112,17 @@ export class WordForm extends Component {
           onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
           ref={(inputComponent) => this.pronunciationField = inputComponent} />
 
-        <Dropdown name='Part of Speech' idManager={this.props.idManager}
+        <Dropdown name='Part of Speech'
           optionsList={this.props.partsOfSpeech}
           value={partOfSpeechDefaultValue}
           ref={(inputComponent) => this.partOfSpeechField = inputComponent} />
 
-        <Input name={<div style={{display: 'inline'}}>Definition/<wbr /><b className="wbr"></b>Equivalent Word(s)</div>} idManager={this.props.idManager}
+        <Input name={<div style={{display: 'inline'}}>Definition/<wbr /><b className="wbr"></b>Equivalent Word(s)</div>}
           value={simpleDefinitionDefaultValue}
           onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
           ref={(inputComponent) => this.simpleDefinitionField = inputComponent} />
 
-        <TextArea id='newWordForm' idManager={this.props.idManager}
+        <TextArea id='newWordForm'
           name={<div style={{display: 'inline'}}>Explanation/<wbr /><b className="wbr"></b>Long Definition</div>}
           value={longDefinitionDefaultValue}
           onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
diff --git a/src/index.html b/src/index.html
index 3db1917..8e82246 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,6 +12,6 @@
 </head>
 <body>
 <div id="site"></div>
-<script src="dictionaryBuilder.js"></script>
+<script src="lexiconga.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/index.jsx b/src/index.jsx
index edb385e..e661eb4 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -23,11 +23,14 @@ import {IDManager} from './js/IDManager';
 
 // Declare the values of the default empty dictionary.
 const defaultDictionaryName = 'New'
-    , defaultListTypeName = 'Dictionary'
-    , defaultDictionaryDescription = 'A new dictionary.'
-    , defaultDictionaryCreatedBy = 'Someone'
-    , defaultDictionaryPartsOfSpeech = 'Noun,Adjective,Verb,Adverb,Preposition,Pronoun,Conjunction'
-    ;
+, defaultListTypeName = 'Dictionary'
+, defaultDictionaryDescription = 'A new dictionary.'
+, defaultDictionaryCreatedBy = 'Someone'
+, defaultDictionaryPartsOfSpeech = 'Noun,Adjective,Verb,Adverb,Preposition,Pronoun,Conjunction'
+;
+
+// Create global IDManager.
+window.idManager = window.idManager || new IDManager();
 
 // Create the Lexiconga component just for rendering the whole site.
 // class Lexiconga extends React.Component {
@@ -38,8 +41,6 @@ class Lexiconga extends Component {
     // This could probably be a global constant instead.
     this.showConsoleMessages = this.props.showConsoleMessages || false;
 
-    this.idManager = new IDManager();
-
     // Put the dictionary details, settings, and words into the state so modifications will affect display.
     this.state = {
       scroll: {
@@ -117,7 +118,7 @@ class Lexiconga extends Component {
     , simpleDefinition: wordObject.simpleDefinition || ''
     , longDefinition: wordObject.longDefinition || ''
     , wordId: this.state.details.nextWordId
-    }
+    };
 
     let updatedWords = this.state.words.concat([newWord]);
     updatedWords = this.sortWords(updatedWords);
@@ -260,7 +261,6 @@ class Lexiconga extends Component {
               <div className='box'>
 
                 <WordForm
-                  idManager={this.idManager}
                   partsOfSpeech={this.state.settings.partsOfSpeech}
                   addWord={(wordObject) => this.addWord(wordObject)}
                   submitLabel='Add Word' />
diff --git a/webpack.config.js b/webpack.config.js
index 326765d..11cef9f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,7 +8,7 @@ const APP_DIR = path.resolve(__dirname, 'src');
     entry: APP_DIR + '/index.jsx',
     output: {
       path: BUILD_DIR,
-      filename: 'dictionaryBuilder.js'
+      filename: 'lexiconga.js'
     },
     module: {
       loaders: [
@@ -40,18 +40,18 @@ const APP_DIR = path.resolve(__dirname, 'src');
     resolve: {
       extensions: ['', '.js', '.jsx'],
     },
-    // plugins: [
+    /*plugins: [
     // When you're ready to publish, check this article out.
     // http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/
-    //   new webpack.optimize.UglifyJsPlugin({
-    //     compress: {
-    //       warnings: false
-    //     },
-    //     output: {
-    //       comments: false
-    //     }
-    //   })
-    // ],
+      new webpack.optimize.UglifyJsPlugin({
+        compress: {
+          warnings: false
+        },
+        output: {
+          comments: false
+        }
+      })
+    ],*/
     sassLoader: {
       file: './src/sass/styles.scss',
       // includePaths: ['./node_modules/bootstrap-sass/assets/'],