Merge pull request #41 from editor-js/refactor/issue40-change-design

Refactor: change design for checkbox
editor-js · Apr 15, 2023 · bde915d · bde915d
2 parents b136727 + 24549e7
commit bde915d
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 55 deletions.
diff --git a/...39646439622d313332312d343766362d623965312d3937666331656634306236612e6a7067.jpeg b/...39646439622d313332312d343766362d623965312d3937666331656634306236612e6a7067.jpeg
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/checklist",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "keywords": [
     "codex editor",
     "checklist",
@@ -34,6 +34,6 @@
     "webpack-cli": "^3.2.3"
   },
   "dependencies": {
-    "@codexteam/icons": "^0.0.4"
+    "@codexteam/icons": "^0.3.0"
   }
 }
diff --git a/src/index.css b/src/index.css
@@ -1,67 +1,115 @@
 .cdx-checklist {
-    --padding: 5px;
-    --color-border: #d0d0d0;
-    --color-border-hover: #b5b5b5;
-    --color-bg-checked: #388ae5;
-    --color-bg-checked-hover: #307cd1;
+    --radius-border: 5px;
+    --checkbox-background: #fff;
+    --color-border: #C9C9C9;
+    --color-bg-checked: #369FFF;
+    --line-height: 1.57em;
+    --color-bg-checked-hover: #0059AB;
     --color-tick: #fff;
+    --width-checkbox: 22px;
+    --height-checkbox: 22px;
+    gap: 6px;
+    display: flex;
+    flex-direction: column;
 
     &__item {
         display: flex;
         box-sizing: content-box;
+        align-items: flex-start;
 
         &-text {
             outline: none;
             flex-grow: 1;
-            padding: var(--padding) 0;
+            line-height: var(--line-height);
         }
 
         &-checkbox {
-            display: inline-block;
-            flex-shrink: 0;
-            position: relative;
-            width: 20px;
-            height: 20px;
-            margin:  var(--padding);
-            margin-left: 0;
-            margin-right: 7px;
-            border-radius: 50%;
-            border: 1px solid var(--color-border);
-            background: #fff;
+            width: var(--width-checkbox);
+            height: var(--height-checkbox);
+            display: flex;
+            align-items: center;
+            margin-right: 8px;
+            margin-top: calc(var(--line-height)/2 - var(--height-checkbox)/2);
             cursor: pointer;
-            user-select: none;
 
-            &:hover {
-                border-color: var(--color-border-hover);
+            svg {
+                opacity: 0;
+                height: 20px;
+                width: 20px;
+                position: absolute;
+                left: -1px;
+                top: -1px;
+                max-height: 20px;
             }
 
-            &::after {
-                position: absolute;
-                top: 6px;
-                left: 5px;
-                width: 9px;
-                height: 4px;
-                border: 2px solid var(--color-tick);
-                border-top: none;
-                border-right: none;
-                background: transparent;
-                content: '';
-                opacity: 0;
-                transform: rotate(-45deg);
+            @media (hover: hover) {
+                &:not(&--no-hover):hover {
+                    ^&-check {
+                        svg {
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+
+            &-check {
+                cursor: pointer;
+                display: inline-block;
+                flex-shrink: 0;
+                position: relative;
+                width: 20px;
+                height: 20px;
+                box-sizing: border-box;
+                margin-left: 0;
+                border-radius: var(--radius-border);
+                border: 1px solid var(--color-border);
+                background: var(--checkbox-background);
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    left: 0;
+                    border-radius: 100%;
+                    background-color: var(--color-bg-checked);
+                    visibility: hidden;
+                    pointer-events: none;
+                    transform: scale(1);
+                    transition: transform 400ms ease-out, opacity 400ms;
+                }
             }
         }
 
         &--checked {
             ^&-checkbox {
-                background: var(--color-bg-checked);
-                border-color: var(--color-bg-checked);
-
-                &:hover {
-                    background: var(--color-bg-checked-hover);
+                @media (hover: hover) {
+                    &:not(&--no-hover):hover {
+                        .cdx-checklist__item-checkbox-check {
+                            background: var(--color-bg-checked-hover);
+                            border-color: var(--color-bg-checked-hover);
+                        }
+                    }
                 }
 
-                &::after {
-                    opacity: 1;
+                &-check {
+                    background: var(--color-bg-checked);
+                    border-color: var(--color-bg-checked);
+
+                    svg {
+                        opacity: 1;
+
+                        path {
+                            stroke: var(--color-tick);
+                        }
+                    }
+
+                    &::before {
+                        opacity: 0;
+                        visibility: visible;
+                        transform: scale(2.5);
+                    }
                 }
             }
         }

diff --git a/src/index.js b/src/index.js
@@ -3,7 +3,7 @@
  */
 import './index.css';
 
-import { IconChecklist } from '@codexteam/icons'
+import { IconChecklist, IconCheck } from '@codexteam/icons'
 import { extractContentAfterCaret, fragmentToHtml, make, getHTML, moveCaret } from './utils';
 
 
@@ -225,10 +225,12 @@ export default class Checklist {
    */
   toggleCheckbox(event) {
     const checkListItem = event.target.closest(`.${this.CSS.item}`);
-    const checkbox = checkListItem.querySelector(`.${this.CSS.checkbox}`);
+    const checkbox = checkListItem.querySelector(`.${this.CSS.checkboxContainer}`);
 
     if (checkbox.contains(event.target)) {
       checkListItem.classList.toggle(this.CSS.itemChecked);
+      checkbox.classList.add(this.CSS.noHover);
+      checkbox.addEventListener('mouseleave', () => this.removeSpecialHoverBehavior(checkbox), { once: true });
     }
   }
 
@@ -241,6 +243,7 @@ export default class Checklist {
   createChecklistItem(item = {}) {
     const checkListItem = make('div', this.CSS.item);
     const checkbox = make('span', this.CSS.checkbox);
+    const checkboxContainer = make('div', this.CSS.checkboxContainer);
     const textField = make('div', this.CSS.textField, {
       innerHTML: item.text ? item.text : '',
       contentEditable: !this.readOnly,
@@ -250,7 +253,11 @@ export default class Checklist {
       checkListItem.classList.add(this.CSS.itemChecked);
     }
 
-    checkListItem.appendChild(checkbox);
+    checkbox.innerHTML = IconCheck;
+
+    checkboxContainer.appendChild(checkbox);
+
+    checkListItem.appendChild(checkboxContainer);
     checkListItem.appendChild(textField);
 
     return checkListItem;
@@ -364,8 +371,10 @@ export default class Checklist {
       wrapper: 'cdx-checklist',
       item: 'cdx-checklist__item',
       itemChecked: 'cdx-checklist__item--checked',
-      checkbox: 'cdx-checklist__item-checkbox',
+      noHover: 'cdx-checklist__item-checkbox--no-hover',
+      checkbox: 'cdx-checklist__item-checkbox-check',
       textField: 'cdx-checklist__item-text',
+      checkboxContainer: 'cdx-checklist__item-checkbox'
     };
   }
 
@@ -378,6 +387,18 @@ export default class Checklist {
     return Array.from(this._elements.wrapper.querySelectorAll(`.${this.CSS.item}`));
   }
 
+
+  /**
+   * Removes class responsible for special hover behavior on an item
+   * 
+   * @private
+   * @param {Element} el - item wrapper
+   * @returns {Element}
+   */
+  removeSpecialHoverBehavior(el) {
+    el.classList.remove(this.CSS.noHover);
+  }
+
   /**
    * Find and return item's content editable element
    *

diff --git a/src/utils.js b/src/utils.js
@@ -30,14 +30,14 @@ export function fragmentToHtml(fragment) {
 }
 
 /**
- * Helper for making Elements with attributes
+ * Helper for making Elements with properties
  *
  * @param  {string} tagName           - new Element tag name
  * @param  {Array|string} classNames  - list or name of CSS classname(s)
- * @param  {object} attributes        - any attributes
+ * @param  {object} properties        - any properties
  * @returns {Element}
  */
-export function make(tagName, classNames = null, attributes = {}) {
+export function make(tagName, classNames = null, properties = {}) {
   const el = document.createElement(tagName);
 
   if (Array.isArray(classNames)) {
@@ -46,8 +46,8 @@ export function make(tagName, classNames = null, attributes = {}) {
     el.classList.add(classNames);
   }
 
-  for (const attrName in attributes) {
-    el[attrName] = attributes[attrName];
+  for (const propName in properties) {
+    el[propName] = properties[propName];
   }
 
   return el;

diff --git a/yarn.lock b/yarn.lock
@@ -730,10 +730,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@codexteam/icons@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.4.tgz#8b72dcd3f3a1b0d880bdceb2abebd74b46d3ae13"
-  integrity sha512-V8N/TY2TGyas4wLrPIFq7bcow68b3gu8DfDt1+rrHPtXxcexadKauRJL6eQgfG7Z0LCrN4boLRawR4S9gjIh/Q==
+"@codexteam/icons@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/@codexteam/icons/-/icons-0.3.0.tgz#62380b4053d487a257de443864b5c72dafab95e6"
+  integrity sha512-fJE9dfFdgq8xU+sbsxjH0Kt8Yeatw9xHBJWb77DhRkEXz3OCoIS6hrRC1ewHEryxzIjxD8IyQrRq2f+Gz3BcmA==
 
 "@types/json-schema@^7.0.5":
   version "7.0.6"