Merge pull request #1249 from 2betop/style

样式优化
2024-11-29 18:48:45 +08:00 · 2020-12-25 10:50:15 +08:00 · 2020-12-25 10:50:15 +08:00 · 00df293ac0
commit 00df293ac0
parent 94b8328cb2 5de38ac568
13 changed files with 144 additions and 102 deletions
--- a/docs/components/table.md
+++ b/docs/components/table.md
@ -560,7 +560,31 @@ order: 67

 - `mode` 可配置成 `popOver`、`dialog` 或者 `drawer`。 默认为 `popOver`。
 - `size` 当配置成 `dialog` 或者 `drawer` 的时候有用。
- `position` 配置弹出位置，只有 `popOver` 模式有用。可选参数：`center`、`left-top`、`right-top`、`left-bottom`、`right-bottom`、`fixed-center`、`fixed-left-top`、`fixed-right-top`、`fixed-left-bottom`、`fixed-right-bottom`。
+- `position` 配置弹出位置，只有 `popOver` 模式有用。
+  可选参数：
+
+  - `center`
+
+  - `left-top`
+  - `right-top`
+  - `left-bottom`
+  - `right-bottom`
+
+  atX-atY-myX-myY  
+  即：对齐目标的位置-对齐自己的位置
+
+  - `left-top-right-bottom` 在目标位置的左上角显示。
+  - `left-center-right-center` 在目标的左侧显示，垂直对齐。
+  - ...
+
+  固定位置
+
+  - `fixed-center`
+  - `fixed-left-top`
+  - `fixed-right-top`
+  - `fixed-left-bottom`
+  - `fixed-right-bottom`。
+
 - `offset` 默认 `{top: 0, left: 0}`，如果要来一定的便宜请设置这个。
 - `trigger` 触发弹出的条件。可配置为 `click` 或者 `hover`。默认为 `click`。
 - `showIcon` 是否显示图标。默认会有个放大形状的图标出现在列里面。如果配置成 false，则触发事件出现在列上就会触发弹出。
--- a/examples/components/App.tsx
+++ b/examples/components/App.tsx
@ -221,7 +221,7 @@ export class App extends React.PureComponent<{
            onClick={() => this.setState({offScreen: !this.state.offScreen})}
            className={`${theme.ns}Layout-offScreen-btn ${
              docPage ? 'DocLayout-offScreen-btn' : ''
-            } pull-left visible-xs`}
+            } pull-right visible-xs`}
          >
            <i className="bui-icon iconfont icon-collapse"></i>
          </div>
@ -247,7 +247,7 @@ export class App extends React.PureComponent<{
        <div
          className={`${theme.ns}Layout-headerBar ${
            docPage ? 'DocLayout-headerBar' : ''
-          } flex items-center`}
+          } pc:flex items-center`}
        >
          {docPage ? null : (
            <Button
--- a/examples/components/CRUD/PopOver.tsx
+++ b/examples/components/CRUD/PopOver.tsx
@ -21,7 +21,8 @@ export default {
          trigger: 'hover',
          showIcon: false,
          body: 'Popover 内容：${platform}',
-          position: 'right-bottom'
+          popOverClassName: 'min-w-0',
+          position: 'left-center-right-center right-center-left-center'
        }
      },
      {
--- a/examples/components/MdRenderer.tsx
+++ b/examples/components/MdRenderer.tsx
@ -196,11 +196,11 @@ export default function (doc) {
      ));
    }

-    handlePopOverClick(e: React.MouseEvent<any>) {
+    handlePopOverClick = (e: React.MouseEvent<any>) => {
      this.setState({headingPopover: false});
      e.stopPropagation();
      e.preventDefault();
-    }
+    };

    renderHeadingPopover() {
      return this.state.headingPopover ? (
--- a/examples/style.scss
+++ b/examples/style.scss
@ -242,14 +242,6 @@ body {
        left: 0;
      }
    }
-
-    &-offScreen-btn {
-      line-height: 64px;
-      padding: 0 20px;
-      cursor: pointer;
-      position: absolute;
-      left: 0;
-    }
  }

  .dark-Layout {
@ -309,6 +301,21 @@ body {
  }
 }

