WIP - Global UI (decaporg#785)

* update top bar and collections sidebar UI

* update collection entries UI

* improve global layout

* merge search page into collection page

* enable new entry button

* search fixup

* wip -initial editor update

* update editor scrolling and markdown toolbar position

* wip

* editor toolbar progress

* editor toolbar wip

* finished basic editor toolbar

* add standalone toggle component

* improve markdown toolbar spacing

* add user avatar placeholder

* finish markdown toggle styling

* refactor icon setup, add new icons

* add new icons to markdown editor toolbar

* remove extra app container

* add markdown active mark style

* relation and text widget styling

* widget design updates, basic list/object design update

* widget style updates, image widget improvements

* refactor widget directory, fix file removal

* widget focus styles

* finish editor widget focus styles

* migrate media library modal to react-modal

* wip - migrate editor component form to modal

* wip - move editor component form to modal

* wip - embed plugin forms in the editor

* inline shortcode forms working

* disable react hot loading, its breaking things

* improve shortcode form styles

* make shortcode form collapsible, improve styling

* add close functionality to shortcode blocks

* improve base media library styling

* fix shortcode label

* migrate unstyled workflow to new UI

* wip - reorganizing everything

* more work moving everything

* finish more moving and eliminating stuff

* restructure, remove react-toolbox

* wip - removing old stuff, more restructure

* finish restructure

* wip - css arch

* switch back to test repo

* update react-datetime to ^2.11.0

* remove leftover react-toolbox button

* more restructuring clean-up

* fix UI component directory case

* wip -css editor control style

* wip - consolidate widget styles

* wip - use a single control renderer

* fixed object values breaking

* wip - editor control active styles

* pass control wrapper to widgets

* ensure branch name is trimmed

* wip - improve widget authoring support

* import Map to Widget component

* refactor toolbar buttons

* wip - more widget active styles

* break out editor toggle component

* add local scroll sync back

* update editor toggle icons

* limit editor control pane content width

* fix editor control spacing

* migrate markdown toolbar stickiness to css

* fix markdown toolbar border radius

* temporarily use test backend

* stop markdown toolbar from going to bottom

* restore disabled markdown toolbar buttons for raw

* test markdown widget without focus styles

* more widget updates

* remove card visuals from editor

* disable dragging editor split off screen

* use editorControl component for shortcode fields

* make header site link configurable

* add configurable collection descriptions

* temporarily add example assets

* add basic list view

* remove outdated css mixins

* add and implement search icon

* activate quick add menu

* visualize usable space in editor view

* fix entry close, other improvements

* wip - editorial workflow updates

* some dropshadow and other CSS tweaks

* workflow ui updates

* add worfklow card buttons

* fix workflow card button handlers

* some dropshadow and other CSS tweaks

* make workflow board wider

* center workflow and collection views

* add basic responsiveness

* a bunch of fun UI fixes! a BUNCH! (decaporg#875)

* give `.nc-entryEditor-toolbar-mainSection` left and right child divs

* a bunch of fun UI fixes! a BUNCH!

* remove obscure --buttonShadow

* revert to test repo

* fix not found page styling

* allow workflow publishing from any column

* disallow publishing from all columns, with feedback

* fix new entry button

* fix markdown state persisting across entries

* enable simple workflow save and new from editor

* update slug in address bar when saving new entry

* wip - workflow updates, deletion working

* add status change functionality to editor

* wip - improving status change from editor

* editor toolbar back button improvements, loading improvements, cleanup

* progress on the media library UI cleanup

* remove font smothing css

* a quick fix for these buttons

* tweaks

* progress on media library modal— broken FYI

* fix media library functionality, finish migrating footer

* remove media library footer files

* remove leftover css import

* fix media library

* editor publishing functionality complete (unstyled)

* remove leftover loader var from media library

* wip - editor publishing styles

* add status dropdown styling

* editor toolbar style updates

* editor toolbar state improvements

* progress on the media library UI cleanup, style improvements

* finish editorial workflow editor styling

* finish media library styling

* fix config

* add what-input to optimize focus styling

* fix button

* fix navigation blocking for simple workflow

* improve simple workflow publishing

* add avatar dropdown to editor top bar

* style github and test-repo auth pages

* add git gateway auth page styles

* improve editor error styling

Author: erquhart

.babelrc

@@ -7,7 +7,6 @@
     "react"
   ],
   "plugins": [
-    "react-hot-loader/babel",
     "lodash",
     ["babel-plugin-transform-builtin-extend", {
       "globals": ["Error"]

.storybook/config.js

@@ -1,11 +1,15 @@
 backend:
   name: test-repo
 
+display_url: https://example.com
 media_folder: "assets/uploads"
 
 collections: # A list of collections the CMS should be able to edit
   - name: "posts" # Used in routes, ie.: /admin/collections/:slug/edit
     label: "Post" # Used in the UI, ie.: "New Post"
+    description: >
+      The description is a great place for tone setting, high level information, and editing
+      guidelines that are specific to a collection.
     folder: "_posts"
     slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
     create: true # Allow users to create new documents in this collection

.storybook/webpack.config.js

@@ -11,8 +11,6 @@
     "build:scripts": "cross-env NODE_ENV=production webpack --config webpack.cli.js",
     "add-contributor": "all-contributors add",
     "generate-contributors": "all-contributors generate",
-    "storybook": "start-storybook -p 9001",
-    "storybook-build": "build-storybook -o dist",
     "lint": "npm run lint:js & npm run lint:css",
     "lint:js": "eslint .",
     "lint:js:fix": "npm run lint:js -- --fix",
@@ -73,7 +71,6 @@
     "last 2 ChromeAndroid versions"
   ],
   "devDependencies": {
-    "@kadira/storybook": "^1.36.0",
     "all-contributors-cli": "^4.4.0",
     "babel": "^6.5.2",
     "babel-cli": "^6.18.0",
@@ -87,7 +84,6 @@
     "babel-preset-react": "^6.23.0",
     "babel-preset-stage-1": "^6.22.0",
     "babel-runtime": "^6.23.0",
-    "caniuse-lite": "^1.0.30000745",
     "cross-env": "^5.0.2",
     "css-loader": "^0.28.7",
     "cssnano": "^v4.0.0-rc.2",
@@ -110,7 +106,6 @@
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.7",
     "raf": "^3.4.0",
-    "react-hot-loader": "^3.0.0-beta.7",
     "react-test-renderer": "^16.0.0",
     "style-loader": "^0.18.2",
     "stylefmt": "^4.3.1",
@@ -119,8 +114,8 @@
     "stylelint-config-standard": "^13.0.2",
     "stylelint-declaration-block-order": "^0.1.0",
     "stylelint-declaration-use-variable": "^1.6.0",
+    "svg-inline-loader": "^0.8.0",
     "uglifyjs-webpack-plugin": "^1.0.1",
-    "url-loader": "^0.5.9",
     "webpack": "^3.6.0",
     "webpack-dev-server": "^2.9.1",
     "webpack-merge": "^4.1.0",
@@ -129,7 +124,6 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "create-react-class": "^15.6.0",
-    "focus-trap-react": "^3.0.3",
     "fuzzy": "^0.1.1",
     "gotrue-js": "^0.9.15",
     "gray-matter": "^3.0.6",
@@ -140,27 +134,28 @@
     "jwt-decode": "^2.1.0",
     "localforage": "^1.4.2",
     "lodash": "^4.13.1",
-    "material-design-icons": "^3.0.1",
     "mdast-util-definitions": "^1.2.2",
     "mdast-util-to-string": "^1.0.4",
     "moment": "^2.11.2",
-    "normalize.css": "^4.2.0",
     "prop-types": "^15.5.10",
     "react": "^16.0.0",
+    "react-aria-menubutton": "^5.1.0",
     "react-autosuggest": "^9.3.2",
-    "react-datetime": "^2.6.0",
+    "react-datetime": "^2.11.0",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
     "react-dom": "^16.0.0",
     "react-frame-component": "^2.0.0",
     "react-immutable-proptypes": "^2.1.0",
+    "react-modal": "^3.1.5",
     "react-redux": "^4.4.0",
     "react-router-dom": "^4.2.2",
     "react-router-redux": "^5.0.0-alpha.8",
-    "react-sidebar": "^2.2.1",
+    "react-scroll-sync": "^0.4.0",
     "react-sortable-hoc": "^0.6.8",
     "react-split-pane": "^0.1.66",
-    "react-toolbox": "^2.0.0-beta.12",
+    "react-textarea-autosize": "^5.2.0",
+    "react-toggled": "^1.1.2",
     "react-topbar-progress-indicator": "^2.0.0",
     "react-transition-group": "^2.2.1",
     "react-waypoint": "^7.1.0",
@@ -189,7 +184,8 @@
     "unist-builder": "^1.0.2",
     "unist-util-visit-parents": "^1.1.1",
     "url": "^0.11.0",
-    "uuid": "^3.1.0"
+    "uuid": "^3.1.0",
+    "what-input": "^5.0.3"
   },
   "optionalDependencies": {
     "fsevents": "^1.0.14"

example/config.yml

@@ -3,17 +3,7 @@ const webpack = require('webpack');
 module.exports = {
   plugins: [
     require('postcss-import')({ addDependencyTo: webpack }),
-    require('postcss-cssnext')({
-      features: {
-        customProperties: {
-          variables: {
-            "preferred-font": 'inherit', // Override react-toolbox font setting
-          },
-        },
-      },
-    }),
-    require('cssnano')({
-      preset: 'default',
-    }),
+    require('postcss-cssnext')(),
+    require('cssnano')({ preset: 'default' }),
   ],
 };

example/moby-dick.jpg

@@ -1,5 +1,5 @@
-import { currentBackend } from '../backends/backend';
 import { actions as notifActions } from 'redux-notifications';
+import { currentBackend } from 'Backends/backend';
 
 const { notifSend } = notifActions;
 

package.json

@@ -0,0 +1,14 @@
+import history from 'Routing/history';
+import { getCollectionUrl, getNewEntryUrl } from 'Lib/urlHelper';
+
+export function searchCollections(query) {
+  history.push(`/search/${query}`);
+}
+
+export function showCollection(collectionName) {
+  history.push(getCollectionUrl(collectionName));
+}
+
+export function createNewEntry(collectionName) {
+  history.push(getNewEntryUrl(collectionName));
+}

postcss.config.js

@@ -1,7 +1,7 @@
 import yaml from "js-yaml";
 import { set, defaultsDeep, get } from "lodash";
-import { authenticateUser } from "../actions/auth";
-import * as publishModes from "../constants/publishModes";
+import { authenticateUser } from "Actions/auth";
+import * as publishModes from "Constants/publishModes";
 
 export const CONFIG_REQUEST = "CONFIG_REQUEST";
 export const CONFIG_SUCCESS = "CONFIG_SUCCESS";