fix(previewer): update previewer Dom reference after toggle mobile mo…

…de & fix siderbar styles (#24) LGTM
Tencent · Nov 16, 2021 · 7312b5d · 7312b5d
1 parent bd5ac13
commit 7312b5d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 19 deletions.
diff --git a/src/sass/cherry.scss b/src/sass/cherry.scss
@@ -243,10 +243,10 @@
 
 .cherry-sidebar {
   min-height: 200px;
-  width: 48px;
+  width: 40px;
   position: absolute;
   top: 48px;
-  right: 0;
+  right: 7px;
   z-index: 999;
   .cherry-toolbar-button {
     height: 30px;
@@ -255,6 +255,35 @@
     &:hover {
       background: transparent;
     }
+
+    .icon-loading {
+      &.loading {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+      }
+      &.loading:after {
+        content: " ";
+        display: block;
+        width: 8px;
+        height: 8px;
+        margin-left: 2px;
+        margin-top: -2px;
+        border-radius: 50%;
+        border: 2px solid #000;
+        border-color: #000 transparent #000 transparent;
+        animation: loading 1.2s linear infinite;
+      }
+    }
+
+    @keyframes loading {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
   }
 }
 
@@ -521,16 +550,14 @@
   min-height: auto;
   overflow-y: auto;
 
-  &.cherry-mobile-previewer {
-    .cherry-mobile-previewer-content {
-      width: 375px;
-      height: 100%;
-      margin: 0 auto;
-      padding: 25px 30px;
-      overflow-y: scroll;
-      box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
-      box-sizing: border-box;
-    }
+  .cherry-mobile-previewer-content {
+    width: 375px;
+    height: 100%;
+    margin: 0 auto;
+    padding: 25px 30px;
+    overflow-y: scroll;
+    box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
   }
 
   &.cherry-previewer--hidden {

diff --git a/src/toolbars/hooks/MobilePreview.js b/src/toolbars/hooks/MobilePreview.js
@@ -32,15 +32,14 @@ export default class MobilePreview extends MenuBase {
   onClick() {
     this.previewer.removeScroll();
     // TODO：是否可以只通过修改外层class的方式来实现移动端预览效果的展示，而不是增加删除dom结构的方式
-    const { previewerDom } = this.previewer.options;
-    const cherryClass = previewerDom.classList;
+    const content = this.previewer.options.previewerDom.innerHTML;
+    const previewer = document.querySelector('.cherry-previewer');
     if (this.previewer.isMobilePreview) {
-      cherryClass.remove('cherry-mobile-previewer');
-      previewerDom.innerHTML = previewerDom.querySelector('.cherry-mobile-previewer-content').innerHTML;
+      previewer.innerHTML = content;
+      this.previewer.options.previewerDom = previewer;
     } else {
-      cherryClass.add('cherry-mobile-previewer');
-      const html = previewerDom.innerHTML;
-      previewerDom.innerHTML = `<div class='cherry-mobile-previewer-content'>${html}</div>`;
+      previewer.innerHTML = `<div class='cherry-mobile-previewer-content'>${content}</div>`;
+      this.previewer.options.previewerDom = document.querySelector('.cherry-mobile-previewer-content');
     }
     this.previewer.isMobilePreview = !this.previewer.isMobilePreview;
     this.previewer.bindScroll();