Revert "Improve adaptive width for Attributes View (#9280)"

This reverts commit 2e46bee.

app/src/assets/scss/business/_av.scss

@@ -1,8 +1,4 @@
 .av {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
   user-select: none;
   box-sizing: border-box;
 
@@ -31,11 +27,6 @@
     opacity: 1;
   }
 
-  &__container {
-    // width: fit-content;
-    max-width: 100%;
-  }
-
   &__header {
     top: -43px;
     z-index: 2;
@@ -69,15 +60,14 @@
 
   &__gutters {
     @extend .protyle-gutters;
-    position: absolute;
-    line-height: normal;
+    position: fixed;
     top: 0;
-    left: 0;
+    left: -44px;
     opacity: 0;
-    width: 24px;
+    display: flex;
 
-    button {
-      padding: 0;
+    svg {
+      height: 25px;
     }
   }
 
@@ -94,10 +84,6 @@
     cursor: pointer;
   }
 
-  &__body {
-    float: left;
-  }
-
   &__row {
     display: flex;
     border-bottom: 1px solid var(--b3-theme-surface-lighter);
@@ -125,6 +111,10 @@
 
     &--select {
       background-color: var(--b3-theme-primary-lightest);
+
+      .av__firstcol svg {
+        opacity: 1;
+      }
     }
 
     &--header {
@@ -191,15 +181,18 @@
 
     &--add {
       color: var(--b3-theme-on-surface);
+      padding: 5px 5px 5px 7px;
       display: flex;
+      align-items: center;
       transition: background 20ms ease-in 0s;
       font-size: 87.5%;
 
-      .av__calc {
-        padding: 0 5px;
-        align-items: center;
-        position: sticky;
-        left: 49px;
+      svg {
+        height: 12px;
+        width: 12px;
+        color: var(--b3-theme-on-surface);
+        margin-right: 5px;
+        flex-shrink: 0;
       }
 
       &:hover {
@@ -208,27 +201,6 @@
     }
   }
 
-  &__firstcol {
-    display: flex;
-    flex-direction: row-reverse;
-
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    width: 48px;
-    background-color: var(--b3-theme-background);
-    border-right: 1px solid var(--b3-theme-surface-lighter);
-
-    svg {
-      color: var(--b3-theme-on-surface);
-      height: 36px;
-      width: 24px;
-      padding: 5px;
-      box-sizing: border-box;
-      float: left;
-    }
-  }
-
   &__cell {
     box-sizing: border-box;
     position: relative;
@@ -262,18 +234,6 @@
       top: 5px;
     }
 
-    &[data-wrap=true] {
-      white-space: pre-wrap;
-    }
-
-    &[data-wrap=false] {
-      white-space: nowrap;
-
-      img.av__cellassetimg {
-        max-height: 26px;
-      }
-    }
-
     &:hover .block__icon {
       opacity: 1;
       background-color: var(--b3-theme-background-light) !important;
@@ -299,7 +259,6 @@
 
   &__celltext {
     overflow: hidden;
-    line-height: normal;
 
     .b3-chip {
       margin: 1px 2px;
@@ -317,6 +276,22 @@
     }
   }
 
+  &__firstcol {
+    svg {
+      color: var(--b3-theme-on-surface);
+      height: 33px;
+      width: 24px;
+      opacity: 0;
+      padding: 5px;
+      box-sizing: border-box;
+      float: left;
+    }
+
+    &:hover svg {
+      opacity: 1;
+    }
+  }
+
   &__widthdrag {
     position: absolute;
     cursor: col-resize;
@@ -398,13 +373,20 @@
   &.protyle-wysiwyg--select,
   &.protyle-wysiwyg--hl {
     .av__row--header,
-    .av__row--footer,
-    .av__firstcol {
+    .av__row--footer {
       background-color: transparent;
     }
   }
 }
 
+img.av__cellassetimg {
+  max-height: 20px;
+  border-radius: var(--b3-border-radius);
+  margin: 1px 2px;
+  max-width: none;
+  vertical-align: top;
+}
+
 html[data-theme-mode="dark"] .av__panel .b3-menu__item {
   mix-blend-mode: lighten;
 }

app/src/assets/scss/business/_custom.scss

@@ -69,10 +69,6 @@
     line-height: 26px;
     min-height: 26px;
 
-    img.av__cellassetimg {
-      height: 32px;
-    }
-
     &:hover {
       background-color: var(--b3-theme-background);
     }

app/src/assets/scss/component/_tooltips.scss

@@ -8,7 +8,6 @@
   -webkit-font-smoothing: subpixel-antialiased;
   color: var(--b3-tooltips-color);
   word-wrap: break-word;
-  white-space: pre;
   background-color: var(--b3-tooltips-background);
   border-radius: var(--b3-border-radius);
   line-height: 17px;

app/src/plugin/loader.ts

@@ -4,10 +4,18 @@ import {Plugin} from "./index";
 /// #if !MOBILE
 import {exportLayout, resizeTopBar} from "../layout/util";
 /// #endif
-import {PluginRequire} from "./require";
+import {API} from "./API";
 import {getFrontend, isMobile, isWindow} from "../util/functions";
 import {Constants} from "../constants";
 
+const getObject = (key: string) => {
+    const api = {
+        siyuan: API
+    };
+    // @ts-ignore
+    return api[key];
+};
+
 const runCode = (code: string, sourceURL: string) => {
     return window.eval("(function anonymous(require, module, exports){".concat(code, "\n})\n//# sourceURL=").concat(sourceURL, "\n"));
 };
@@ -32,7 +40,7 @@ const loadPluginJS = async (app: App, item: IPluginData) => {
     const exportsObj: { [key: string]: any } = {};
     const moduleObj = {exports: exportsObj};
     try {
-        runCode(item.js, "plugin:" + encodeURIComponent(item.name))(PluginRequire.require, moduleObj, exportsObj);
+        runCode(item.js, "plugin:" + encodeURIComponent(item.name))(getObject, moduleObj, exportsObj);
     } catch (e) {
         console.error(`plugin ${item.name} run error:`, e);
         return;

app/src/protyle/gutter/index.ts

@@ -1616,7 +1616,8 @@ export class Gutter {
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
                         if (e.classList.contains("av")) {
-                            e.style.alignItems = "flex-start";
+                            e.style.margin = "";
+                            resizeAV(e);
                         } else {
                             e.style.textAlign = "left";
                         }
@@ -1629,7 +1630,8 @@ export class Gutter {
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
                         if (e.classList.contains("av")) {
-                            e.style.alignItems = "center";
+                            e.style.margin = "0 auto";
+                            resizeAV(e);
                         } else {
                             e.style.textAlign = "center";
                         }
@@ -1642,7 +1644,8 @@ export class Gutter {
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
                         if (e.classList.contains("av")) {
-                            e.style.alignItems = "flex-end";
+                            e.style.margin = "0 0 0 auto";
+                            resizeAV(e);
                         } else {
                             e.style.textAlign = "right";
                         }
@@ -1653,11 +1656,7 @@ export class Gutter {
                 icon: "iconMenu",
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
-                        if (e.classList.contains("av")) {
-                            e.style.alignItems = "stretch";
-                        } else {
-                            e.style.textAlign = "justify";
-                        }
+                        e.style.textAlign = "justify";
                     });
                 }
             }, {
@@ -1687,11 +1686,12 @@ export class Gutter {
                 icon: "iconTrashcan",
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
-                        e.style.direction = "";
                         if (e.classList.contains("av")) {
-                            e.style.alignItems = "";
+                            e.style.margin = "";
+                            resizeAV(e);
                         } else {
                             e.style.textAlign = "";
+                            e.style.direction = "";
                         }
                     });
                 }
@@ -1754,6 +1754,7 @@ export class Gutter {
                                 id: e.getAttribute("data-node-id"),
                                 data: e.outerHTML
                             });
+                            resizeAV(e);
                         });
                         transaction(protyle, operations, undoOperations);
                         window.siyuan.menus.menu.remove();