Add "simple view" mode (#502)

* Add "simple view" mode support

It just hide elements from view when SIMPLE_VIEW recived from server

* Fix typing and add ts check before push

* proper input styling

* Changes for frontend dev compose

* remove SIMPLE_VIEW from default settings for forntend dev
* add private compose to gitignore

* Added simpleView mode for replay and edit modes.

* `simpleView` changed to required param

* FIx border-width in reply form

* Fix border-width in editing mode

frontend/app/common/static_store.ts

@@ -26,6 +26,7 @@ export const StaticStore: StaticStoreType = {
     positive_score: false,
     readonly_age: 0,
     max_image_size: 0,
+    simple_view: false,
   },
   query: querySettings as QuerySettingsType,
 };

frontend/app/common/types.ts

@@ -111,6 +111,7 @@ export interface Config {
   positive_score: boolean;
   readonly_age: number;
   max_image_size: number;
+  simple_view: boolean;
 }
 
 export interface RemarkConfig {

frontend/app/components/comment/_editing/comment_editing.scss

@@ -3,11 +3,6 @@
     display: none;
   }
 
-  .comment__input {
-    border: 12px solid;
-    border-top-width: 6px;
-  }
-
   .comment__score {
     top: 4px;
     right: 0;

frontend/app/components/comment/_replying/comment_replying.scss

@@ -1,9 +1,4 @@
 .comment_replying {
-  .comment__input {
-    border: 12px solid;
-    border-top-width: 6px;
-  }
-
   .comment__score {
     top: 4px;
     right: 0;

frontend/app/components/comment/comment.tsx

@@ -734,6 +734,7 @@ export class Comment extends Component<Props, State> {
             getPreview={this.props.getPreview!}
             autofocus={true}
             uploadImage={uploadImageHandler}
+            simpleView={StaticStore.config.simple_view}
           />
         )}
 
@@ -749,6 +750,7 @@ export class Comment extends Component<Props, State> {
             errorMessage={state.editDeadline === null ? 'Editing time has expired.' : undefined}
             autofocus={true}
             uploadImage={uploadImageHandler}
+            simpleView={StaticStore.config.simple_view}
           />
         )}
       </article>

frontend/app/components/input/_simple/input_simple.scss

@@ -0,0 +1,3 @@
+.input_simple {
+  border-width: 12px;
+}

frontend/app/components/input/input.test.tsx

@@ -0,0 +1,15 @@
+/** @jsx createElement */
+import { createElement } from 'preact';
+import { shallow } from 'enzyme';
+
+import { Input, Props } from './input';
+
+describe('<Input />', () => {
+  it('shoud render without control panel, preview button, and rss links in "simple view" mode', () => {
+    const element = shallow(<Input {...({ simpleView: true } as Props)} />);
+
+    expect(element.exists('.input__control-panel')).toEqual(false);
+    expect(element.exists('.input__button_type_preview')).toEqual(false);
+    expect(element.exists('.input__rss')).toEqual(false);
+  });
+});

frontend/app/components/input/input.tsx

@@ -24,7 +24,7 @@ const RSS_REPLIES_URL = `${BASE_URL}${API_BASE}/rss/reply?site=${siteId}&user=`;
 
 let textareaId = 0;
 
-interface Props {
+export interface Props {
   /** user id for rss link generation */
   userId?: User['id'];
   errorMessage?: string;
@@ -32,6 +32,7 @@ interface Props {
   mix?: Mix;
   mode?: 'main' | 'edit' | 'reply';
   theme: Theme;
+  simpleView: boolean | undefined;
   autofocus?: boolean;
 
   onSubmit(text: string, pageTitle: string): Promise<void>;
@@ -353,6 +354,7 @@ export class Input extends Component<Props, State> {
           mods: {
             theme: props.theme || 'light',
             type: props.mode || 'reply',
+            simple: props.simpleView,
           },
           mix: props.mix,
         })}
@@ -361,13 +363,15 @@ export class Input extends Component<Props, State> {
         onDragOver={this.onDragOver}
         onDrop={this.onDrop}
       >
-        <div className="input__control-panel">
-          <MarkdownToolbar
-            allowUpload={Boolean(this.props.uploadImage)}
-            uploadImages={this.uploadImages}
-            textareaId={this.textareaId}
-          />
-        </div>
+        {!props.simpleView && (
+          <div className="input__control-panel">
+            <MarkdownToolbar
+              allowUpload={Boolean(this.props.uploadImage)}
+              uploadImages={this.uploadImages}
+              textareaId={this.textareaId}
+            />
+          </div>
+        )}
         <div className="input__field-wrapper">
           <TextareaAutosize
             id={this.textareaId}
@@ -395,20 +399,22 @@ export class Input extends Component<Props, State> {
           ))}
 
         <div className="input__actions">
-          <button
-            className={b('input__button', {}, { type: 'preview' })}
-            type="button"
-            disabled={isDisabled}
-            onClick={this.getPreview}
-          >
-            Preview
-          </button>
+          {!props.simpleView && (
+            <button
+              className={b('input__button', {}, { type: 'preview' })}
+              type="button"
+              disabled={isDisabled}
+              onClick={this.getPreview}
+            >
+              Preview
+            </button>
+          )}
 
           <button className={b('input__button', {}, { type: 'send' })} type="submit" disabled={isDisabled}>
             {label}
           </button>
 
-          {props.mode === 'main' && (
+          {!props.simpleView && props.mode === 'main' && (
             <div className="input__rss">
               <div className="input__markdown">
                 Styling with{' '}

frontend/app/components/input/styles.ts

@@ -1,6 +1,7 @@
 import '@app/components/raw-content';
 
 import './input.scss';
+import './_simple/input_simple.scss';
 
 import './__actions/input__actions.scss';
 

frontend/app/components/root/root.tsx

@@ -249,6 +249,7 @@ export class Root extends Component<Props, State> {
                   onSubmit={(text, title) => this.props.addComment(text, title)}
                   getPreview={this.props.getPreview}
                   uploadImage={imageUploadHandler}
+                  simpleView={StaticStore.config.simple_view}
                 />
               )}
 

frontend/app/testUtils/index.ts

@@ -21,5 +21,6 @@ beforeEach(() => {
     positive_score: false,
     readonly_age: 100,
     version: 'jest-test',
+    simple_view: false,
   };
 });

frontend/package.json

@@ -14,7 +14,7 @@
     "hooks": {
       "pre-commit": "./node_modules/.bin/lint-staged",
       "post-commit": "git update-index --again",
-      "pre-push": "npm test"
+      "pre-push": "npm run check && npm test"
     }
   },
   "lint-staged": {