@seafile/seafile-editor 1.0.117-alpha.21 → 1.0.117-alpha.22

package/dist/constants/event-types.js

@@ -11,12 +11,10 @@ const INTERNAL_EVENTS = exports.INTERNAL_EVENTS = {
   ON_CLOSE_LINK_POPOVER: 'on_close_link_popover',
   ON_OPEN_FORMULA_DIALOG: 'on_open_formula_dialog',
   ON_SELECT_ALL_CELL: 'on_select_all_cell',
-  ON_TOGGLE_IMAGE_POPOVER: 'on_toggle_image_popover',
-  OUTLINE_STATE_CHANGED: 'outline_state_changed'
+  ON_TOGGLE_IMAGE_POPOVER: 'on_toggle_image_popover'
 };
 const EXTERNAL_EVENTS = exports.EXTERNAL_EVENTS = {
   ON_HELP_INFO_TOGGLE: 'on_help_info_toggle',
-  ON_ARTICLE_INFO_TOGGLE: 'on_article_info_toggle',
   ON_LINK_CLICK: 'on_link_click',
   ON_INSERT_IMAGE: 'on_insert_image',
   INSERT_IMAGE: 'insert_image'

package/dist/containers/article-info/index.js

@@ -7,92 +7,48 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ArticleInfo;
 var _react = _interopRequireWildcard(require("react"));
+var _outline = _interopRequireDefault(require("../outline"));
 var _slateReact = require("slate-react");
-var _resizeWidth = _interopRequireDefault(require("./resize-width"));
-var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
-var _eventTypes = require("../../constants/event-types");
 require("./style.css");
-const MIN_PANEL_WIDTH = 360;
-const MAX_PANEL_WIDTH = 620;
-const {
-  fileName
-} = window.app.pageOptions;
+const TAB_TYPES = {
+  OUTLINE: 'outline',
+  FILE_DETAIL: 'file_detail'
+};
 function ArticleInfo(_ref) {
   let {
     children
   } = _ref;
   const editor = (0, _slateReact.useSlateStatic)();
-  const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
-  const [isShown, setIsShown] = (0, _react.useState)(true);
-  const containerWrapperStyle = (0, _react.useMemo)(() => {
-    let style = {
-      width,
-      zIndex: 101
-    };
-    if (!style.width || style.width < MIN_PANEL_WIDTH) {
-      style.width = MIN_PANEL_WIDTH;
-    } else if (style.width > MAX_PANEL_WIDTH) {
-      style.width = MAX_PANEL_WIDTH;
-    }
-    return style;
-  }, [width]);
-  const resizeWidth = (0, _react.useCallback)(width => {
-    console.log(width);
-    if (width >= MIN_PANEL_WIDTH && width <= MAX_PANEL_WIDTH) {
-      setWidth(width);
-    }
-  }, []);
-  const resizeWidthEnd = (0, _react.useCallback)(width => {
-    const panelWidth = JSON.parse(window.localStorage.getItem('sf-editor-panel-width') || '{}');
-    window.localStorage.setItem('sf-editor-panel-width', JSON.stringify({
-      ...panelWidth,
-      width
-    }));
-  }, []);
-  (0, _react.useEffect)(() => {
-    const panelWidth = JSON.parse(window.localStorage.getItem('sf-editor-panel-width', '{}')) || {};
-    const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(panelWidth.width, 10) || MAX_PANEL_WIDTH, MAX_PANEL_WIDTH));
-    setWidth(width);
-  }, []);
-  const onClose = () => {
-    setIsShown(false);
-  };
-  (0, _react.useEffect)(() => {
-    const eventBus = _eventBus.default.getInstance();
-    // const unsubscribeArticleInfo = eventBus.subscribe(INTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, updateArticleInfoState);
-    const handleArticleInfoToggle = state => {
-      setIsShown(state);
-    };
-    const unsubscribeArticleInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, handleArticleInfoToggle);
-    return () => {
-      // unsubscribeHelpInfo();
-      unsubscribeArticleInfo();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  console.log(111111);
+  const [activeTab, setActiveTab] = (0, _react.useState)(TAB_TYPES.OUTLINE);
+  const onOutlineClick = (0, _react.useCallback)(() => {
+    if (activeTab === TAB_TYPES.OUTLINE) return;
+    setActiveTab(TAB_TYPES.OUTLINE);
+  }, [activeTab]);
+  const onDetailClick = (0, _react.useCallback)(() => {
+    if (activeTab === TAB_TYPES.FILE_DETAIL) return;
+    setActiveTab(TAB_TYPES.FILE_DETAIL);
+  }, [activeTab]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-article-info-container-wrapper",
-    style: containerWrapperStyle
-  }, /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
-    minWidth: MIN_PANEL_WIDTH,
-    maxWidth: MAX_PANEL_WIDTH,
-    resizeWidth: resizeWidth,
-    resizeWidthEnd: resizeWidthEnd
-  }), isShown && /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-article-info-container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("ul", {
     className: "sf-article-info-nav nav"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("li", {
     className: "nav-item"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "iconfont icon-file"
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "name ellipsis"
-  }, fileName)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "nav-control iconfont icon-x",
-    onClick: onClose
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "nav-link ".concat(activeTab === TAB_TYPES.OUTLINE && 'active'),
+    onClick: onOutlineClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "iconfont icon-list-ul"
+  }))), /*#__PURE__*/_react.default.createElement("li", {
+    className: "nav-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "nav-link ".concat(activeTab === TAB_TYPES.FILE_DETAIL && 'active'),
+    onClick: onDetailClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: 'iconfont icon-info-circle'
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-article-info-content"
-  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children))));
+  }, activeTab === TAB_TYPES.OUTLINE && /*#__PURE__*/_react.default.createElement(_outline.default, {
+    editor: editor
+  }), activeTab === TAB_TYPES.FILE_DETAIL && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children)));
 }

