Fix overall style and bugs

adnzaki · Mar 12, 2023 · fc49995 · fc49995
1 parent 87055d8
commit fc49995
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 60 deletions.
diff --git a/components/dist/ss-components.js b/components/dist/ss-components.js
@@ -9,7 +9,7 @@ var SSComponents = (function (exports, vue) {
     return useStore ? vue.toRefs(paging) : vue.toRefs(paging.state)
   };
 
-  const densePadding = { padding: '6px 12px' };
+  const largePadding = { padding: '10px 15px' };
 
   const iconSet = 'material-icons-round';
 
@@ -38,7 +38,7 @@ var SSComponents = (function (exports, vue) {
       selected: {
         default: null
       },
-      dense: {
+      large: {
         type: Boolean,
         default: false
       },
@@ -54,17 +54,20 @@ var SSComponents = (function (exports, vue) {
       // Pagination instance
       const paging = props.paging;
 
-      const showOptions = vue.ref(false);
       const label = vue.ref(props.label);
       const optionsWidth = vue.ref(0);
+
+      const listWrapperActive = vue.ref('');
+      const activeIcon = vue.ref('');
 
       vue.onMounted(() => {
         // hide options if users click outside the select element
         document.addEventListener('click', event => {
           const selectEl = document.getElementById('sp-select-id');
           if(!selectEl.contains(event.target)) {
             setTimeout(() => {
-              showOptions.value = false;            
+              // showOptions.value = false
+              listWrapperActive.value = ''; 
             }, 100);
           }
 
@@ -95,14 +98,23 @@ var SSComponents = (function (exports, vue) {
         return classes
       };
 
-      // attributes for Select
-      const selectAttrs = {
-        class: selectClass(),
-        style: props.dense ? densePadding : '',
-        id: 'sp-select-id',
-        onClick(event) {
-          showOptions.value = !showOptions.value;
-        },
+      // attributes for Select    
+      const selectAttrs = () => {
+        return {
+          class: [selectClass(), activeIcon.value],
+          style: props.large ? largePadding : '',
+          id: 'sp-select-id',
+          onClick(event) {
+            // showOptions.value = !showOptions.value
+            if(listWrapperActive.value === 'active') {
+              listWrapperActive.value = '';
+              activeIcon.value = '';
+            } else {
+              listWrapperActive.value = 'active';   
+              activeIcon.value = 'active';      
+            }  
+          },
+        }
       };
 
       const optionClass = () => {
@@ -119,7 +131,7 @@ var SSComponents = (function (exports, vue) {
         return {
           class: optionClass(),
           key,
-          style: props.dense ? densePadding : '',
+          style: props.large ? largePadding : '',
           onClick(event) {
             setPagingState(props.useStore, {
               paging,
@@ -138,19 +150,23 @@ var SSComponents = (function (exports, vue) {
 
       return () => [
         // Select element
-        vue.h('div', selectAttrs, label.value,
+        vue.h('div', selectAttrs(), label.value,
           vue.h('span', { class: 'material-icons-round' }, 'expand_more'),
         ),
 
         // Options element
-        showOptions.value ? vue.h('ul', { 
-            class: ['sp-select-options', props.dark ? 'dark' : ''], 
+        vue.h('ul', { 
+            class: [
+              'sp-select-options', 
+              props.dark ? 'dark' : '',
+              listWrapperActive.value
+            ], 
             style: { width: `${optionsWidth.value}px` } 
           }, 
           props.options.map((row, index) => {
             return vue.h('li', optionsAttrs(row, index), `${row} ${props.rowLabel}`)
           })
-        ) : ''
+        )
       ]
     }
   });
@@ -210,15 +226,18 @@ var SSComponents = (function (exports, vue) {
             }
           }
         }, 
-          vue.h('a', { class: ['sp-link', ...customClass] }, content)
+          vue.h('button', { class: ['sp-link', ...customClass] }, content)
         )
       };
 
       // Page navigation
       const navLinks = (icon, target) => {
         return createList(vue.h('span', {
             class: iconSet
-          }, icon), target, props.dark ? 'dark' : '', props.customNavigationClass
+          }, icon), 
+          target, 
+          props.paging.isDisabled(target), 
+          props.dark ? 'dark' : '', props.customNavigationClass
         )
       };   
 

diff --git a/components/dist/ss-components.prod.js b/components/dist/ss-components.prod.js
diff --git a/components/dist/style.css b/components/dist/style.css
@@ -1,7 +1,7 @@
 :root {
   --sp-brand-color: #d44670;
   --sp-brand-color-light: #dd5981;
-  --sp-default-padding: 10px 15px;
+  --sp-default-padding: 6px 12px;
   --sp-dark: #323232;
   --sp-dark-hover: #2a2a2a;
   --sp-default-border-radius: 5px;
@@ -22,19 +22,30 @@
   color: #fff;
 }.sp-select span {
   float: right;
-  margin-left: 20px;
+  margin-right: -10px;
+  transition: .2s;
+}.sp-select.active span {
+  rotate: 180deg;
 }.sp-select-options {
   background-color: #fff;
   border-radius: var(--sp-default-border-radius);
   box-shadow: var(--sp-default-box-shadow);
-  margin-top: 3px;
+  margin-top: -40px;
   list-style: none;
   padding: 0;
   text-align: left;
   overflow: auto;
-  max-height: 200px;
+  max-height: 50px;
   position: absolute;
   z-index: 999;
+  transition: .2s;
+  opacity: 0;
+  visibility: hidden;
+}.sp-select-options.active {
+  margin-top: 3px;
+  opacity: 1;
+  visibility: visible;
+  max-height: 250px;
 }.sp-select-options.dark {
   background-color: var(--sp-dark);
   box-shadow: var(--sp-dark-box-shadow);
@@ -69,15 +80,22 @@
   cursor: pointer;
   border-radius: 50%;
   transition: .2s;
+  background-color: transparent;
+  border: none;
   /* border: var(--sp-default-border); */
+}.sp-navigation .sp-item .sp-link.disabled {
+  cursor: default;
+  color: #7d7d7d;
+}.sp-navigation .sp-item .sp-link.disabled:hover {
+  background-color: transparent;
 }.sp-navigation .sp-item .sp-link.dark:hover {
   background-color: var(--sp-dark);
   color: #fff;
 }.sp-navigation .sp-item .sp-numlink {
   display: flex;
-  width: 23.5px;
-  height: 23.5px;
-  padding-bottom: 10px;
+  width: 24px;
+  height: 24px;
+  padding: 20px 21px 20px 20px;
   border-radius: 25px;
   justify-content: center;
   align-items: center;
@@ -103,6 +121,7 @@
   background-color: var(--sp-active-mark-color);
 }.sp-searchbox-wrapper {
   display: flex;
+  align-items: center;
 }.sp-searchbox {
   outline: none;
   padding: 10px 15px 10px 10px;
@@ -116,6 +135,5 @@
   box-shadow: 0 0 0 2px var(--sp-default-border-color);
 }.sp-searchbox-icon {
   margin-left: -30px;
-  margin-top: 6px;
   color: var(--sp-grey-color);
 }
diff --git a/components/index.html b/components/index.html
@@ -32,11 +32,11 @@
         font-weight: 400;
 
 
-        font-synthesis: none;
+        /* font-synthesis: none;
         text-rendering: optimizeLegibility;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        -webkit-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%; */
       }
 
       .custom-class {

diff --git a/components/src/components/helpers.js b/components/src/components/helpers.js
@@ -8,9 +8,9 @@ const getPaging = (useStore, paging) => {
   return useStore ? toRefs(paging) : toRefs(paging.state)
 }
 
-const densePadding = { padding: '6px 12px' }
+const largePadding = { padding: '10px 15px' }
 
 const iconSet = 'material-icons-round'
 
-export { setPagingState, getPaging, densePadding, iconSet }
+export { setPagingState, getPaging, largePadding, iconSet }
 
diff --git a/components/src/components/input/searchbox.css b/components/src/components/input/searchbox.css
@@ -1,5 +1,6 @@
 .sp-searchbox-wrapper {
   display: flex;
+  align-items: center;
 }
 
 .sp-searchbox {
@@ -19,6 +20,5 @@
 
 .sp-searchbox-icon {
   margin-left: -30px;
-  margin-top: 6px;
   color: var(--sp-grey-color);
 }
diff --git a/components/src/components/navigation/nav.css b/components/src/components/navigation/nav.css
@@ -16,19 +16,30 @@
   cursor: pointer;
   border-radius: 50%;
   transition: .2s;
+  background-color: transparent;
+  border: none;
   /* border: var(--sp-default-border); */
 }
 
+.sp-navigation .sp-item .sp-link.disabled {
+  cursor: default;
+  color: #7d7d7d;
+}
+
+.sp-navigation .sp-item .sp-link.disabled:hover {
+  background-color: transparent;
+}
+
 .sp-navigation .sp-item .sp-link.dark:hover {
   background-color: var(--sp-dark);
   color: #fff;
 }
 
 .sp-navigation .sp-item .sp-numlink {
   display: flex;
-  width: 23.5px;
-  height: 23.5px;
-  padding-bottom: 10px;
+  width: 24px;
+  height: 24px;
+  padding: 20px 21px 20px 20px;
   border-radius: 25px;
   justify-content: center;
   align-items:center;

diff --git a/components/src/components/navigation/nav.js b/components/src/components/navigation/nav.js
@@ -46,6 +46,10 @@ export default defineComponent({
     // for CDN version
     onMounted(resetModelValue)
 
+    const disableLink = link => {
+
+    }
+
     const createList = (content, goTo, ...customClass) => {
       return h('li', { 
         class: 'sp-item',
@@ -56,15 +60,18 @@ export default defineComponent({
           }
         }
       }, 
-        h('a', { class: ['sp-link', ...customClass] }, content)
+        h('button', { class: ['sp-link', ...customClass] }, content)
       )
     }
 
     // Page navigation
     const navLinks = (icon, target) => {
       return createList(h('span', {
           class: iconSet
-        }, icon), target, props.dark ? 'dark' : '', props.customNavigationClass
+        }, icon), 
+        target, 
+        props.paging.isDisabled(target), 
+        props.dark ? 'dark' : '', props.customNavigationClass
       )
     }   
 

diff --git a/components/src/components/select/select.css b/components/src/components/select/select.css
@@ -13,21 +13,36 @@
 
 .sp-select span {
   float: right;
-  margin-left: 20px;
+  margin-right: -10px;
+  transition: .2s;
+}
+
+.sp-select.active span {
+  rotate: 180deg;
 }
 
 .sp-select-options {
   background-color: #fff;
   border-radius: var(--sp-default-border-radius);
   box-shadow: var(--sp-default-box-shadow);
-  margin-top: 3px;
+  margin-top: -40px;
   list-style: none;
   padding: 0;
   text-align: left;
   overflow: auto;
-  max-height: 200px;
+  max-height: 50px;
   position: absolute;
   z-index: 999;
+  transition: .2s;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.sp-select-options.active {
+  margin-top: 3px;
+  opacity: 1;
+  visibility: visible;
+  max-height: 250px;
 }
 
 .sp-select-options.dark {