rm unnecessary styles for block settings buttons

editor-js · Jul 12, 2021 · e5f6db7 · e5f6db7
1 parent 6645674
commit e5f6db7
Show file tree

Hide file tree

Showing 15 changed files with 4,269 additions and 727 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "cssnano": "^4.1.7",
     "eslint": "^5.8.0",
     "eslint-config-codex": "github:codex-team/eslint-config",
+    "poscss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.1.0",
     "postcss-nesting": "^7.0.0",

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,8 +1,9 @@
 module.exports = {
   plugins: [
+    require('postcss-import'),
     require('autoprefixer'),
     require('cssnano'),
     require('postcss-nested'),
     require('postcss-nesting')
   ]
-};
+};
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,4 @@
+import Plugin from './plugin';
+import './styles/index.pcss';
+
+export default Plugin;
diff --git a/src/plugin.js b/src/plugin.js
@@ -2,12 +2,7 @@ import { TableConstructor } from './tableConstructor';
 import tableIcon from './img/tableIcon.svg';
 import withHeadings from './img/with-headings.svg';
 import withoutHeadings from './img/without-headings.svg';
-import { create } from './documentUtils';
-
-const CSS = {
-  setting: 'tc-setting',
-  settingActive: 'tc-setting--active'
-};
+import * as $ from './utils/dom';
 
 /**
  * Tool for table's creating
@@ -80,6 +75,12 @@ export default class Table {
     };
   }
 
+  static get CSS() {
+    return {
+      settingsWrapper: 'tc-settings'
+    };
+  }
+
   /**
    * Return Tool's view
    *
@@ -95,7 +96,8 @@ export default class Table {
    * @returns {HTMLElement} - wrapper element
    */
   renderSettings() {
-    const wrapper = document.createElement('div');
+    const wrapper = $.make('div', Table.CSS.settingsWrapper);
+
     const tunes = [ {
       name: this.api.i18n.t('With headings'),
       icon: withHeadings,
@@ -113,9 +115,11 @@ export default class Table {
     } ];
 
     tunes.forEach((tune) => {
-      let tuneButton = create({
-        cssClasses: [CSS.setting, tune.isActive ? CSS.settingActive : '']
-      })
+      let tuneButton = $.make('div', this.api.styles.settingsButton);
+
+      if (tune.isActive) {
+        tuneButton.classList.add(this.api.styles.settingsButtonActive);
+      }
 
       tuneButton.innerHTML = tune.icon;
       tuneButton.addEventListener('click', () => this.toggleTune(tune, tuneButton));
@@ -155,15 +159,15 @@ export default class Table {
    * @param {HTMLElement} tuneButton - DOM element of the tune
    */
   toggleTune(tune, tuneButton) {
-    const buttons = tuneButton.parentNode.querySelectorAll('.' + CSS.setting);
+    const buttons = tuneButton.parentNode.querySelectorAll('.' + this.api.styles.settingsButton);
 
     // Clear other buttons
     Array.from(buttons).forEach((button) =>
-      button.classList.remove(CSS.settingActive)
+      button.classList.remove(this.api.styles.settingsButtonActive)
     );
 
     // Mark active button
-    tuneButton.classList.toggle(CSS.settingActive);
+    tuneButton.classList.toggle(this.api.styles.settingsButtonActive);
     tune.setTune();
 
     this.tableConstructor.useHeadings(this.data.withHeadings);

diff --git a/src/styles/index.pcss b/src/styles/index.pcss
@@ -0,0 +1,4 @@
+@import './table.pcss';
+@import './toolboxes.pcss';
+@import './settings.pcss';
+@import './utils.pcss';
diff --git a/src/styles/settings.pcss b/src/styles/settings.pcss
@@ -1,29 +1,6 @@
-.tc-setting {
-  --color-default: #000;
-  --color-active: #388ae5;
-  --color-background: #eff2f5;
-
-  width: 52px;
-  height: 34px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 3px;
-  cursor: pointer;
-  color: var(--color-default);
-  transition: background-color .3s ease;
-  will-change: background-color;
-
-  &--active {
-    color: var(--color-active);
+.tc-settings {
+  .cdx-settings-button {
+    width: 50%;
+    margin: 0;
   }
-
-  &:first-child {
-    margin-right: 4px;
-  }
-
-  &:hover {
-    background-color: var(--color-background);
-    transition: background-color 0s;
-  }
-}
+}
diff --git a/src/styles/table-constructor.pcss b/src/styles/table-constructor.pcss
diff --git a/src/styles/table.pcss b/src/styles/table.pcss
@@ -17,8 +17,9 @@
   display: grid;
   grid-template-columns: calc(100% - var(--cell-size)) var(--cell-size);
 
-  & svg {
+  svg {
     vertical-align: top;
+    fill: currentColor;
   }
 }
 
@@ -58,7 +59,7 @@
         content: attr(heading);
         color: var(--color-placeholder);
       }
-      
+
       &::after {
         bottom: -2px;
         border-bottom: 2px solid var(--color-border);
@@ -103,7 +104,7 @@
     transition: 0s;
     cursor: pointer;
     will-change: background-color;
-  
+
     &:hover {
       transition: background-color 0.1s ease;
       background-color: var(--color-background);
@@ -157,4 +158,4 @@
   &--selected {
     background: var(--color-background);
   }
-}
+}
diff --git a/src/styles/toolboxes.pcss b/src/styles/toolboxes.pcss
@@ -34,10 +34,6 @@
     align-items: center;
     padding: 7px 12px;
 
-    svg path {
-      fill: #1d202b;
-    }
-
     &:hover {
       background: var(--color-option-hover);
     }
@@ -74,15 +70,14 @@
     svg {
       transition: 0.2s ease-out;
       transform: rotate(90deg);
-      filter: invert(100%);
     }
   }
 }
 
 .tc-menu-animation {
   animation-name: menuShowing;
   animation-duration: 0.1s;
-} 
+}
 
 @keyframes menuShowing {
   0% {

diff --git a/src/table.js b/src/table.js
@@ -1,8 +1,4 @@
 import { create, getCursorPositionRelativeToElement, getRelativeCoordsOfTwoElems, throttled, insertBefore } from './documentUtils';
-import './styles/table.pcss';
-import './styles/toolboxes.pcss';
-import './styles/utils.pcss';
-import './styles/settings.pcss';
 import svgPlusButton from './img/plus.svg';
 import { ToolboxColumn } from './toolbox/toolboxColumn';
 import { ToolboxRow } from './toolbox/toolboxRow';
@@ -183,7 +179,7 @@ export class Table {
    */
   addColumn(columnIndex = -1) {
     let numberOfColumns = this.numberOfColumns;
-    
+
     /**
      * Iterate all rows and add a new cell to them for creating a column
      */
@@ -220,7 +216,7 @@ export class Table {
     }
 
     /**
-     * We remember the number of columns, because it is calculated 
+     * We remember the number of columns, because it is calculated
      * by the number of cells in the first row
      * It is necessary that the first line is filled in correctly
      */
@@ -501,7 +497,7 @@ export class Table {
   /**
    * Prevents default Enter behaviors
    * Adds Shift+Enter processing
-   * 
+   *
    * @param {KeyboardEvent} event - keypress event
    */
   onKeyPressListener(event){
@@ -517,8 +513,8 @@ export class Table {
   };
 
   /**
-   * Prevents tab keydown event from bubbling 
-   * so that it only works inside the table 
+   * Prevents tab keydown event from bubbling
+   * so that it only works inside the table
    *
    * @param {KeyboardEvent} event - keydown event
    */
@@ -527,10 +523,10 @@ export class Table {
       event.stopPropagation();
     }
   }
-  
+
   /**
    * Set the coordinates of the cell that the focus has moved to
-   * 
+   *
    * @param {FocusEvent} event - focusin event
    */
   focusInTableListener(event) {
@@ -638,7 +634,7 @@ export class Table {
   addHeadingAttrToFirstRow() {
     for (let cellIndex = 1; cellIndex <= this.numberOfColumns; cellIndex++) {
       let cell = this.getCell(1, cellIndex);
-      
+
       if (cell) {
         cell.setAttribute('heading', this.api.i18n.t('Heading'));
       }
@@ -651,7 +647,7 @@ export class Table {
   removeHeadingAttrFromFirstRow() {
     for (let cellIndex = 1; cellIndex <= this.numberOfColumns; cellIndex++) {
       let cell = this.getCell(1, cellIndex);
-      
+
       if (cell) {
         cell.removeAttribute('heading');
       }

diff --git a/src/tableConstructor.js b/src/tableConstructor.js
@@ -1,4 +1,3 @@
-import './styles/table-constructor.pcss';
 import { create } from './documentUtils';
 import { Table } from './table';
 
@@ -21,25 +20,20 @@ export class TableConstructor {
    * Creates
    * @param {TableData} data - previously saved data for insert in table
    * @param {object} config - configuration of table
-   * @param {object} api - Editor.js API
+   * @param {API} api - Editor.js API
    * @param {boolean} readOnly - read-only mode flag
    */
   constructor(data, config, api, readOnly) {
     this.readOnly = readOnly;
+    this.api = api;
 
     /** creating table */
     this.tableInstance = new Table(readOnly, api);
     const size = this.resizeTable(data, config);
 
-    let apiStyles = null;
-
-    if (api && api.styles && api.styles.block) {
-      apiStyles = api.styles.block;
-    }
-
     /** creating container around table */
     this.container = create({
-      cssClasses: [CSS.editor, apiStyles],
+      cssClasses: [ api.styles.block ],
       children: [ this.tableInstance.wrapper ],
     })
 

diff --git a/src/utils/dom.js b/src/utils/dom.js
@@ -0,0 +1,31 @@
+/**
+ * Helper for making Elements with attributes
+ *
+ * @param  {string} tagName           - new Element tag name
+ * @param  {string|string[]} classNames  - list or name of CSS classname(s)
+ * @param  {object} attributes        - any attributes
+ * @returns {Element}
+ */
+export function make(
+  tagName,
+  classNames,
+  attributes = {}
+) {
+  const el = document.createElement(tagName);
+
+  if (Array.isArray(classNames)) {
+    el.classList.add(...classNames);
+  } else if (classNames) {
+    el.classList.add(classNames);
+  }
+
+  for (const attrName in attributes) {
+    if (!Object.prototype.hasOwnProperty.call(attributes, attrName)) {
+      continue;
+    }
+
+    el[attrName] = attributes[attrName];
+  }
+
+  return el;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,11 +1,10 @@
 const path = require('path');
 
 module.exports = {
-  entry: './src/plugin.js',
   output: {
     path: path.join(__dirname, '/dist'),
     publicPath: '/',
-    filename: 'bundle.js',
+    filename: 'table.js',
     library: 'Table',
     libraryExport: 'default',
     libraryTarget: 'umd'
@@ -14,12 +13,16 @@ module.exports = {
     rules: [
       {
         test: /\.pcss$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader']
+        use: [
+          'style-loader',
+          'css-loader',
+          'postcss-loader'
+        ]
       },
       {
         test: /\.svg$/,
         loader: 'svg-inline-loader?removeSVGTagAttrs=false'
       }
     ]
   }
-};
+};