Merge pull request #282 from jekyll/abstraction

Frontend Improvements

Author: mertkahyaoglu

docs/_frontend/components.md

@@ -27,19 +27,51 @@ Can have [all options of SimpleMDE](https://github.com/NextStepWebs/simplemde-ma
 ## Breadcrumbs
 
 Component for generating breadcrumbs. First breadcrumb indicates the current content
-type and the second one which is editable is the path of current item.
+type and the second one which can be either an input or a label is the path of the current item.
 
 ### PropTypes
 
 ```javascript
 {
   link: String, // Link to the corresponding content type
   type: String, // Content type (pages, collections..)
-  path: String, // File path
+  content: String, // File path
+  editable: Boolean, // can be editable or not
   onChange: Function // triggered when the path changes
 }
 ```
 
+## Errors
+
+Component for listing the validation errors
+
+### PropTypes
+
+```javascript
+{
+  errors: Array // Array of error messages
+}
+```
+
+## Button
+
+Generic component for button element.
+
+### PropTypes
+
+```javascript
+{
+  type: String, // type of the button ('save', 'create', 'view', 'upload' etc.)
+  active: Boolean, // state of the button
+  onClick: Function, // callback function triggered when the button is clicked
+  triggered: PropTypes.bool, // click state
+  block: PropTypes.bool, // should the button fill the parent width
+  thin: PropTypes.bool, // should the button be small
+  icon: PropTypes.string, // displays icon if icon name is given
+  to: PropTypes.string // links to the given URL. If set, onClick is disabled
+}
+```
+
 ## FilePreview
 
 Component for previewing the uploaded file. It renders an image or a div according to

docs/_frontend/constants.md

@@ -6,18 +6,11 @@ title: Constants
 
 Stores all of the action creators' names
 
-## Messages
+## Lang
 
-Stores the following messages;
+Stores the language specific files. Selected language strings are exported from `index.js`.
 
-* `confirm delete message`
-* `confirm leave message`
-* `confirm override static file message`
-* `not found message`
-* `notification messages`
-* `validation messages`
-
-This allows us to control all of the messages in a single place and also will help us localize the admin panel in the future.
+This allows us to control all of the language specific strings in a single place and also will help us localize the admin panel in the future.
 
 ## API
 

package.json

@@ -25,6 +25,7 @@
   "license": "MIT",
   "dependencies": {
     "brace": "0.9.1",
+    "classnames": "^2.2.5",
     "isomorphic-fetch": "^2.2.1",
     "js-yaml": "^3.6.1",
     "lodash": "^4.13.1",

src/actions/collections.js

@@ -9,7 +9,7 @@ import {
   getTitleRequiredMessage,
   getFilenameRequiredMessage,
   getFilenameNotValidMessage
-} from '../constants/messages';
+} from '../constants/lang';
 import {
   getCollectionsUrl,
   getCollectionUrl,

src/actions/config.js

@@ -1,6 +1,6 @@
 import * as ActionTypes from '../constants/actionTypes';
 import { getConfigurationUrl, putConfigurationUrl } from '../constants/api';
-import { getParserErrorMessage } from '../constants/messages';
+import { getParserErrorMessage } from '../constants/lang';
 import { addNotification } from './notifications';
 import { get, put } from '../utils/fetch';
 import { toJSON } from '../utils/helpers';

src/actions/datafiles.js

@@ -7,7 +7,7 @@ import {
   getParserErrorMessage,
   getContentRequiredMessage,
   getFilenameRequiredMessage
-} from '../constants/messages';
+} from '../constants/lang';
 import {
   getDataFilesUrl,
   getDataFileUrl,

src/actions/pages.js

@@ -8,7 +8,7 @@ import {
   getTitleRequiredMessage,
   getFilenameRequiredMessage,
   getFilenameNotValidMessage
-} from '../constants/messages';
+} from '../constants/lang';
 import {
   getPagesUrl,
   getPageUrl,

src/actions/staticfiles.js

@@ -7,7 +7,7 @@ import {
   getErrorMessage,
   getUploadSuccessMessage,
   getUploadErrorMessage
-} from '../constants/messages';
+} from '../constants/lang';
 import {
   getStaticFilesUrl,
   getStaticFileUrl,

src/components/Breadcrumbs.js

@@ -12,23 +12,30 @@ export default class Breadcrumbs extends Component {
   }
 
   render() {
-    const { link, type, path } = this.props;
-    let placeholder = 'example.md';
+    const { link, type, content, editable } = this.props;
 
-    if (type == 'posts') {
-      const date = moment().format('YYYY-MM-DD');
-      placeholder = `${date}-your-title.md`;
-    }else if (type == 'data files') {
-      placeholder = 'your-filename.yml';
+    let node = null;
+    if (editable) {
+      let placeholder = 'example.md';
+      if (type == 'posts') {
+        const date = moment().format('YYYY-MM-DD');
+        placeholder = `${date}-your-title.md`;
+      }else if (type == 'datafiles') {
+        placeholder = 'your-filename.yml';
+      }
+      node = (<input onChange={(e) => this.handleChange(e)}
+        placeholder={placeholder}
+        defaultValue={content}
+        ref="input" />);
+    } else {
+      node = content;
     }
+
     return (
       <ul className="breadcrumbs">
         <li><Link to={link}>{toTitleCase(type)}</Link></li>
         <li className="filename">
-          <input onChange={(e) => this.handleChange(e)}
-            ref="input"
-            placeholder={placeholder}
-            defaultValue={path} />
+          {node}
         </li>
       </ul>
     );
@@ -38,6 +45,7 @@ export default class Breadcrumbs extends Component {
 Breadcrumbs.propTypes = {
   link: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
-  path: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
+  content: PropTypes.string.isRequired,
+  editable: PropTypes.bool,
+  onChange: PropTypes.func
 };

src/components/Button.js

@@ -0,0 +1,69 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { labels } from '../constants/lang';
+
+export default class Button extends Component {
+
+  render() {
+    const { type, active, triggered, onClick, block, thin, icon, to } = this.props;
+
+    const btnClass = classnames({
+      'btn': true,
+      'btn-active': active,
+      'btn-success': active && (type == 'save' || type == 'create'),
+      'btn-delete': type == 'delete',
+      'btn-view': type == 'view',
+      'btn-inactive': !active,
+      'btn-fat': block,
+      'btn-thin': thin
+    });
+
+    let label = '';
+    let triggeredLabel = '';
+    switch (type) {
+      case 'save':
+        label = labels.save.label;
+        triggeredLabel = labels.save.triggeredLabel;
+        break;
+      case 'create':
+        label = labels.create.label;
+        triggeredLabel = labels.create.triggeredLabel;
+        break;
+      case 'delete':
+        label = labels.delete.label;
+        break;
+      case 'view':
+        label = labels.view.label;
+        break;
+      case 'upload':
+        label = labels.upload.label;
+        break;
+      default:
+    }
+
+    const iconNode = icon ? <i className={`fa fa-${icon}`} aria-hidden="true"></i> : null;
+    const clickEvent = !to ? onClick : null;
+
+    return (
+      <a href={to}
+        target="_blank"
+        onClick={clickEvent}
+        className={btnClass}>
+          {iconNode}
+          {triggered ? triggeredLabel : label}
+      </a>
+    );
+  }
+
+}
+
+Button.propTypes = {
+  type: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired,
+  onClick: PropTypes.func,
+  triggered: PropTypes.bool,
+  block: PropTypes.bool,
+  thin: PropTypes.bool,
+  icon: PropTypes.string,
+  to: PropTypes.string
+};