package/dist/containers/article-info/style.css

@@ -1,51 +1,25 @@
-.sf-article-info-container-wrapper {
-  display: flex;
-  flex-direction: row;
-  max-width: 620px;
-  min-width: 360px;
-  position: relative;
-  flex-basis: 620px;
-}
-
 .sf-article-info-container {
-  flex: 1 1;
-  width: auto;
-  height: 100%;
-  overflow: auto;
-  border-left: 1px solid #d8d8d8;
-  background-color: #fff;
-}
-
-.sf-article-info-container .nav {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  line-height: 2.5rem;
-  border-bottom: 1px solid #e8e8e8;
-  height: 48px;
-  padding: 8px 16px;
-}
-
-.nav-control {
-  height: 24px;
-  width: 24px;
+  flex: 1;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
+  flex-direction: column;
+  background-color: #f5f5f5;
+  user-select: none;
+  min-height: 0;
 }
 
-.nav-control:hover {
-  background-color: #EFEFEF;
-  border-radius: 3px;
+.sf-article-info-container .nav {
+  padding: 10px 0;
+  min-width: 125px;
+  height: 36px;
+  border-bottom: 1px solid #eee;
+  background-color: #fff;
+  justify-content: space-around;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
 }
 
 .sf-article-info-container .nav .nav-item {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  width: 0; 
+  padding: 0 0.75rem;
 }
 
 .sf-article-info-container .nav .nav-link {
@@ -78,51 +52,3 @@
 .sf-article-info-container .sf-article-info-content:hover {
   overflow: auto;
 }
-
-
-
-
-.detail-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  line-height: 2.5rem;
-  border-bottom: 1px solid #e8e8e8;
-  height: 48px;
-  padding: 8px 16px;
-}
-
-.detail-header .detail-title {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  width: 0; /* prevent strut flex layout */
-}
-
-.detail-header .detail-title .name {
-  margin: 0 0.5rem 0 6px;
-  line-height: 1.5rem;
-  vertical-align: middle;
-  font-size: 1rem;
-  color: #212529;
-}
-
-.detail-header .detail-control {
-  height: 24px;
-  width: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.detail-header .detail-control .detail-control-close {
-  font-size: 16px;
-  fill: #666;
-}
-
-.detail-header .detail-control:hover {
-  background-color: #EFEFEF;
-  border-radius: 3px;
-}

package/dist/containers/hotkeys-helper/style.css

@@ -1,10 +1,7 @@
 
 .sf-editor-helper {
-  z-index:101;
-  position: relative;
-  width: 300px;
   height: 100%;
-  right: 0;
+  flex: 1 0 350px;
   background-color: #fff;
   overflow-y: auto;
   overflow-x: hidden;

package/dist/containers/outline/index.js

@@ -69,21 +69,12 @@ const Outline = _ref => {
     };
   }, [handleScroll, scrollRef]);
   const toggleShow = (0, _react.useCallback)(() => {
-    // updateOutlineState(!isShown);
-    // const TAB_TYPES = { OUTLINE: 'outline'};
-    // if (activeTab === TAB_TYPES.OUTLINE) 
-
-    // setIsShown(!isShown);
-    // const eventBus =EventBus.getInstance();
-    // eventBus.dispatch(INTERNAL_EVENTS.OUTLINE_STATE_CHANGED, isShown)
     setIsShown(prevIsShown => {
       const newIsShown = !prevIsShown;
       setTimeout(() => {
         const eventBus = _eventBus.default.getInstance();
         eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.OUTLINE_STATE_CHANGED, newIsShown);
       }, 0);
-      // const eventBus = EventBus.getInstance();
-      // eventBus.dispatch(INTERNAL_EVENTS.OUTLINE_STATE_CHANGED, newIsShown); 
       return newIsShown;
     });
   }, []);

