fix: 按照交互稿修复组件样式

dev-demos/layer/control/layerControl.tsx

@@ -62,7 +62,7 @@ const Demo: FunctionComponent = () => {
           .then((res) => res.json())
           .then((data) => {
             const chinaPolygonLayer = new PolygonLayer({
-              name: '中国填充图层',
+              name: '中国填充',
               autoFit: true,
             })
               .source(data)
@@ -79,7 +79,7 @@ const Demo: FunctionComponent = () => {
               });
             //  图层边界
             const layer2 = new LineLayer({
-              name: '中国边框图层',
+              name: '中国边框',
               zIndex: 2,
             })
               .source(data)

packages/component/src/control/baseControl/buttonControl.ts

@@ -7,6 +7,7 @@ export interface IButtonControlOption extends IControlOption {
   btnIcon?: HTMLElement | SVGElement;
   btnText?: string;
   title?: string;
+  vertical?: boolean;
 }
 
 export default abstract class ButtonControl<
@@ -121,6 +122,11 @@ export default abstract class ButtonControl<
    * @param newText
    */
   public setBtnText(newText: O['btnText']) {
+    if (!this.button) {
+      return;
+    }
+    DOM.removeClass(this.button, 'l7-button-control--row');
+    DOM.removeClass(this.button, 'l7-button-control--column');
     if (newText) {
       let btnText = this.buttonText;
       if (!btnText) {
@@ -129,6 +135,12 @@ export default abstract class ButtonControl<
         this.buttonText = btnText;
       }
       btnText.innerText = newText;
+      DOM.addClass(
+        this.button,
+        this.controlOption.vertical
+          ? 'l7-button-control--column'
+          : 'l7-button-control--row',
+      );
     } else if (!newText && this.buttonText) {
       DOM.remove(this.buttonText);
       this.buttonText = undefined;

packages/component/src/control/baseControl/selectControl.ts

@@ -109,8 +109,11 @@ export default abstract class SelectControl<
     const isImageOptions = this.isImageOptions();
     const content = DOM.create(
       'div',
-      isImageOptions ? 'l7-select-control-image' : 'l7-select-control-normal',
+      isImageOptions ? 'l7-select-control--image' : 'l7-select-control--normal',
     ) as HTMLElement;
+    if (this.getIsMultiple()) {
+      DOM.addClass(content, 'l7-select-control--multiple');
+    }
     const optionsDOMList = options.map((option, optionIndex) => {
       const optionDOM = isImageOptions
         ? // @ts-ignore

packages/component/src/control/exportImage.ts

@@ -25,7 +25,7 @@ export default class ExportImage extends ButtonControl<
     return {
       ...super.getDefault(option),
       title: '导出图片',
-      btnIcon: createL7Icon('l7-icon-tupian'),
+      btnIcon: createL7Icon('l7-icon-export-picture'),
       imageType: 'png',
     };
   }

packages/component/src/control/fullscreen.ts

@@ -69,9 +69,9 @@ export default class Fullscreen extends ButtonControl<
     return {
       ...super.getDefault(option),
       title: '全屏',
-      btnIcon: createL7Icon('l7-icon-FullScreen'),
+      btnIcon: createL7Icon('l7-icon-fullscreen'),
       exitTitle: '退出全屏',
-      exitBtnIcon: createL7Icon('l7-icon-ExitFullScreen'),
+      exitBtnIcon: createL7Icon('l7-icon-exit-fullscreen'),
     };
   }
 

packages/component/src/control/layerControl.ts

@@ -22,7 +22,7 @@ export default class LayerControl extends SelectControl<ILayerControlOption> {
     return {
       ...super.getDefault(option),
       title: '图层控制',
-      btnIcon: createL7Icon('l7-icon-tuceng'),
+      btnIcon: createL7Icon('l7-icon-layer'),
       options: [],
     };
   }

packages/component/src/control/navigation.ts

@@ -21,7 +21,7 @@ export default class Navigation extends ButtonControl<
     return {
       ...super.getDefault(option),
       title: '定位',
-      btnIcon: createL7Icon('l7-icon-gps-fixed'),
+      btnIcon: createL7Icon('l7-icon-reposition'),
       zoom: -1,
     };
   }

packages/component/src/control/zoom.ts

@@ -1,10 +1,11 @@
 import { DOM } from '@antv/l7-utils';
+import { createL7Icon } from '../utils/icon';
 import { Control, IControlOption } from './baseControl';
 
 export interface IZoomControlOption extends IControlOption {
-  zoomInText: string;
+  zoomInText: Element | string;
   zoomInTitle: string;
-  zoomOutText: string;
+  zoomOutText: Element | string;
   zoomOutTitle: string;
 }
 
@@ -19,9 +20,9 @@ export default class Zoom extends Control<IZoomControlOption> {
     return {
       ...super.getDefault(option),
       name: 'zoom',
-      zoomInText: '+',
+      zoomInText: createL7Icon('l7-icon-enlarge'),
       zoomInTitle: 'Zoom in',
-      zoomOutText: '&#x2212;',
+      zoomOutText: createL7Icon('l7-icon-narrow'),
       zoomOutTitle: 'Zoom out',
     };
   }
@@ -102,14 +103,18 @@ export default class Zoom extends Control<IZoomControlOption> {
   };
 
   private createButton(
-    html: string,
+    html: Element | string,
     tile: string,
     className: string,
     container: HTMLElement,
     fn: (...arg: any[]) => any,
   ) {
     const link = DOM.create('button', className, container) as HTMLLinkElement;
-    link.innerHTML = html;
+    if (typeof html === 'string') {
+      link.innerHTML = html;
+    } else {
+      link.append(html);
+    }
     link.title = tile;
     link.addEventListener('click', fn);
     return link;

packages/component/src/css/button.less

@@ -13,8 +13,37 @@
   justify-content: center;
   align-items: center;
   padding: 0 ((@l7-btn-control-size - @l7-btn-icon-size) / 2);
-  box-shadow: 0 0 6px @l7-btn-control-shadow-color;
+  box-shadow: @l7-control-shadow;
   line-height: 16px;
+
+  .l7-iconfont {
+    fill: @l7-control-font-color;
+    color: @l7-control-font-color;
+    width: @l7-btn-icon-size;
+    height: @l7-btn-icon-size;
+  }
+
+  &.l7-button-control--row {
+    padding: 0 16px 0 13px;
+
+    * + .l7-button-control__text {
+      margin-left: 8px;
+    }
+  }
+
+  &.l7-button-control--column {
+    height: @l7-btn-column-height;
+    flex-direction: column;
+    .l7-iconfont {
+      margin-top: 3px;
+    }
+    .l7-button-control__text {
+      margin-top: 3px;
+      font-size: 10px;
+      transform: scale(0.83333);
+    }
+  }
+
   &:not(:disabled) {
     &:hover {
       background-color: @l7-btn-control-bg-hover-color;
@@ -27,6 +56,10 @@
     background-color: @l7-btn-control-disabled-bg-color;
     color: @l7-btn-control-disabled-font-color;
     cursor: not-allowed;
+    .l7-iconfont {
+      fill: @l7-btn-control-disabled-font-color;
+      color: @l7-btn-control-disabled-font-color;
+    }
     &:hover {
       background-color: @l7-btn-control-disabled-bg-color;
     }
@@ -34,13 +67,4 @@
       background-color: @l7-btn-control-disabled-bg-color;
     }
   }
-
-  * + .l7-button-control__text {
-    margin-left: 4px;
-  }
-
-  .l7-iconfont {
-    width: @l7-btn-icon-size;
-    height: @l7-btn-icon-size;
-  }
 }

packages/component/src/css/index.css

@@ -60,7 +60,7 @@
   z-index: 800;
   float: left;
   clear: both;
-  color: #646464;
+  color: #595959;
   font-size: 12px;
   pointer-events: visiblePainted;
   /* IE 9-10 doesn't have auto */
@@ -77,7 +77,7 @@
   pointer-events: none;
 }
 .l7-control-container .l7-top .l7-control {
-  margin-top: 10px;
+  margin-top: 8px;
 }
 .l7-control-container .l7-right {
   right: 0;
@@ -87,7 +87,7 @@
   pointer-events: none;
 }
 .l7-control-container .l7-right .l7-control {
-  margin-right: 10px;
+  margin-right: 8px;
 }
 .l7-control-container .l7-bottom {
   bottom: 0;
@@ -97,7 +97,7 @@
   pointer-events: none;
 }
 .l7-control-container .l7-bottom .l7-control {
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 .l7-control-container .l7-left {
   left: 0;
@@ -107,7 +107,7 @@
   pointer-events: none;
 }
 .l7-control-container .l7-left .l7-control {
-  margin-left: 10px;
+  margin-left: 8px;
 }
 .l7-control-container .l7-center {
   position: absolute;
@@ -123,8 +123,8 @@
   height: 100%;
 }
 .l7-control-container .l7-center .l7-control {
-  margin-right: 10px;
-  margin-bottom: 10px;
+  margin-right: 8px;
+  margin-bottom: 8px;
 }
 .l7-control-container .l7-row {
   flex-direction: row;
@@ -145,97 +145,121 @@
   align-items: flex-end;
 }
 .l7-button-control {
-  min-width: 30px;
-  height: 30px;
+  min-width: 28px;
+  height: 28px;
   background-color: #fff;
   border-width: 0;
-  border-radius: 4px;
+  border-radius: 2px;
   outline: 0;
   cursor: pointer;
   transition: all 0.2s;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0 7px;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+  padding: 0 6px;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
   line-height: 16px;
 }
-.l7-button-control:not(:disabled):hover {
-  background-color: #f7f7f7;
-}
-.l7-button-control:not(:disabled):active {
-  background-color: #d9d9d9;
-}
-.l7-button-control:disabled {
-  background-color: #f0f0f0;
-  color: #b1b1b1;
-  cursor: not-allowed;
-}
-.l7-button-control:disabled:hover {
-  background-color: #f0f0f0;
-}
-.l7-button-control:disabled:active {
-  background-color: #f0f0f0;
-}
-.l7-button-control * + .l7-button-control__text {
-  margin-left: 4px;
-}
 .l7-button-control .l7-iconfont {
+  fill: #595959;
+  color: #595959;
   width: 16px;
   height: 16px;
 }
+.l7-button-control.l7-button-control--row {
+  padding: 0 16px 0 13px;
+}
+.l7-button-control.l7-button-control--row * + .l7-button-control__text {
+  margin-left: 8px;
+}
+.l7-button-control.l7-button-control--column {
+  height: 44px;
+  flex-direction: column;
+}
+.l7-button-control.l7-button-control--column .l7-iconfont {
+  margin-top: 3px;
+}
+.l7-button-control.l7-button-control--column .l7-button-control__text {
+  margin-top: 3px;
+  font-size: 10px;
+  transform: scale(0.83333);
+}
+.l7-button-control:not(:disabled):hover {
+  background-color: #f3f3f3;
+}
+.l7-button-control:not(:disabled):active {
+  background-color: #f3f3f3;
+}
+.l7-button-control:disabled {
+  background-color: #fbfbfb;
+  color: #bbbbbb;
+  cursor: not-allowed;
+}
+.l7-button-control:disabled .l7-iconfont {
+  fill: #bbbbbb;
+  color: #bbbbbb;
+}
+.l7-button-control:disabled:hover {
+  background-color: #fbfbfb;
+}
+.l7-button-control:disabled:active {
+  background-color: #fbfbfb;
+}
 .l7-popper {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 5;
+  color: #595959;
 }
 .l7-popper.l7-popper-hide {
   display: none;
 }
 .l7-popper .l7-popper-content {
-  min-height: 30px;
+  min-height: 28px;
   background: #fff;
-  border-radius: 4px;
+  border-radius: 2px;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
 }
 .l7-popper .l7-popper-arrow {
   width: 0;
   height: 0;
-  border-width: 6px;
+  border-width: 4px;
   border-style: solid;
   border-top-color: transparent;
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
 }
 .l7-popper.l7-popper-left {
   flex-direction: row;
 }
 .l7-popper.l7-popper-left .l7-popper-arrow {
   border-left-color: #fff;
-  margin: 9px 0;
+  margin: 10px 0;
 }
 .l7-popper.l7-popper-right {
   flex-direction: row-reverse;
 }
 .l7-popper.l7-popper-right .l7-popper-arrow {
   border-right-color: #fff;
-  margin: 9px 0;
+  margin: 10px 0;
 }
 .l7-popper.l7-popper-top {
   flex-direction: column;
 }
 .l7-popper.l7-popper-top .l7-popper-arrow {
   border-top-color: #fff;
-  margin: 0 9px;
+  margin: 0 10px;
 }
 .l7-popper.l7-popper-bottom {
   flex-direction: column-reverse;
 }
 .l7-popper.l7-popper-bottom .l7-popper-arrow {
   border-bottom-color: #fff;
-  margin: 0 9px;
+  margin: 0 10px;
 }
 .l7-popper.l7-popper-start {
   align-items: flex-start;
@@ -243,33 +267,41 @@
 .l7-popper.l7-popper-end {
   align-items: flex-end;
 }
-.l7-select-control-normal .l7-select-control-item {
-  height: 30px;
+.l7-select-control--normal {
+  padding: 4px 0;
+}
+.l7-select-control--normal .l7-select-control-item {
+  height: 24px;
+  line-height: 24px;
   display: flex;
   align-items: center;
-  padding: 0 10px;
-  font-size: 14px;
+  padding: 0 16px;
+  font-size: 12px;
 }
-.l7-select-control-normal .l7-select-control-item > * + * {
+.l7-select-control--normal .l7-select-control-item > * + * {
   margin-left: 6px;
 }
-.l7-select-control-normal .l7-select-control-item:hover {
-  background-color: #f7f7f7;
+.l7-select-control--normal .l7-select-control-item input[type='checkbox'] {
+  height: 14px;
+  width: 14px;
 }
-.l7-select-control-normal .l7-select-control-item.l7-select-control-item-active {
-  color: #0370fe;
+.l7-select-control--normal .l7-select-control-item:hover {
+  background-color: #f3f3f3;
 }
-.l7-select-control-image {
+.l7-select-control--image {
   padding: 12px 12px 0 12px;
-  width: 500px;
+  width: 474px;
+  height: 320px;
+  overflow: auto;
   display: flex;
   flex-wrap: wrap;
   box-sizing: border-box;
 }
-.l7-select-control-image .l7-select-control-item {
+.l7-select-control--image .l7-select-control-item {
   margin-right: 12px;
-  border-radius: 4px;
-  border: 2px solid #fff;
+  border-radius: 2px;
+  overflow: hidden;
+  border: 1px solid #fff;
   box-sizing: content-box;
   width: calc((100% - 36px) / 3);
   display: flex;
@@ -279,24 +311,28 @@
   position: relative;
   font-size: 12px;
 }
-.l7-select-control-image .l7-select-control-item input[type='checkbox'] {
+.l7-select-control--image .l7-select-control-item img {
+  width: 142px;
+  height: 80px;
+}
+.l7-select-control--image .l7-select-control-item input[type='checkbox'] {
   position: absolute;
   right: 0;
   top: 0;
 }
-.l7-select-control-image .l7-select-control-item .l7-select-control-item-row {
+.l7-select-control--image .l7-select-control-item .l7-select-control-item-row {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 4px 0;
+  line-height: 26px;
 }
-.l7-select-control-image .l7-select-control-item .l7-select-control-item-row > * + * {
-  margin-left: 6px;
+.l7-select-control--image .l7-select-control-item .l7-select-control-item-row > * + * {
+  margin-left: 8px;
 }
-.l7-select-control-image .l7-select-control-item.l7-select-control-item-active {
+.l7-select-control--image .l7-select-control-item.l7-select-control-item-active {
   border-color: #0370fe;
 }
-.l7-select-control-image .l7-select-control-item:nth-child(3n) {
+.l7-select-control--image .l7-select-control-item:nth-child(3n) {
   margin-right: 0;
 }
 .l7-select-control-item {
@@ -306,6 +342,9 @@
   margin: 0;
   cursor: pointer;
 }
+.l7-select-control--multiple .l7-select-control-item:hover {
+  background-color: transparent;
+}
 .l7-control-logo {
   width: 89px;
   height: 16px;
@@ -323,14 +362,14 @@
 }
 .l7-control-mouse-location {
   background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 2px;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
   padding: 2px 4px;
   min-width: 130px;
 }
 .l7-control-zoom {
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
   overflow: hidden;
 }
 .l7-control-zoom .l7-button-control {
@@ -338,8 +377,12 @@
   border-radius: 0;
   font-size: 16px;
 }
+.l7-control-zoom .l7-button-control .l7-iconfont {
+  width: 14px;
+  height: 14px;
+}
 .l7-control-zoom .l7-button-control:first-child {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #f0f0f0;
 }
 .l7-control-scale {
   display: flex;
@@ -349,7 +392,7 @@
   box-sizing: border-box;
   padding: 2px 5px 1px;
   overflow: hidden;
-  color: #646464;
+  color: #595959;
   font-size: 10px;
   line-height: 1.1;
   white-space: nowrap;

packages/component/src/css/mouseLocation.less

@@ -3,7 +3,7 @@
 .l7-control-mouse-location {
   background-color: @l7-control-bg-color;
   border-radius: @l7-btn-control-border-radius;
-  box-shadow: 0 0 6px @l7-btn-control-shadow-color;
+  box-shadow: @l7-control-shadow;
   padding: 2px 4px;
   min-width: 130px;
 }

packages/component/src/css/popper.less

@@ -6,6 +6,7 @@
   justify-content: center;
   align-items: center;
   z-index: 5;
+  color: @l7-control-font-color;
   &.l7-popper-hide {
     display: none;
   }
@@ -13,6 +14,7 @@
     min-height: @l7-btn-control-size;
     background: @l7-popper-control-bg-color;
     border-radius: @l7-btn-control-border-radius;
+    box-shadow: @l7-control-shadow;
   }
   .l7-popper-arrow {
     width: 0;
@@ -23,6 +25,7 @@
     border-bottom-color: transparent;
     border-left-color: transparent;
     border-right-color: transparent;
+    box-shadow: @l7-control-shadow;
   }
   &.l7-popper-left {
     flex-direction: row;

packages/component/src/css/select.less

@@ -1,34 +1,40 @@
 @import 'variables';
 
-.l7-select-control-normal {
+.l7-select-control--normal {
+  padding: 4px 0;
   .l7-select-control-item {
-    height: @l7-btn-control-size;
+    height: 24px;
+    line-height: 24px;
     display: flex;
     align-items: center;
-    padding: 0 10px;
-    font-size: 14px;
+    padding: 0 16px;
+    font-size: 12px;
     > * + * {
       margin-left: 6px;
     }
+    input[type='checkbox'] {
+      height: 14px;
+      width: 14px;
+    }
     &:hover {
       background-color: @l7-btn-control-bg-hover-color;
     }
-    &.l7-select-control-item-active {
-      color: @l7-select-control-active-color;
-    }
   }
 }
 
-.l7-select-control-image {
+.l7-select-control--image {
   padding: 12px 12px 0 12px;
   width: @l7-select-control-image-popper-width;
+  height: 320px;
+  overflow: auto;
   display: flex;
   flex-wrap: wrap;
   box-sizing: border-box;
   .l7-select-control-item {
     margin-right: 12px;
     border-radius: @l7-btn-control-border-radius;
-    border: 2px solid @l7-popper-control-bg-color;
+    overflow: hidden;
+    border: 1px solid @l7-popper-control-bg-color;
     box-sizing: content-box;
     width: calc((100% - 36px) / 3);
     display: flex;
@@ -37,6 +43,10 @@
     margin-bottom: 12px;
     position: relative;
     font-size: 12px;
+    img {
+      width: 142px;
+      height: 80px;
+    }
     input[type='checkbox'] {
       position: absolute;
       right: 0;
@@ -46,9 +56,9 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      margin: 4px 0;
+      line-height: 26px;
       > * + * {
-        margin-left: 6px;
+        margin-left: 8px;
       }
     }
     &.l7-select-control-item-active {
@@ -67,3 +77,9 @@
     cursor: pointer;
   }
 }
+
+.l7-select-control--multiple {
+  .l7-select-control-item:hover {
+    background-color: transparent;
+  }
+}

packages/component/src/css/variables.less

@@ -1,27 +1,28 @@
 // Control
-@l7-control-space: 10px;
+@l7-control-space: 8px;
 @l7-control-font-size: 12px;
-@l7-control-font-color: #646464;
+@l7-control-font-color: #595959;
 @l7-control-bg-color: #fff;
+@l7-control-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
 
 // ButtonControl
 @l7-btn-control-bg-color: @l7-control-bg-color;
-@l7-btn-control-bg-hover-color: darken(@l7-control-bg-color, 3%);
-@l7-btn-control-bg-active-color: darken(@l7-control-bg-color, 15%);
-@l7-btn-control-shadow-color: rgba(0, 0, 0, 0.3);
-@l7-btn-control-size: 30px;
+@l7-btn-control-bg-hover-color: #f3f3f3;
+@l7-btn-control-bg-active-color: @l7-btn-control-bg-hover-color;
+@l7-btn-control-size: 28px;
 @l7-btn-icon-size: 16px;
-@l7-btn-control-border-radius: 4px;
-@l7-btn-control-disabled-bg-color: darken(@l7-control-bg-color, 6%);
-@l7-btn-control-disabled-font-color: lighten(@l7-control-font-color, 30%);
-@l7-btn-border-color: #ddd;
+@l7-btn-control-border-radius: 2px;
+@l7-btn-control-disabled-bg-color: #fbfbfb;
+@l7-btn-control-disabled-font-color: #bbbbbb;
+@l7-btn-border-color: #f0f0f0;
+@l7-btn-column-height: 44px;
 
 // PopperControl
 @l7-popper-control-bg-color: @l7-btn-control-bg-color;
-@l7-popper-control-arrow-size: 6px;
+@l7-popper-control-arrow-size: 4px;
 
 // SelectControl
 @l7-select-control-active-color: #0370fe;
-@l7-select-control-image-popper-width: 500px;
+@l7-select-control-image-popper-width: 474px;
 
 @position-list: top, right, bottom, left;

packages/component/src/css/zoom.less

@@ -1,13 +1,19 @@
 @import 'variables';
 
+@zoom-icon-size: 14px;
+
 .l7-control-zoom {
-  box-shadow: 0 0 6px @l7-btn-control-shadow-color;
+  box-shadow: @l7-control-shadow;
   border-radius: @l7-btn-control-border-radius;
   overflow: hidden;
   .l7-button-control {
     box-shadow: 0 0 0;
     border-radius: 0;
     font-size: @l7-btn-icon-size;
+    .l7-iconfont {
+      width: @zoom-icon-size;
+      height: @zoom-icon-size;
+    }
     &:first-child {
       border-bottom: 1px solid @l7-btn-border-color;
     }

packages/component/src/index.ts

@@ -3,7 +3,7 @@ import MarkerLayer from './marker-layer';
 
 import './assets/iconfont/iconfont.js';
 // 引入样式
-import './css/index.css';
+import './css/index.less';
 
 export * from './control/baseControl';
 export * from './control/logo';