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 (
-
-
this.props.updateItem({ question: { text: val } })}
- bankId={this.props.bankId}
- id={this.props.id}
- />
-
-
+
this.props.updateItem({ question: { text: val } })}
+ bankId={this.props.bankId}
+ id={this.props.id}
+ />
);
}
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 (
-
-
this.onBlur(editorText)}
- onFocus={() => this.setState({ focused: true })}
- />
+
+
+ this.onBlur(editorText)}
+ onFocus={() => this.setState({ focused: true })}
+ />
+
+
);
}
diff --git a/client/js/_author/components/common/tiny_wrapper.jsx b/client/js/_author/components/common/tiny_wrapper.jsx
index f018efad4..5313aa8fa 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,
};
@@ -100,8 +102,7 @@ export class TinyWrapper extends React.Component {
onFocus={this.props.onFocus}
/>
(this.imageFilePicker = ref)}
onChange={e => this.uploadImage(e)}
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..beda9ad0e 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));
+ }
}
}
@@ -238,6 +339,14 @@
}
}
+input.c-file{
+ opacity: 0;
+ margin: 0;
+ height: 0.01rem;
+ width: 0.01rem;
+ position: absolute;
+}
+
.c-answer{
.c-checkbox, .c-radio{