package/dist/containers/outline/style.css

@@ -103,8 +103,6 @@
   color: #333;
 }
 
-
-
 .sf-editor-outline .outline-h2, 
 .sf-editor-outline .outline-h3 {
   white-space: nowrap;

package/dist/editors/simple-slate-editor/style.css

@@ -32,7 +32,7 @@
   height: 100%;
   width: 100%;
   overflow: auto;
-  display: flex;
+  /* display: flex; */
 }
 
 .sf-simple-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar {

package/dist/editors/slate-editor/editor-help/index.js

@@ -25,27 +25,24 @@ function EditorHelp(_ref) {
   }, []);
   const updateHelpInfoState = (0, _react.useCallback)(state => {
     setIsShowHelpInfo(state);
-    console.log("helpinfo:", state);
     setIsShowArticleInfo(false);
   }, []);
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
-    // const unsubscribeArticleInfo = eventBus.subscribe(INTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, updateArticleInfoState);
-    const unsubscribeArticleInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, updateArticleInfoState);
+    const unsubscribeArticleInfo = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, updateArticleInfoState);
     const unsubscribeHelpInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, updateHelpInfoState);
     return () => {
       unsubscribeHelpInfo();
       unsubscribeArticleInfo();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [updateArticleInfoState, updateHelpInfoState]);
+  }, []);
   const containerClass = (0, _classnames.default)('sf-markdown-help-wrapper', {
     'active': isShowArticleInfo || isShowHelpInfo
   });
-  console.log(isShowHelpInfo);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: containerClass
   }, isShowArticleInfo && /*#__PURE__*/_react.default.createElement(_articleInfo.default, {
     children: children
-  }), isShowHelpInfo && /*#__PURE__*/_react.default.createElement(_hotkeysHelper.default, null)));
+  }), isShowHelpInfo && /*#__PURE__*/_react.default.createElement(_hotkeysHelper.default, null));
 }

package/dist/editors/slate-editor/editor-help/style.css

@@ -1,15 +1,15 @@
 .sf-markdown-help-wrapper {
   display: none;
+  background-color: #fff;
   border-left: 1px solid #eee;
-  flex: 1 1 auto;
+  flex: 0 0 300px;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
+  width: 300px;
 }
 
 .sf-markdown-help-wrapper.active {
   display: flex;
   flex-direction: column;
-  position: absolute;
-  right: 0;
 }

