From 2c6fd00834b7f82bed39277a54c475a74eb97972 Mon Sep 17 00:00:00 2001
From: ThinkBrandonThink <brandonfindlay90@gmail.com>
Date: Tue, 28 Feb 2017 17:30:57 -0800
Subject: [PATCH 1/2] Made styling changes and probably code that will be
 changed

---
 .../question_types/question_common/text.jsx   |  15 +--
 .../_author/components/common/oea_editor.jsx  |  15 ++-
 .../components/common/tiny_wrapper.jsx        |   6 +-
 client/styles/_author/modules/_mixins.scss    |   1 +
 client/styles/_author/partials/_inputs.scss   | 105 +++++++++++++++++-
 5 files changed, 123 insertions(+), 19 deletions(-)

diff --git a/client/js/_author/components/assessments/question_types/question_common/text.jsx b/client/js/_author/components/assessments/question_types/question_common/text.jsx
index e7bcc1f05..65864ae68 100644
--- a/client/js/_author/components/assessments/question_types/question_common/text.jsx
+++ b/client/js/_author/components/assessments/question_types/question_common/text.jsx
@@ -6,15 +6,12 @@ export default class questionText extends React.Component {
     return (
       <div className="c-input c-question-text">
         <label htmlFor={`question_text_${this.props.id}`} />
-        <div className="c-input__contain">
-          <Editor
-            text={this.props.text}
-            onBlur={val => this.props.updateItem({ question: { text: val } })}
-            bankId={this.props.bankId}
-            id={this.props.id}
-          />
-          <div className="c-input__bottom" />
-        </div>
+        <Editor
+          text={this.props.text}
+          onBlur={val => this.props.updateItem({ question: { text: val } })}
+          bankId={this.props.bankId}
+          id={this.props.id}
+        />
       </div>
     );
   }
diff --git a/client/js/_author/components/common/oea_editor.jsx b/client/js/_author/components/common/oea_editor.jsx
index 458346a66..e9251932d 100644
--- a/client/js/_author/components/common/oea_editor.jsx
+++ b/client/js/_author/components/common/oea_editor.jsx
@@ -31,12 +31,15 @@ export default class OeaEditor extends React.Component {
     const active = this.state.focused ? 'is-focused' : '';
 
     return (
-      <div className={`c-text-input c-text-input--medium c-wysiwyg ${active}`}>
-        <TinyWrapper
-          {...this.props}
-          onBlur={editorText => this.onBlur(editorText)}
-          onFocus={() => this.setState({ focused: true })}
-        />
+      <div className="c-input__contain">
+        <div className={`c-text-input c-text-input--medium c-wysiwyg ${active}`}>
+          <TinyWrapper
+            {...this.props}
+            onBlur={editorText => this.onBlur(editorText)}
+            onFocus={() => this.setState({ focused: true })}
+          />
+        </div>
+        <div className={`c-input__bottom ${active}`} />
       </div>
     );
   }
diff --git a/client/js/_author/components/common/tiny_wrapper.jsx b/client/js/_author/components/common/tiny_wrapper.jsx
index f018efad4..e9912142c 100644
--- a/client/js/_author/components/common/tiny_wrapper.jsx
+++ b/client/js/_author/components/common/tiny_wrapper.jsx
@@ -6,7 +6,9 @@ import 'tinymce/themes/modern/theme';
 import 'tinymce/plugins/autolink/plugin';
 import 'tinymce/plugins/paste/plugin';
 import 'tinymce/plugins/link/plugin';
+import 'tinymce/plugins/code/plugin';
 import 'tinymce/plugins/image/plugin';
+import 'tinymce/plugins/charmap/plugin';
 import 'tinymce/plugins/lists/plugin';
 import guid from '../../../utils/guid';
 
@@ -82,8 +84,8 @@ export class TinyWrapper extends React.Component {
           this.imageFilePicker.click();
         }
       },
-      plugins: 'autolink link image lists paste',
-      toolbar: 'undo redo | bold italic | alignleft aligncenter alignright image paste',
+      plugins: 'autolink link image lists paste code charmap',
+      toolbar: 'bold italic removeformat | bullist numlist  blockquote | code charmap subscript superscript | image',
       inline: true,
       paste_data_images: true,
     };
diff --git a/client/styles/_author/modules/_mixins.scss b/client/styles/_author/modules/_mixins.scss
index 207834240..781d1908e 100644
--- a/client/styles/_author/modules/_mixins.scss
+++ b/client/styles/_author/modules/_mixins.scss
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i');
 
 $border: 0.1rem solid $gray3;
 