+.a-Layout-offScreen-btn,
+.cxd-Layout-offScreen-btn,
+.dark-Layout-offScreen-btn {
+  line-height: 50px;
+  padding: 0 10px;
+}
+
+.DocLayout-offScreen-btn {
+  line-height: 64px;
+  padding: 0 20px;
+  cursor: pointer;
+  position: absolute;
+  left: 0;
+}
+
 .Doc {
  height: 100%;

--- a/scss/_properties.scss
+++ b/scss/_properties.scss
@ -459,18 +459,7 @@
  --Combo--vertical-item-onHover-borderColor: var(--info);
  --Combo--vertical-item-paddingX: #{px2rem(10px)};
  --Combo--vertical-item-paddingY: #{px2rem(10px)};
-  --Combo--vertical-itemToolbar-bg: var(--info);
-  --Combo--vertical-itemToolbar-borderColor: #{darken($info, 5%)};
-  --Combo--vertical-itemToolbar-borderRadius: #{px2rem(3px)};
-  --Combo--vertical-itemToolbar-borderWidth: var(--borderWidth);
-  --Combo--vertical-itemToolbar-color: #{darken($white, 5%)};
-  --Combo--vertical-itemToolbar-height: #{px2rem(25px)};
-  --Combo--vertical-itemToolbar-onHover-color: var(--white);
-  --Combo--vertical-itemToolbar-positionRight: #{px2rem(5px)};
-  --Combo--vertical-itemToolbar-positionTop: var(
-    --Combo--vertical-itemToolbar-height
-  );
-  --Combo--vertical-itemToolbar-transion: all 0.25s ease-in-out;
+
  --Combo-addBtn-bg: var(--Button--info-bg);
  --Combo-addBtn-border: var(--Button--info-border);
  --Combo-addBtn-borderRadius: var(--Button-borderRadius);
--- a/scss/components/_remark.scss
+++ b/scss/components/_remark.scss
@ -19,7 +19,8 @@
    height: var(--Remark-width);
    line-height: 1;
    display: inline-flex;
-    vertical-align: top;
+    vertical-align: baseline;
+    align-self: center;
    align-items: center;
    justify-content: center;
    font-size: var(--fontSizeSm);
@ -28,6 +29,7 @@
    > svg {
      width: 100%;
      height: 100%;
+      display: block;
    }
  }

--- a/scss/components/form/_combo.scss
+++ b/scss/components/form/_combo.scss
@ -56,6 +56,27 @@
    }
  }

+  &-delBtn {
+    color: var(--icon-color);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--icon-onHover-color);
+    }
+  }
+
+  &-tab-delBtn {
+    color: var(--icon-color);
+    cursor: pointer;
+    position: absolute;
+    top: -8px;
+    right: 4px;
+
+    &:hover {
+      color: var(--icon-onHover-color);
+    }
+  }
+
  &-items {
    &:empty {
      display: none;
@ -115,14 +136,14 @@
      }
    }

-    .#{$ns}Combo-itemToolbar {
+    .#{$ns}Combo-delBtn {
      margin-left: var(--gap-xs);
      display: flex;
      white-space: nowrap;
      align-items: flex-start;
      padding-top: var(--Form-label-paddingTop);

-      > .is-disabled {
+      &.is-disabled {
        pointer-events: none;
        opacity: var(--Button-onDisabled-opacity);
      }
@ -178,39 +199,11 @@
      margin: calc(var(--Combo--vertical-item-gap) * 2);
    }

-    > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar,
-    > .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar {
-      opacity: 0;
+    > .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-delBtn {
      position: absolute;
-      right: var(--Combo--vertical-itemToolbar-positionRight);
-      top: calc(var(--Combo--vertical-itemToolbar-positionTop) / 2);
-      transition: var(--Combo--vertical-itemToolbar-transion);
-      height: var(--Combo--vertical-itemToolbar-height);
-      line-height: var(--Combo--vertical-itemToolbar-height);
-      background: var(--Combo--vertical-itemToolbar-bg);
-      color: var(--Combo--vertical-itemToolbar-color);
-      border-top-left-radius: var(--Combo--vertical-itemToolbar-borderRadius);
-      border-top-right-radius: var(--Combo--vertical-itemToolbar-borderRadius);
-      padding: 0 px2rem(3px);
-      border-style: solid;
-      border-color: var(--Combo--vertical-itemToolbar-borderColor);
-      border-width: var(--Combo--vertical-itemToolbar-borderWidth)
-        var(--Combo--vertical-itemToolbar-borderWidth) 0
-        var(--Combo--vertical-itemToolbar-borderWidth);
-      // margin-top: px2rem(-1px);
-
-      .#{$ns}Combo-toolbarBtn {
-        color: inherit;
-        line-height: var(--Combo--vertical-itemToolbar-height);
-        // font-size: px2rem(14px);
-
-        &:hover {
-          color: var(--Combo--vertical-itemToolbar-onHover-color);
-        }
-      }
-
-      // top: var(--Combo--vertical-itemToolbar-positionTop);
-      // opacity: 1;
+      opacity: 0;
+      top: var(--gap-xs);
+      right: var(--gap-xs);
    }

    &:not(.is-disabled) > .#{$ns}Combo-item:hover,
