FIX Updating styling to more accurately match given designs

silverstripe · Sep 6, 2018 · 86717b4 · 86717b4
1 parent 855c81a
commit 86717b4
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 46 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/ElementEditor/Element.js b/client/src/components/ElementEditor/Element.js
@@ -69,7 +69,7 @@ class Element extends Component {
    */
   handleKeyUp(event) {
     if (event.keyCode === 13) {
-      this.handleClick();
+      this.handleExpand();
     }
   }
 
@@ -102,7 +102,7 @@ class Element extends Component {
     );
 
     return (
-      <span
+      <div
         className={elementClassNames}
         onClick={this.handleExpand}
         onKeyUp={this.handleKeyUp}
@@ -120,7 +120,6 @@ class Element extends Component {
           fontIcon={element.BlockSchema.iconClass}
           link={link}
           editTabs={editTabs}
-          caretClickCallback={this.handleExpand}
           previewExpanded={previewExpanded}
           expandable={element.InlineEditable}
         />
@@ -130,7 +129,7 @@ class Element extends Component {
           content={element.BlockSchema.content}
           previewExpanded={previewExpanded}
         />
-      </span>
+      </div>
     );
   }
 }

diff --git a/client/src/components/ElementEditor/Element.scss b/client/src/components/ElementEditor/Element.scss
@@ -2,9 +2,7 @@
   border-bottom: 1px solid $border-color-light;
   color: inherit;
   cursor: pointer;
-  display: block;
-  padding: $panel-padding-x;
-  padding-top: $spacer;
+  padding: $spacer-sm $panel-padding-x $spacer * 1.5;
 
   &:focus,
   &:hover {
@@ -15,8 +13,4 @@
   &:last-child {
     border-bottom: 0;
   }
-
-  &--expandable {
-    cursor: default;
-  }
 }
diff --git a/client/src/components/ElementEditor/Header.js b/client/src/components/ElementEditor/Header.js
@@ -15,10 +15,8 @@ class Header extends Component {
     super(props);
 
     this.handleArchive = this.handleArchive.bind(this);
-    this.handleCaretClick = this.handleCaretClick.bind(this);
     this.handlePublish = this.handlePublish.bind(this);
     this.handleUnpublish = this.handleUnpublish.bind(this);
-    this.renderActionsMenu = this.renderActionsMenu.bind(this);
     this.toggle = this.toggle.bind(this);
 
     this.state = {
@@ -78,20 +76,6 @@ class Header extends Component {
     }
   }
 
-  /**
-   * Handle the opening/closing of the block preview
-   */
-  handleCaretClick(event) {
-    event.stopPropagation();
-
-    // Tell Element
-    const { caretClickCallback } = this.props;
-
-    if (caretClickCallback) {
-     caretClickCallback(event);
-    }
-  }
-
   toggle() {
     this.setState({
       tooltipOpen: !this.state.tooltipOpen
@@ -163,12 +147,21 @@ class Header extends Component {
     }
 
     const archiveTitle = i18n._t('ElementHeader.ARCHIVE', 'Archive');
+    const dropdownToggleClassNames = [
+      'element-editor-header__actions-toggle',
+      'btn',
+      'btn-sm',
+      'btn--no-text',
+      'font-icon-dot-3',
+    ];
 
+    // Remove btn-icon-xl make btn-sm
     return (
       <ActionMenuComponent
         id={`element-editor-actions-${id}`}
         className={'element-editor-header__actions-dropdown'}
         dropdownMenuProps={{ right: true }}
+        dropdownToggleClassNames={dropdownToggleClassNames}
         toggleCallback={(event) => event.stopPropagation()}
       >
         { this.renderEditTabs() }
@@ -247,10 +240,8 @@ class Header extends Component {
     } = this.props;
 
     const expandTitle = i18n._t('ElementHeader.EXPAND', 'Show editable fields');
-    const expandButtonClassNames = classNames(
-      'dropdown-item',
+    const expandCaretClasses = classNames(
       'element-editor-header__expand',
-      'btn',
       {
         'font-icon-right-open-big': !expandable,
         'font-icon-up-open-big': expandable && previewExpanded,
@@ -278,12 +269,7 @@ class Header extends Component {
         <div className="element-editor-header__actions">
           {this.renderActionsMenu()}
 
-          <button
-            onClick={this.handleCaretClick}
-            title={expandTitle}
-            type="button"
-            className={expandButtonClassNames}
-          />
+          <i className={expandCaretClasses} title={expandTitle} />
         </div>
       </div>
     );
@@ -306,7 +292,6 @@ Header.propTypes = {
   }),
   ActionMenuComponent: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.func]),
   expandable: PropTypes.bool,
-  caretClickCallback: PropTypes.func,
   previewExpanded: PropTypes.bool,
 };
 

diff --git a/client/src/components/ElementEditor/Header.scss b/client/src/components/ElementEditor/Header.scss
@@ -4,9 +4,13 @@
   justify-content: space-between;
 
   &__title {
+    font-size: 15px;
     font-weight: 400;
-    margin: 0 0 0 $spacer-sm;
+    margin: 0 0 0 $spacer-xs;
     -webkit-font-smoothing: antialiased;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__info,
@@ -16,19 +20,30 @@
     flex-grow: 1;
   }
 
+  &__info {
+    max-width: calc(100% - 60px);
+  }
+
   &__actions {
     justify-content: flex-end;
   }
 
+  &__actions-toggle {
+    padding-top: 3px;
+    padding-bottom: 3px;
+  }
+
   &__icon-container {
+    margin-left: -2px;
     color: $text-muted;
-    font-size: 2.3rem;
-    height: 30px;
+    font-size: 2.154rem;
+    height: 28px;
     line-height: 1.5rem;
   }
 
   &__expand {
     width: unset;
+    font-size: 1.1rem;
 
     &.dropdown-item::before {
       margin-right: 0;

diff --git a/client/src/components/ElementEditor/Summary.scss b/client/src/components/ElementEditor/Summary.scss
@@ -1,13 +1,13 @@
 .element-editor-summary {
   display: flex;
-  margin-top: $spacer-xs;
-  margin-left: 42px; // header icon + margin of title
+  margin-top: $spacer-sm;
+  margin-left: 36px; // header icon + margin of title
   align-items: center;
 
   &__thumbnail-image {
-    border-radius: $thumbnail-border-radius;
+    border-radius: $border-radius-sm * 0.8;
     height: 36px;
-    margin: (-$spacer-sm) $spacer-sm (-$spacer-sm) 0;
+    margin: (-$spacer-xs * 0.8) $spacer-sm (-$spacer-xs * 0.8) 0;
   }
   &__content {
     color: $gray-600;