diff --git a/client/styles/_author/partials/_inputs.scss b/client/styles/_author/partials/_inputs.scss
index d8ae5923c..6a2bc5e3a 100644
--- a/client/styles/_author/partials/_inputs.scss
+++ b/client/styles/_author/partials/_inputs.scss
@@ -40,6 +40,10 @@
   &.has-error{
     border-color: $red;
   }
+  &.is-focused{
+    border-color: $blue;
+    background: $blue;
+  }
 }
 
 .c-text-input--large{
@@ -65,8 +69,105 @@
 }
 
 .c-wysiwyg{
-  &:focus{
-    border-top: $border;
+  &.is-focused{
+
+    .mce-content-body{
+      border-top: $border;
+      outline: none;
+    }
+
+  }
+
+  .mce-content-body{
+    padding: 0.5rem 0;
+  }
+
+  .mce-panel{
+    background: none;
+    width: 100% !important;
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+    border-top-color: $gray3;
+  }
+
+  .mce-btn{
+    background: none;
+    border-radius: $radius;
+    border: 0.1rem solid transparent;
+    &:hover{
+      background: $gray3;
+      border: $border;
+      .mce-ico{
+        color: $text-color;
+      }
+    }
+    &.mce-active{
+      background: $gray2;
+      border: $border;
+      .mce-ico{
+        color: $text-color;
+      }
+      &:hover{
+        background: $gray3;
+        border: $border;
+      }
+    }
+  }
+
+  .mce-flow-layout-item{
+    margin: 0;
+  }
+
+  .mce-ico{
+    color: $gray9;
+  }
+
+  p{
+    margin: 0;
+  }
+  strong{
+    @include bold;
+  }
+  sub{
+    vertical-align: sub !important;
+  }
+  sup{
+    vertical-align: super !important;
+  }
+}
+
+.mce-floatpanel{
+
+  .mce-window-head{
+    height: 5rem;
+    padding: 0 1rem 0 2rem;
+    @include display-flex;
+    @include align-items(center);
+    .mce-close{
+      position: relative;
+      margin-left: auto;
+    }
+  }
+  .mce-btn button{
+    border: none;
+    background: none;
+    text-transform: uppercase;
+    cursor: pointer;
+    border-radius: $radius;
+    @include display-flex;
+    @include align-items(center);
+    height: 3rem;
+    padding: 0 2rem;
+
+    span{
+      @include bold;
+      font-size: 1.2rem;
+    }
+
+    &:active{
+      @include transform(scale(0.98));
+    }
   }
 }
 

From e7d5aa0a410972077fcd46821e0a890c5fb1712a Mon Sep 17 00:00:00 2001
From: ThinkBrandonThink <brandonfindlay90@gmail.com>
Date: Tue, 28 Feb 2017 17:35:30 -0800
Subject: [PATCH 2/2] Fixed David's crappy inline styles

---
 client/js/_author/components/common/tiny_wrapper.jsx | 3 +--
 client/styles/_author/partials/_inputs.scss          | 8 ++++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/js/_author/components/common/tiny_wrapper.jsx b/client/js/_author/components/common/tiny_wrapper.jsx
index e9912142c..5313aa8fa 100644
--- a/client/js/_author/components/common/tiny_wrapper.jsx
+++ b/client/js/_author/components/common/tiny_wrapper.jsx
@@ -102,8 +102,7 @@ export class TinyWrapper extends React.Component {
           onFocus={this.props.onFocus}
         />
         <input
-          style={{width: '0.1px', height: '0.1px', display: 'none'}}
-          className="c-image-uploader"
+          className="c-image-uploader c-file"
           type="file"
           ref={ref => (this.imageFilePicker = ref)}
           onChange={e => this.uploadImage(e)}
diff --git a/client/styles/_author/partials/_inputs.scss b/client/styles/_author/partials/_inputs.scss
index 6a2bc5e3a..beda9ad0e 100644
--- a/client/styles/_author/partials/_inputs.scss
+++ b/client/styles/_author/partials/_inputs.scss
@@ -339,6 +339,14 @@
   }
 }
 
+input.c-file{
+  opacity: 0;
+  margin: 0;
+  height: 0.01rem;
+  width: 0.01rem;
+  position: absolute;
+}
+
 .c-answer{
 
   .c-checkbox, .c-radio{