package/dist/editors/slate-editor/style.css

@@ -4,7 +4,6 @@
   flex-direction: column;
   min-height: 0;
   min-width: 0;
-  position:relative;
 }
 
 .sf-slate-editor-container .sf-slate-editor-toolbar {
@@ -30,15 +29,10 @@
 }
 
 .sf-slate-editor-container .sf-slate-scroll-container {
-  z-index: 100;
-  overflow-x: hidden;
-  overflow-y: auto;
   height: 100%;
   width: 100%;
   background-color: #fafaf9;
   overflow: auto;
-  min-width: 1200px;
-  flex: 1 1;
 }
 
 .sf-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar{
@@ -63,7 +57,6 @@
   margin: 0 auto;
   padding-top: 20px;
   padding-bottom: 20px;
-  
 }
 
 .sf-slate-editor-container .sf-slate-editor-content .article {
@@ -112,7 +105,6 @@
 
   .sf-slate-article-container {
     width: 100%;
-    /* margin-left: 280px; */
   }
 
   .sf-slate-article-container .article {

package/dist/extension/toolbar/header-toolbar/index.js

@@ -91,7 +91,12 @@ const Toolbar = _ref => {
     isSupportInsertSeafileImage: isSupportInsertSeafileImage
   })), isSupportFormula && /*#__PURE__*/_react.default.createElement(_menu10.default, commonProps), isSupportColumn && /*#__PURE__*/_react.default.createElement(_menu12.default, commonProps)), isShowSubTableMenu && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
     className: "sf-menu-group sf-table-operations-group"
