feat: improve cursor

0muxi0 · Jan 11, 2020 · 2eb6807 · 2eb6807
1 parent 5cbb9e2
commit 2eb6807
Show file tree

Hide file tree

Showing 33 changed files with 97 additions and 24 deletions.
diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less
@@ -14,6 +14,7 @@
     text-align: center;
     background-color: @action-sheet-item-background;
     border: none;
+    cursor: pointer;
 
     &:active {
       background-color: @active-color;
@@ -23,13 +24,22 @@
   &__item {
     height: @action-sheet-item-height;
 
+    &--loading,
     &--disabled {
       color: @action-sheet-item-disabled-text-color;
 
       &:active {
         background-color: @action-sheet-item-background;
       }
     }
+
+    &--disabled {
+      cursor: not-allowed;
+    }
+
+    &--loading {
+      cursor: default;
+    }
   }
 
   &__subname {

diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx
@@ -70,17 +70,17 @@ function ActionSheet(
   }
 
   function Option(item: ActionSheetItem, index: number) {
-    const disabled = item.disabled || item.loading;
+    const { disabled, loading, callback } = item;
 
     function onClickOption(event: MouseEvent) {
       event.stopPropagation();
 
-      if (item.disabled || item.loading) {
+      if (disabled || loading) {
         return;
       }
 
-      if (item.callback) {
-        item.callback(item);
+      if (callback) {
+        callback(item);
       }
 
       emit(ctx, 'select', item, index);
@@ -91,7 +91,7 @@ function ActionSheet(
     }
 
     function OptionContent() {
-      if (item.loading) {
+      if (loading) {
         return <Loading size="20px" />;
       }
 
@@ -104,7 +104,7 @@ function ActionSheet(
     return (
       <button
         type="button"
-        class={[bem('item', { disabled }), item.className, BORDER_TOP]}
+        class={[bem('item', { disabled, loading }), item.className, BORDER_TOP]}
         style={{ color: item.color }}
         onClick={onClickOption}
       >

diff --git a/src/action-sheet/test/__snapshots__/index.spec.js.snap b/src/action-sheet/test/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`callback events 1`] = `
-<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top">
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading van-hairline--top">
     <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
   </button><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button><button type="button" class="van-action-sheet__cancel">Cancel</button></div>
 `;

diff --git a/src/collapse-item/index.less b/src/collapse-item/index.less
@@ -22,6 +22,8 @@
     }
 
     &--disabled {
+      cursor: not-allowed;
+
       &,
       & .van-cell__right-icon {
         color: @collapse-item-title-disabled-color;

diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less
@@ -12,6 +12,7 @@
     align-items: center;
     justify-content: center;
     min-width: 0; // hack for flex ellipsis
+    cursor: pointer;
 
     &:active {
       opacity: @active-opacity;

diff --git a/src/field/index.less b/src/field/index.less
@@ -81,6 +81,7 @@
   &__clear {
     color: @field-clear-icon-color;
     font-size: @field-clear-icon-size;
+    cursor: pointer;
   }
 
   &__left-icon .van-icon,

diff --git a/src/goods-action-icon/index.less b/src/goods-action-icon/index.less
@@ -11,6 +11,7 @@
   line-height: 1;
   text-align: center;
   background-color: @white;
+  cursor: pointer;
 
   &:active {
     background-color: @goods-action-icon-active-color;

diff --git a/src/grid-item/index.less b/src/grid-item/index.less
@@ -39,8 +39,12 @@
       }
     }
 
-    &--clickable:active {
-      background-color: @grid-item-content-active-color;
+    &--clickable {
+      cursor: pointer;
+
+      &:active {
+        background-color: @grid-item-content-active-color;
+      }
     }
   }
 

diff --git a/src/index-bar/index.less b/src/index-bar/index.less
@@ -9,6 +9,7 @@
     flex-direction: column;
     text-align: center;
     transform: translateY(-50%);
+    cursor: pointer;
     user-select: none;
   }
 

diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less
@@ -43,6 +43,7 @@
     position: absolute;
     bottom: 0;
     font-size: @font-size-md;
+    cursor: pointer;
   }
 
   &__left {

diff --git a/src/notice-bar/index.less b/src/notice-bar/index.less
@@ -19,6 +19,7 @@
 
   &__right-icon {
     text-align: right;
+    cursor: pointer;
   }
 
   &__wrap {

diff --git a/src/number-keyboard/index.less b/src/number-keyboard/index.less
@@ -34,6 +34,7 @@
     padding: @number-keyboard-close-padding;
     color: @number-keyboard-close-color;
     font-size: @number-keyboard-close-font-size;
+    cursor: pointer;
 
     &:active {
       background-color: @number-keyboard-key-active-color;
@@ -69,6 +70,7 @@
   line-height: @number-keyboard-key-height;
   text-align: center;
   vertical-align: middle;
+  cursor: pointer;
 
   &::after {
     border-width: @border-width-base @border-width-base 0 0;

diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue
@@ -39,7 +39,7 @@ export default {
   i18n: {
     'zh-CN': {
       title2: '简单模式',
-      title3: '',
+      title3: '显示省略号',
       prevText: '上一页',
       nextText: '下一页'
     },

diff --git a/src/pagination/index.less b/src/pagination/index.less
@@ -13,6 +13,7 @@
     height: @pagination-height;
     color: @pagination-item-default-color;
     background-color: @pagination-background-color;
+    cursor: pointer;
     user-select: none;
 
     &:active {
@@ -28,13 +29,6 @@
       border-right-width: @border-width-base;
     }
 
-    &--disabled,
-    &--disabled:active {
-      color: @pagination-item-disabled-color;
-      background-color: @pagination-item-disabled-background-color;
-      opacity: @pagination-disabled-opacity;
-    }
-
     &--active {
       color: @white;
       background-color: @pagination-item-default-color;
@@ -44,6 +38,17 @@
   &__prev,
   &__next {
     padding: 0 @padding-base;
+    cursor: pointer;
+  }
+
+  &__item--disabled {
+    &,
+    &:active {
+      color: @pagination-item-disabled-color;
+      background-color: @pagination-item-disabled-background-color;
+      cursor: not-allowed;
+      opacity: @pagination-disabled-opacity;
+    }
   }
 
   &__page {

diff --git a/src/password-input/index.less b/src/password-input/index.less
@@ -24,6 +24,7 @@
     display: flex;
     width: 100%;
     height: @password-input-height;
+    cursor: pointer;
 
     &::after {
       border-radius: @password-input-border-radius;

diff --git a/src/picker/index.less b/src/picker/index.less
@@ -37,7 +37,7 @@
   &__columns {
     position: relative;
     display: flex;
-    cursor: pointer;
+    cursor: grab;
   }
 
   &__loading {

diff --git a/src/rate/index.js b/src/rate/index.js
@@ -201,7 +201,14 @@ export default createComponent({
 
   render() {
     return (
-      <div class={bem()} tabindex="0" role="radiogroup">
+      <div
+        class={bem({
+          readonly: this.readonly,
+          disabled: this.disabled
+        })}
+        tabindex="0"
+        role="radiogroup"
+      >
         {this.list.map((status, index) => this.genStar(status, index))}
       </div>
     );

diff --git a/src/rate/index.less b/src/rate/index.less
@@ -2,6 +2,7 @@
 
 .van-rate {
   display: inline-flex;
+  cursor: pointer;
   user-select: none;
 
   &__item {
@@ -25,4 +26,12 @@
       overflow: hidden;
     }
   }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
+
+  &--readonly {
+    cursor: default;
+  }
 }
diff --git a/src/rate/test/__snapshots__/demo.spec.js.snap b/src/rate/test/__snapshots__/demo.spec.js.snap
@@ -80,7 +80,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div tabindex="0" role="radiogroup" class="van-rate">
+    <div tabindex="0" role="radiogroup" class="van-rate van-rate--disabled">
       <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189);">
           <!----></i></div>
       <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189);">
@@ -94,7 +94,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div tabindex="0" role="radiogroup" class="van-rate">
+    <div tabindex="0" role="radiogroup" class="van-rate van-rate--readonly">
       <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
           <!----></i></div>
       <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">

diff --git a/src/search/index.less b/src/search/index.less
@@ -53,6 +53,8 @@
     color: @search-action-text-color;
     font-size: @search-action-font-size;
     line-height: @search-input-height;
+    cursor: pointer;
+    user-select: none;
 
     &:active {
       background-color: @active-color;

diff --git a/src/sidebar-item/index.less b/src/sidebar-item/index.less
@@ -11,6 +11,7 @@
   word-wrap: break-word;
   background-color: @sidebar-background-color;
   border-left: 3px solid transparent;
+  cursor: pointer;
   user-select: none;
 
   &__text {
@@ -43,6 +44,7 @@
 
   &--disabled {
     color: @sidebar-disabled-text-color;
+    cursor: not-allowed;
 
     &:active {
       background-color: @sidebar-background-color;

diff --git a/src/sku/index.less b/src/sku/index.less
@@ -147,6 +147,7 @@
       line-height: 16px;
       vertical-align: middle;
       border-radius: @border-radius-md;
+      cursor: pointer;
 
       &::before {
         position: absolute;
@@ -184,6 +185,7 @@
       &--disabled {
         color: @gray-5;
         background: @active-color;
+        cursor: not-allowed;
 
         .van-sku-row__item-img {
           opacity: .3;

diff --git a/src/slider/index.less b/src/slider/index.less
@@ -4,6 +4,7 @@
   position: relative;
   background-color: @slider-inactive-background-color;
   border-radius: @border-radius-max;
+  cursor: pointer;
 
   // use pseudo element to expand click area
   &::before {
@@ -34,11 +35,17 @@
       top: 50%;
       right: 0;
       transform: translate3d(50%, -50%, 0);
+      cursor: grab;
     }
   }
 
   &--disabled {
+    cursor: not-allowed;
     opacity: @slider-disabled-opacity;
+
+    .van-slider__button-wrapper {
+      cursor: not-allowed;
+    }
   }
 
   &--vertical {

diff --git a/src/stepper/index.less b/src/stepper/index.less
@@ -16,6 +16,7 @@
     vertical-align: middle;
     background-color: @stepper-background-color;
     border: 0;
+    cursor: pointer;
 
     &::before {
       width: 13px;
@@ -46,6 +47,7 @@
     &--disabled {
       color: @stepper-button-disabled-icon-color;
       background-color: @stepper-button-disabled-color;
+      cursor: not-allowed;
 
       &:active {
         background-color: @stepper-button-disabled-color;

diff --git a/src/swipe-cell/index.less b/src/swipe-cell/index.less
@@ -3,6 +3,7 @@
 .van-swipe-cell {
   position: relative;
   overflow: hidden;
+  cursor: grab;
 
   &__wrapper {
     transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);

diff --git a/src/swipe/index.less b/src/swipe/index.less
@@ -3,7 +3,7 @@
 .van-swipe {
   position: relative;
   overflow: hidden;
-  cursor: pointer;
+  cursor: grab;
   user-select: none;
 
   &__track {

diff --git a/src/switch-cell/test/__snapshots__/demo.spec.js.snap b/src/switch-cell/test/__snapshots__/demo.spec.js.snap
@@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell van-cell--center van-switch-cell">
         <div class="van-cell__title"><span>标题</span></div>
         <div class="van-cell__value">
-          <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
+          <div role="switch" aria-checked="true" class="van-switch van-switch--on van-switch--loading" style="font-size: 24px;">
             <div class="van-switch__node">
               <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
             </div>