@ -218,8 +211,7 @@
      border-color: var(--Combo--vertical-item-onHover-borderColor);
      // border-style: solid;

-      > .#{$ns}Combo-itemToolbar {
-        top: var(--Combo--vertical-itemToolbar-positionTop);
+      > .#{$ns}Combo-delBtn {
        opacity: 1;
      }
    }
--- a/scss/components/form/_tree.scss
+++ b/scss/components/form/_tree.scss
@ -169,7 +169,7 @@
  &-itemArrow {
    cursor: pointer;
    width: var(--Tree-itemArrowWidth);
-    display: inline-block;
+    display: inline-flex;
    margin-right: px2rem(5px);

    // &:before {
@ -180,7 +180,7 @@
    > svg {
      width: var(--Tree-itemArrowWidth);
      height: var(--Tree-itemArrowWidth);
-      display: inline-block;
+      display: block;
      transition: transform 0.2s;
      top: 0;
      transform: rotate(90deg);
@ -197,7 +197,7 @@
  }

  &-itemIcon {
-    display: inline-block;
+    display: inline-flex;
    margin-right: px2rem(5px);
  }

@ -205,6 +205,7 @@
  &-folderIcon,
  &-leafIcon {
    > svg {
+      top: 0;
      width: px2rem(14px);
      height: px2rem(14px);
    }
@ -223,8 +224,8 @@
    }

    > .#{$ns}Checkbox {
-      line-height: 1;
-      display: inline-block;
+      display: inline-flex;
+      align-self: center;
    }
  }

--- a/scss/themes/_cxd-variables.scss
+++ b/scss/themes/_cxd-variables.scss
@ -153,6 +153,9 @@ $Wizard-steps-liAfterBorder: none !important;
  --Checkbox-size: #{px2rem(14px)};
  --Checkbox-inner-size: #{px2rem(8px)};
  --Checkbox--full-inner-size: #{px2rem(10px)};
+  --Checkbox--sm-size: #{px2rem(14px)};
+  --Checkbox--sm-inner-size: #{px2rem(8px)};
+  --Checkbox--sm--full-inner-size: #{px2rem(10px)};
  --Radio-size: #{px2rem(16px)};
  --Radio-inner-size: #{px2rem(10px)};

--- a/src/renderers/Form/Combo.tsx
+++ b/src/renderers/Form/Combo.tsx
@ -997,7 +997,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                onClick={this.removeItem.bind(this, index)}
                key="remove"
                className={cx(
-                  `Combo-toolbarBtn ${!store.removable ? 'is-disabled' : ''}`
+                  `Combo-tab-delBtn ${!store.removable ? 'is-disabled' : ''}`
                )}
                data-tooltip={__('删除')}
                data-position="bottom"