-  }, /*#__PURE__*/_react.default.createElement(_tableOperator.AlignmentDropDown, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.ColumnOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RowOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RemoveTableMenu, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu11.default, commonProps)), !isRichEditor && /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_tableOperator.AlignmentDropDown, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.ColumnOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RowOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RemoveTableMenu, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu11.default, commonProps)), isRichEditor && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-article-info-control",
+    onClick: updateArticleInfoState
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: sideIconClass
+  })), !isRichEditor && /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-help-info-control",
     onClick: onHelpIconToggle
   }, /*#__PURE__*/_react.default.createElement("span", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "1.0.117-alpha.21",
+  "version": "1.0.117-alpha.22",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/dist/containers/article-info/resize-width/index.js

@@ -1,133 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-require("./style.css");
-const ResizeWidth = _ref => {
-  let {
-    minWidth,
-    maxWidth,
-    resizeWidth: resizeWidthAPI,
-    resizeWidthEnd
-  } = _ref;
-  const [isShowHandlerBar, setIsShowHandlerBar] = (0, _react.useState)(false);
-  const [drag, setDrag] = (0, _react.useState)(null);
-  const handlerRef = (0, _react.useRef)(null);
-  const handlerBarRef = (0, _react.useRef)(null);
-  const setHandlerBarTop = handlerTop => {
-    if (!handlerBarRef.current || handlerTop < 0) return;
-    handlerBarRef.current.style.top = handlerTop + 'px';
-  };
-  const setHandlerBarPosition = event => {
-    if (!handlerRef.current) return;
-    const {
-      top
-    } = handlerRef.current.getBoundingClientRect();
-    const handlerTop = event.pageY - top - 26 / 2;
-    setHandlerBarTop(handlerTop);
-  };
-  const getWidthFromMouseEvent = event => {
-    return event.pageX || event.touches && event.touches[0] && event.touches[0].pageX || event.changedTouches && event.changedTouches[event.changedTouches.length - 1].pageX;
-  };
-  const calculateResizedWidth = event => {
-    const width = getWidthFromMouseEvent(event);
-    const resizedWidth = document.body.clientWidth - width;
-    if (minWidth && resizedWidth < minWidth || maxWidth && resizedWidth > maxWidth) return -1;
-    return resizedWidth;
-  };
-  const onResizeWidth = event => {
-    const resizedWidth = calculateResizedWidth(event);
-    if (resizedWidth < 0) return;
-    if (resizeWidthAPI) {
-      resizeWidthAPI(resizedWidth);
-    }
-  };
-  const onDrag = event => {
-    onResizeWidth(event);
-  };
-  const onDragStart = (0, _react.useCallback)(event => {
-    if (event && event.dataTransfer && event.dataTransfer.setData) {
-      event.dataTransfer.setData('text/plain', 'dummy');
-      console.log(event.dataTransfer.getData('text/plain'));
-    }
-    return true;
-  }, []);
-  const onDragEnd = event => {
-    onResizeWidth(event);
-  };
-  const onMouseLeave = () => {
-    setIsShowHandlerBar(false);
-  };
-  const onMouseEnter = event => {
-    setIsShowHandlerBar(true);
-    setHandlerBarPosition(event);
-    if (handlerRef.current) {
-      handlerRef.current.addEventListener('mouseleave', onMouseLeave);
-    }
-  };
-  const onMouseOver = event => {
-    setHandlerBarPosition(event);
-  };
-  const onMouseDown = event => {
-    event.preventDefault && event.preventDefault();
-    const currDrag = onDragStart(event);
-    if (currDrag === null && event.button !== 0) return;
-    window.addEventListener('mouseup', onMouseUp);
-    window.addEventListener('mousemove', onMouseMove);
-    if (handlerRef.current) {
-      handlerRef.current.removeEventListener('mouseleave', onMouseLeave);
-    }
-    console.log(11111);
-    setDrag(currDrag);
-  };
-  const onMouseMove = event => {
-    event.preventDefault && event.preventDefault();
-    onDrag(event);
-  };
-  const onMouseUp = event => {
-    window.removeEventListener('mouseup', onMouseUp);
-    window.removeEventListener('mousemove', onMouseMove);
-    onDragEnd(event, drag);
-    setHandlerBarTop(-9999);
-    setDrag(null);
-    setIsShowHandlerBar(false);
-    if (resizeWidthEnd) {
-      const resizeWidth = calculateResizedWidth(event);
-      if (resizeWidth < 0) return;
-      resizeWidthEnd(resizeWidth);
-    }
-  };
-  (0, _react.useEffect)(() => {
-    return () => {
-      window.removeEventListener('mouseup', onMouseUp);
-      window.removeEventListener('mousemove', onMouseMove);
-    };
-    // eslint-disable-next-line
-  }, []);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-editor-resize-width-handler resize-handler-placement-right",
-    ref: handlerRef,
-    onMouseDown: onMouseDown,
-    onMouseOver: onMouseOver,
-    onMouseEnter: onMouseEnter,
-    onDrag: onDrag,
-    onDragStart: onDragStart,
-    onDragEnd: onDragEnd,
-    style: {
-      zIndex: 4
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-editor-resize-width-handler-content"
-  }, isShowHandlerBar && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-editor-resize-width-handler-bar",
-    ref: handlerBarRef,
-    style: {
-      height: 26
-    }
-  })));
-};
-var _default = exports.default = ResizeWidth;

package/dist/containers/article-info/resize-width/style.css

@@ -1,37 +0,0 @@
-.sf-editor-resize-width-handler {
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;  
-  width: 6px;
-}
-
-.sf-editor-resize-width-handler.resize-handler-placement-right {
-  left: 0;
-  right: auto;
-}
-
-.sf-editor-resize-width-handler:hover {
-  cursor: col-resize;
-}
-
-.sf-editor-resize-width-handler .sf-editor-resize-width-handler-content {
-  background-color: initial;
-  height: 100%;
-  position: relative;
-  width: 2px;
-}
-
-.sf-editor-resize-width-handler:hover .sf-editor-resize-width-handler-content {
-  background-color: #ccc;
-}
-
-.sf-editor-resize-width-handler .sf-editor-resize-width-handler-bar {
-  background-color: #2d7ff9;
-  border-radius: 3px;
-  content: "";
-  left: 50%;
-  margin-left: -3px;
-  position: absolute;
-  width: 6px;
-}