Update & enhance CSS

2025-12-27 15:13:21 +00:00 · 2018-08-20 14:18:37 +02:00 · 2018-08-20 14:18:37 +02:00 · 4f16144ee9
commit 4f16144ee9
parent 9e191ebc8c
20 changed files with 126 additions and 51 deletions
--- a/packages/strapi-admin/admin/src/components/CtaWrapper/index.js
+++ b/packages/strapi-admin/admin/src/components/CtaWrapper/index.js
@ -15,7 +15,7 @@ const style = {
  top: '0',
  right: '0',
  display: 'flex',
-  zIndex: '1060',
+  zIndex: '1050',
 };

 CTAWrapper.propTypes = {
--- a/packages/strapi-admin/admin/src/components/Header/index.js
+++ b/packages/strapi-admin/admin/src/components/Header/index.js
@ -7,14 +7,6 @@
 import React from 'react';
 import styles from './styles.scss';

-class Header extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  render() {
-    return (
-      <div className={styles.header}>
-
-      </div>
-    );
-  }
+export default function Header() {
+  return <div className={styles.header} />;
 }
-
-export default Header;
--- a/packages/strapi-admin/admin/src/components/Header/styles.scss
+++ b/packages/strapi-admin/admin/src/components/Header/styles.scss
@ -5,7 +5,7 @@
  width: 100%;
  height: $header-height;
  position: fixed;
-  z-index: 1050;
+  z-index: 1040;
  left: $left-menu-width;

  box-shadow:  0 1px 2px 0 rgba(40, 42, 49, 0.16);
--- a/packages/strapi-helper-plugin/lib/src/components/BackHeader/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/BackHeader/styles.scss
@ -4,7 +4,7 @@
  height: 6rem;
  width: 6.5rem;
  line-height: 6rem;
-  z-index: 1060;
+  z-index: 1050;
  text-align: center;
  background-color: #FFFFFF;
  color: #81848A;
--- a/packages/strapi-plugin-content-manager/admin/src/assets/images/icon_grab_blue.svg
+++ b/packages/strapi-plugin-content-manager/admin/src/assets/images/icon_grab_blue.svg
@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon grab</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Pages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Content-Manager---Settings-view---Single" transform="translate(-335.000000, -734.000000)" fill="#AED4FB">
+            <g id="Container" transform="translate(261.000000, 84.000000)">
+                <g id="Forms" transform="translate(3.000000, 77.000000)">
+                    <g id="Settings">
+                        <g id="Attributes" transform="translate(4.000000, 456.000000)">
+                            <g id="Order-attributes" transform="translate(0.000000, 23.000000)">
+                                <g id="Link" transform="translate(35.000000, 0.000000)">
+                                    <g id="Icon-grab" transform="translate(32.000000, 94.000000)">
+                                        <rect id="Rectangle-4" x="0" y="0" width="2" height="2"></rect>
+                                        <rect id="Rectangle-4" x="3" y="0" width="2" height="2"></rect>
+                                        <rect id="Rectangle-4" x="6" y="0" width="2" height="2"></rect>
+                                        <rect id="Rectangle-4" x="0" y="3" width="2" height="2"></rect>
+                                        <rect id="Rectangle-4" x="3" y="3" width="2" height="2"></rect>
+                                        <rect id="Rectangle-4" x="6" y="3" width="2" height="2"></rect>
+                                        <rect id="Rectangle-4" x="0" y="6" width="2" height="2"></rect>
+                                        <rect id="Rectangle-4" x="3" y="6" width="2" height="2"></rect>
+                                        <rect id="Rectangle-4" x="6" y="6" width="2" height="2"></rect>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/packages/strapi-plugin-content-manager/admin/src/components/DragBox/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DragBox/index.js
@ -6,12 +6,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import DraggedRemovedIcon from 'components/DraggedRemovedIcon';
+
+import GrabIcon from 'assets/images/icon_grab_blue.svg';
+
 import styles from './styles.scss';

+
 function DragBox({ name }) {
  return (
    <div className={styles.dragBox}>
-      <i className="fa fa-th" aria-hidden="true" />
+      <img src={GrabIcon} alt="Grab Icon Active" />
      <span>{name}</span>
      <DraggedRemovedIcon isDragging />
    </div>
--- a/packages/strapi-plugin-content-manager/admin/src/components/DragBox/styles.scss
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DragBox/styles.scss
@ -13,10 +13,10 @@
  color: #007EFF;
  font-weight: 500;

-  > i {
+  > img {
+    max-width: 8px;
    margin-right: 10px;
-    font-size: 10px;
-    color: #B3B5B9;
+    margin-top: -1px;
  }

  > span:last-child {
--- a/packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/index.js
@ -19,6 +19,9 @@ import DraggedRemovedIcon from 'components/DraggedRemovedIcon';
 import VariableEditIcon from 'components/VariableEditIcon';
 import ItemTypes from 'utils/ItemTypes';

+import GrabIconBlue from 'assets/images/icon_grab_blue.svg';
+import GrabIcon from 'assets/images/icon_grab.svg';
+
 import styles from './styles.scss';

 const draggableAttrSource = {
@ -153,12 +156,12 @@ class DraggableAttr extends React.Component {
            onClick={this.handleClickEdit}
            style={{ opacity }}
          >
-            <i className="fa fa-th" aria-hidden="true" />
+            <img src={(isEditing ? GrabIconBlue : GrabIcon)} alt="Grab Icon" />
            <span>{name}</span>
            <ClickOverHint show={isOver && !isDragging && !isEditing} />
            { (!isOver || isEditing) && name.toLowerCase() !== label.toLowerCase() && (
-              <div className={styles.infoLabel}>
-                {label}
+              <div className={cn(styles.infoLabel, isEditing && styles.infoLabelHover)}>
+                {label.toLowerCase() === 'id' ? 'ID' : label}
              </div>
            )}
            {isEditing && !isOver ? (
--- a/packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/styles.scss
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/styles.scss
@ -6,20 +6,23 @@
  padding-left: 10px;
  justify-content: space-between;
  background: #FAFAFB;
-  line-height: 30px;
+  line-height: 28px;
  color: #333740;
+  font-size: 13px;
  border: 1px solid #E3E9F3;
  border-radius: 2px;
-  > i {
+  &:hover{
+    cursor: move;
+  }
+  > img {
+    max-width: 8px;
    margin-right: 10px;
-    font-size: 11px;
-    color: #B3B5B9;
+    margin-top: -1px;
  }
 }

 .draggableAttrOvered {
  border: 1px solid #AED4FB!important;
-  cursor: pointer;
 }

 .editingAttr {
@ -45,6 +48,10 @@
  font-weight: 400;
 }

+.infoLabelHover{
+  color: #007EFF; 
+}
+
 .dragged {
  position: relative;
  height: 30px !important;
--- a/packages/strapi-plugin-content-manager/admin/src/components/EditRelations/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/EditRelations/index.js
@ -66,6 +66,7 @@ EditRelations.defaultProps = {
 };

 EditRelations.propTypes = {
+  changeData: PropTypes.func.isRequired,
  currentModelName: PropTypes.string.isRequired,
  displayedRelations: PropTypes.array,
  isDraggingSibling: PropTypes.bool,
--- a/packages/strapi-plugin-content-manager/admin/src/components/VariableDraggableAttr/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/VariableDraggableAttr/index.js
@ -18,6 +18,10 @@ import ClickOverHint from 'components/ClickOverHint';
 import DraggedRemovedIcon  from 'components/DraggedRemovedIcon';
 import VariableEditIcon from 'components/VariableEditIcon';
 import ItemTypes from 'utils/ItemTypes';
+
+import GrabIconBlue from 'assets/images/icon_grab_blue.svg';
+import GrabIcon from 'assets/images/icon_grab.svg';
+
 import Carret from './Carret';
 import styles from './styles.scss';

@ -237,13 +241,13 @@ class VariableDraggableAttr extends React.Component {
      <div style={{ display: 'flex' }}>
        { showLeftCarret && <Carret style={carretStyle} />}
        <div className={cn(classNames.wrapper, isEditing && styles.editingVariableAttr)} style={style}>
-          <i className="fa fa-th" />
+          <img src={(isEditing ? GrabIconBlue : GrabIcon)} alt="Grab Icon" />
          <span className={cn(isEditing && styles.editing, styles.truncated)}>
            {name}
          </span>
          <ClickOverHint show={isOver && !isEditing} />
          {(!isOver || isEditing) && get(data, 'name', '').toLowerCase() !== get(data, 'label', '').toLowerCase() && (
-            <div className={styles.infoLabel}>
+            <div className={cn(styles.infoLabel, isEditing && styles.infoLabelHover)}>
              {data.label}
            </div>
          )}
--- a/packages/strapi-plugin-content-manager/admin/src/components/VariableDraggableAttr/styles.scss
+++ b/packages/strapi-plugin-content-manager/admin/src/components/VariableDraggableAttr/styles.scss
@ -7,15 +7,19 @@
  padding-left: 10px;
  justify-content: space-between;
  background: #FAFAFB;
-  line-height: 30px;
+  line-height: 28px;
  color: #333740;
  border: 1px solid #E3E9F3;
  border-radius: 2px;
-  > i {
-    margin-top: 12px;
+  &:hover{
+    cursor: move;
+  }
+  > img {
+    align-self: flex-start;
+    vertical-align: top;
+    max-width: 8px;
    margin-right: 10px;
-    font-size: 11px;
-    color: #B3B5B9;
+    margin-top: 11px;
  }
 }

@ -63,6 +67,10 @@
  font-weight: 400;
 }

+.infoLabelHover{
+  color: #007EFF; 
+}
+
 .truncated {
  overflow: hidden;
  white-space:nowrap;
@ -76,8 +84,9 @@
 }

 .carret {
-  width: 10px;
-  background: blue;
+  width: 2px;
+  border-radius: 2px;
+  background: #007EFF;
 }

 .editing {
--- a/packages/strapi-plugin-content-manager/admin/src/components/VariableEditIcon/styles.scss
+++ b/packages/strapi-plugin-content-manager/admin/src/components/VariableEditIcon/styles.scss
@ -1,6 +1,6 @@
 .editIcon {
  width: 30px;
-  background: #E6F0FB;
+  background: #AED4FB;
  height: 28px;
  cursor: pointer;
  text-align: center;
@ -19,7 +19,7 @@

 .editIconLonger {
  width: 30px;
-  background: #E6F0FB;
+  background:#AED4FB;
  height: 82px;
  line-height: 82px;
  cursor: pointer;
--- a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/styles.scss
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/styles.scss
@ -11,7 +11,7 @@

 .sub_wrapper{
  background: #ffffff;
-  padding: 0 25px 1px;
+  padding: 0 20px 1px;
  border-radius: 2px;
  box-shadow: 0 2px 4px #E3E9F3;
 }
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/forms.json
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/forms.json
@ -20,7 +20,7 @@
    },
    {
      "label": { "id": "content-manager.form.Input.bulkActions" },
-      "customBootstrapClass": "col-md-2",
+      "customBootstrapClass": "col-md-4",
      "didCheckErrors": false,
      "errors": [],
      "name": "bulkActions",
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/index.js
@ -623,10 +623,9 @@ class SettingPage extends React.PureComponent {
    );
  }

-  renderInputMainSettings = input => {
+  renderInputMainSettings = (input, i) => {
    const inputName = `${this.getPath()}.${input.name}`;
-                    
-    return (
+    const content = (
      <Input
        {...input}
        key={input.name}
@ -636,6 +635,19 @@ class SettingPage extends React.PureComponent {
        value={this.getValue(inputName, input.type)}
      />
    );
+
+    if (i === 3) {
+      return (
+        <React.Fragment>
+          <div className="col-md-12">
+            <div className={styles.separator} />
+          </div>
+          {content}
+        </React.Fragment>
+      );
+    } 
+                    
+    return content;
  }

  render() {
@ -700,7 +712,7 @@ class SettingPage extends React.PureComponent {
                  </div>

                  <div className="col-md-12">
-                    <div className={styles.separator} />
+                    <div className={styles.separatorHigher} />
                  </div>
                </div>

--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/styles.scss
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/styles.scss
@ -21,6 +21,11 @@
 }

 .separator {
+  margin: 0 0 17px;
+  border-top: 1px solid #F6F6F6;
+}
+
+.separatorHigher{
  margin-top: 19px;
  border-top: 1px solid #F6F6F6;
 }
@ -54,7 +59,7 @@

 .editWrapper {
  min-height: 246px;
-  padding: 24px 30px;
+  padding: 24px 30px 0px;
  background-color: #FAFAFB;
  border-radius: 2px; 
 }
@ -104,7 +109,7 @@
      }
      &:before {
        position: absolute;
-        top: 0;
+        top: 0px;
        bottom: 0;
        content: '\f067';
        font-family: FontAwesome;
@ -122,14 +127,14 @@
      border-top-right-radius: 0;
      border-color: #E3E9F3 !important;
      border-top-color: #AED4FB !important;
-      box-shadow: 0 2px 2px #E3E9F3;
+      box-shadow: 0 2px 3px rgba(227, 233, 245, .5);

      overflow: scroll;
      
      button {
-        height: 27px;
+        height: 30px;
        padding-left:  10px !important;
-        line-height: 18px;
+        line-height: 26px;
        cursor: pointer;
        font-size: 13px !important;
        &:hover {
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingsPage/forms.json
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingsPage/forms.json
@ -2,7 +2,7 @@
  "inputs": [
    {
      "label": { "id": "content-manager.form.Input.search" },
-      "customBootstrapClass": "col-md-5",
+      "customBootstrapClass": "col-md-4",
      "didCheckErrors": false,
      "errors": [],
      "name": "generalSettings.search",
@ -11,7 +11,7 @@
    },
    {
      "label": { "id": "content-manager.form.Input.filters" },
-      "customBootstrapClass": "col-md-5",
+      "customBootstrapClass": "col-md-4",
      "didCheckErrors": false,
      "errors": [],
      "name": "generalSettings.filters",
@ -20,7 +20,7 @@
    },
    {
      "label": { "id": "content-manager.form.Input.bulkActions" },
-      "customBootstrapClass": "col-md-2",
+      "customBootstrapClass": "col-md-4",
      "didCheckErrors": false,
      "errors": [],
      "name": "generalSettings.bulkActions",
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingsPage/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingsPage/index.js
@ -158,7 +158,7 @@ class SettingsPage extends React.PureComponent {
          >
            <form onSubmit={this.handleSubmit} className={styles.ctmForm}>
              <div className="row">
-                <div className="col-md-10">
+                <div className="col-md-12">
                  <div className="row">
                    {forms.inputs.map(this.renderForm)}
                  </div>
--- a/packages/strapi-plugin-users-permissions/models/User.settings.json
+++ b/packages/strapi-plugin-users-permissions/models/User.settings.json
@ -29,6 +29,10 @@
      "via": "users",
      "plugin": "users-permissions",
      "configurable": false
+    },
+    "products": {
+      "collection": "product",
+      "via": "users"
    }
  }
 }