@ -1163,34 +1163,19 @@ export default class ComboControl extends React.Component<ComboProps> {
        <div className={cx(`Combo-items`)}>
          {Array.isArray(value) && value.length ? (
            value.map((value, index, thelist) => {
-              const toolbar: Array<any> = [];
-
-              // if (!disabled && draggable && thelist.length > 1) {
-              //   toolbar.push(
-              //     <a
-              //       key="drag"
-              //       className={cx(`Combo-toolbarBtn Combo-itemDrager`)}
-              //       data-tooltip="拖拽排序"
-              //       data-position="bottom"
-              //     >
-              //       <i className={dragIcon} />
-              //     </a>
-              //   );
-              // }
+              let delBtn: any = null;

              if (
                finnalRemovable && // 表达式判断单条是否可删除
                (!itemRemovableOn ||
                  evalExpression(itemRemovableOn, value) !== false)
              ) {
-                toolbar.push(
+                delBtn = (
                  <a
                    onClick={this.removeItem.bind(this, index)}
                    key="remove"
                    className={cx(
-                      `Combo-toolbarBtn ${
-                        !store.removable ? 'is-disabled' : ''
-                      }`
+                      `Combo-delBtn ${!store.removable ? 'is-disabled' : ''}`
                    )}
                    data-tooltip={__('删除')}
                    data-position="bottom"
@ -1292,9 +1277,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                      </Alert2>
                    )}
                  </div>
-                  {toolbar.length ? (
-                    <div className={cx(`Combo-itemToolbar`)}>{toolbar}</div>
-                  ) : null}
+                  {delBtn}
                </div>
              );
            })
--- a/src/renderers/PopOver.tsx
+++ b/src/renderers/PopOver.tsx
@ -41,9 +41,45 @@ export interface SchemaPopOverObject {
  position?:
    | 'center'
    | 'left-top'
+    | 'left-top-left-top'
+    | 'left-top-left-center'
+    | 'left-top-left-bottom'
+    | 'left-top-center-top'
+    | 'left-top-center-center'
+    | 'left-top-center-bottom'
+    | 'left-top-right-top'
+    | 'left-top-right-center'
+    | 'left-top-right-bottom'
    | 'right-top'
+    | 'right-top-left-top'
+    | 'right-top-left-center'
+    | 'right-top-left-bottom'
+    | 'right-top-center-top'
+    | 'right-top-center-center'
+    | 'right-top-center-bottom'
+    | 'right-top-right-top'
+    | 'right-top-right-center'
+    | 'right-top-right-bottom'
    | 'left-bottom'
+    | 'left-bottom-left-top'
+    | 'left-bottom-left-center'
+    | 'left-bottom-left-bottom'
+    | 'left-bottom-center-top'
+    | 'left-bottom-center-center'
+    | 'left-bottom-center-bottom'
+    | 'left-bottom-right-top'
+    | 'left-bottom-right-center'
+    | 'left-bottom-right-bottom'
    | 'right-bottom'
+    | 'right-bottom-left-top'
+    | 'right-bottom-left-center'
+    | 'right-bottom-left-bottom'
+    | 'right-bottom-center-top'
+    | 'right-bottom-center-center'
+    | 'right-bottom-center-bottom'
+    | 'right-bottom-right-top'
+    | 'right-bottom-right-center'
+    | 'right-bottom-right-bottom'
    | 'fixed-center'
    | 'fixed-left-top'
    | 'fixed-right-top'
@ -90,9 +126,11 @@ export interface PopOverState {
  isOpened: boolean;
 }

-export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
-  Component: React.ComponentType<any>
-): any => {
+export const HocPopOver = (
+  config: {
+    targetOutter?: boolean; // 定位目标为整个外层
+  } = {}
+) => (Component: React.ComponentType<any>): any => {
  let lastOpenedInstance: PopOverComponent | null = null;
  class PopOverComponent extends React.Component<PopOverProps, PopOverState> {
    target: HTMLElement;
@ -304,7 +342,7 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
          className={cx(`Field--popOverAble`, className, {
            in: this.state.isOpened
          })}
-          ref={this.targetRef}
+          ref={config.targetOutter ? this.targetRef : undefined}
        >
          {(popOver as SchemaPopOverObject)?.showIcon !== false ? (
            <>
@ -313,6 +351,7 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
                key="popover-btn"
                className={cx('Field-popOverBtn')}
                {...triggerProps}
+                ref={config.targetOutter ? undefined : this.targetRef}
              >
                <Icon icon="zoom-in" className="icon" />
              </span>
@ -320,13 +359,12 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
            </>
          ) : (
            <>
-              <div className={cx('Field-popOverWrap')} {...triggerProps}>
-                <Component
-                  {...this.props}
-                  wrapperComponent={''}
-                  noHoc
-                  ref={this.targetRef}
-                />
+              <div
+                className={cx('Field-popOverWrap')}
+                {...triggerProps}
+                ref={config.targetOutter ? undefined : this.targetRef}
+              >
+                <Component {...this.props} wrapperComponent={''} noHoc />
              </div>
              {this.state.isOpened ? this.renderPopOver() : null}
            </>
--- a/src/renderers/Table/TableCell.tsx
+++ b/src/renderers/Table/TableCell.tsx
@ -112,7 +112,9 @@ export class TableCell extends React.Component<RendererProps> {
  name: 'table-cell'
 })
@QuickEdit()
-@PopOverable()
+@PopOverable({
+  targetOutter: true
+})
@Copyable()
@observer
 export class TableCellRenderer extends TableCell {