@waline/client 2.5.0 → 2.5.1

package/src/styles/gif.scss

@@ -1,151 +1,70 @@
-@mixin gif() {
-  .wl-gif-popup {
-    position: absolute;
-    top: 100%;
-    left: 1.25em;
-    z-index: 10;
-
-    width: 436px;
-    padding: 12px 12px 4px;
-    border: var(--waline-border);
-    border-radius: 6px;
-
-    background: var(--waline-bgcolor);
-    box-shadow: var(--waline-box-shadow);
-
-    opacity: 0;
-    visibility: hidden;
-
-    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
-    transform: scale(0.9, 0.9);
-    transform-origin: 0 0;
-
-    &.display {
-      opacity: 1;
-      visibility: visible;
-      transform: none;
-    }
-
-    input {
-      box-sizing: border-box;
-
-      width: 100%;
-      margin-bottom: 10px;
-      padding: 3px 5px;
-      border: var(--waline-border);
-    }
-
-    img {
-      display: block;
-
-      box-sizing: border-box;
-
-      width: 100%;
-      border-width: 2px;
-      border-style: solid;
-      border-color: #fff;
-
-      cursor: pointer;
-
-      &:hover {
-        border-color: var(--waline-theme-color);
-        border-radius: 2px;
-      }
-    }
-
-    .wl-gif-waterfall {
-      overflow-y: auto;
-      max-height: 800px;
-    }
-
-    button {
-      display: inline-block;
-      vertical-align: middle;
-
-      width: 2em;
-      margin: 0.125em;
-      padding: 0;
-      border-width: 0;
-
-      background: transparent;
-
-      font-size: inherit;
-      line-height: 2;
-      text-align: center;
-
-      cursor: pointer;
-
-      &:hover {
-        background: var(--waline-bgcolor-hover);
-      }
-    }
-
-    .wl-gif {
-      display: inline-block;
-      vertical-align: middle;
-      max-width: 1.5em;
-      max-height: 1.5em;
-    }
-
-    .wl-tab-wrapper {
-      overflow-y: auto;
-      max-height: 145px;
-      padding: 0.5em;
-
-      &::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-      }
+.wl-gif-popup {
+  position: absolute;
+  top: 100%;
+  left: 1.25em;
+  z-index: 10;
+
+  width: calc(100% - 3em);
+  padding: 0.75em 0.75em 0.25em;
+  border: var(--waline-border);
+  border-radius: 6px;
+
+  background: var(--waline-bgcolor);
+  box-shadow: var(--waline-box-shadow);
+
+  opacity: 0;
+  visibility: hidden;
+
+  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+  transform: scale(0.9, 0.9);
+  transform-origin: 0 0;
+
+  &.display {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
 
-      &::-webkit-scrollbar-track-piece:vertical {
-        -webkit-border-radius: 6px;
-        border-radius: 6px;
-        background: rgb(0 0 0 / 10%);
-      }
+  input {
+    box-sizing: border-box;
 
-      &::-webkit-scrollbar-thumb:vertical {
-        width: 6px;
-        -webkit-border-radius: 6px;
-        border-radius: 6px;
-        background: var(--waline-theme-color);
-      }
-    }
+    width: 100%;
+    margin-bottom: 10px;
+    padding: 3px 5px;
+    border: var(--waline-border);
+  }
 
-    .wl-tabs {
-      position: relative;
-      height: 2em;
-      padding: 0 6px 1px;
+  img {
+    display: block;
 
-      &::before {
-        content: ' ';
+    box-sizing: border-box;
 
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        z-index: 2;
+    width: 100%;
+    border-width: 2px;
+    border-style: solid;
+    border-color: #fff;
 
-        height: 1px;
+    cursor: pointer;
 
-        background: var(--waline-border-color);
-      }
+    &:hover {
+      border-color: var(--waline-theme-color);
+      border-radius: 2px;
     }
+  }
+}
 
-    .wl-tab {
-      position: relative;
-      margin: 0;
-      padding: 0 0.5em;
-
-      &.active {
-        z-index: 3;
+.wl-gallery {
+  max-height: 80vh;
+  display: flex;
+  overflow-y: auto;
+}
 
-        border: 1px solid var(--waline-border-color);
-        border-top-width: 0;
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
+.wl-gallery-column {
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
 
-        background: var(--waline-bgcolor);
-      }
-    }
-  }
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }

package/src/styles/index.scss

@@ -4,6 +4,9 @@
 @use 'base';
 
 @use 'panel';
+@use 'emoji';
+@use 'gif';
+
 @use 'card';
 @use 'layout';
 

package/src/styles/panel.scss

@@ -1,6 +1,3 @@
-@use 'emoji';
-@use 'gif';
-
 .wl-comment {
   position: relative;
   display: flex;
@@ -287,6 +284,3 @@
     }
   }
 }
-
-@include emoji.emoji;
-@include gif.gif;

package/src/utils/fetchGif.ts

@@ -56,6 +56,7 @@ export const fetchGif = ({
 
   return fetch(`${baseUrl}?${query.toString()}`, {
     headers: {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       'Content-Type': 'application/json',
     },
   }).then((resp) => resp.json() as Promise<FetchGifResponse>);

package/src/utils/throttle.ts

@@ -1,16 +1,15 @@
-export function throttle(
+export const throttle = (
   func: (...args: any[]) => void,
   timeout = 300
-): (...args: []) => void {
+): ((...args: []) => void) => {
   let timer: number | null;
+
   return (...args: []): void => {
-    if (timer) {
-      clearTimeout(timer);
-    }
+    if (timer) clearTimeout(timer);
 
     timer = window.setTimeout(() => {
       func(...args);
       timer = null;
     }, timeout);
   };
-}
+};