@netless/fastboard-ui 0.3.2-canary.5 → 0.3.3

package/src/components/Toolbar/README.md

@@ -1,57 +1,57 @@
-## Fastboard Toolbar
-
-```
-+---+     vertically center of the viewport
-| ^ |-+   up/down button to do scroll
-: / :<|   collapse/expand button to toggle toolbar to the left
-| v |-+
-+---+     dynamic height according to the viewport
-```
-
-This doc will give you an overview of how the toolbar structures, from top (outer) to bottom (inner).
-
-### The Outmost Container
-
-<pre>--- content
- &uarr;
- : |&larr; handler
- &darr;
----</pre>
-
-```svelte
-<container style="height: 100%; display: flex; align-items: center">
-  <content style="height: {computed_height}px" />
-  <handler style="position: absolute; left: 100%" />
-</container>
-```
-
-- Container has the full height for further calculations.
-- Content is actually visible parts, it has background color.\
-  Its height will be calculated later.
-- Handler is the button to collapse/expand the toolbar.
-
-### The Content
-
-<pre>------- content
-   ^    up button
- .---.  scrollable area
- :   :
- '---'
-   v    down button
--------</pre>
-
-```svelte
-<content style="height: {computed_height}px">
-  <up-button />
-  <scrollable-area style="overflow: hidden" />
-  <down-button />
-</content>
-```
-
-The `computed_height` is calculated by:
-
-```js
-const max_height = button_height * 2 + scrollable_area_full_height;
-let full_height = container.height;
-computed_height = full_height < max_height ? full_height : max_height;
-```
+## Fastboard Toolbar
+
+```
++---+     vertically center of the viewport
+| ^ |-+   up/down button to do scroll
+: / :<|   collapse/expand button to toggle toolbar to the left
+| v |-+
++---+     dynamic height according to the viewport
+```
+
+This doc will give you an overview of how the toolbar structures, from top (outer) to bottom (inner).
+
+### The Outmost Container
+
+<pre>--- content
+ &uarr;
+ : |&larr; handler
+ &darr;
+---</pre>
+
+```svelte
+<container style="height: 100%; display: flex; align-items: center">
+  <content style="height: {computed_height}px" />
+  <handler style="position: absolute; left: 100%" />
+</container>
+```
+
+- Container has the full height for further calculations.
+- Content is actually visible parts, it has background color.\
+  Its height will be calculated later.
+- Handler is the button to collapse/expand the toolbar.
+
+### The Content
+
+<pre>------- content
+   ^    up button
+ .---.  scrollable area
+ :   :
+ '---'
+   v    down button
+-------</pre>
+
+```svelte
+<content style="height: {computed_height}px">
+  <up-button />
+  <scrollable-area style="overflow: hidden" />
+  <down-button />
+</content>
+```
+
+The `computed_height` is calculated by:
+
+```js
+const max_height = button_height * 2 + scrollable_area_full_height;
+let full_height = container.height;
+computed_height = full_height < max_height ? full_height : max_height;
+```

package/src/components/Toolbar/Toolbar.scss

@@ -1,78 +1,78 @@
-@import "../theme.scss";
-
-$name: "fastboard-toolbar";
-
-.#{$name} {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  position: relative;
-  transform: translateX(0);
-  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-  pointer-events: none;
-
-  &.collapsed {
-    transform: translateX(-100%);
-  }
-}
-
-.#{$name}-handler {
-  position: absolute;
-  left: 100%;
-  width: 17px;
-  font-size: 0;
-  border-radius: 3px;
-  cursor: pointer;
-  pointer-events: auto;
-
-  &:focus-within {
-    outline: 2px solid -webkit-focus-ring-color;
-  }
-
-  input[type="checkbox"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    appearance: none;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    opacity: 0;
-    z-index: -1;
-  }
-
-  svg {
-    opacity: 0;
-    transition: opacity 0.5s 1s;
-    pointer-events: none;
-  }
-
-  @each $name, $theme in $themes {
-    &.#{$name} &-bg-color {
-      fill: read($theme, "bg-color");
-    }
-    &.#{$name} &-border-color {
-      stroke: read($theme, "border-color");
-    }
-    &.#{$name} &-image-stroke-color {
-      stroke: read($theme, "color");
-    }
-    &.#{$name} &-image-fill-color {
-      fill: read($theme, "color");
-    }
-  }
-}
-
-.#{$name}:hover .#{$name}-handler svg,
-.#{$name}.collapsed .#{$name}-handler svg {
-  opacity: 1;
-  transition: opacity 0.2s;
-}
-
-.#{$name}-btn {
-  @include btn(32px, 4px);
-}
-
-@import "./components/Slider.scss";
-@import "./components/Contents.scss";
+@import "../theme.scss";
+
+$name: "fastboard-toolbar";
+
+.#{$name} {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  transform: translateX(0);
+  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  pointer-events: none;
+
+  &.collapsed {
+    transform: translateX(-100%);
+  }
+}
+
+.#{$name}-handler {
+  position: absolute;
+  left: 100%;
+  width: 17px;
+  font-size: 0;
+  border-radius: 3px;
+  cursor: pointer;
+  pointer-events: auto;
+
+  &:focus-within {
+    outline: 2px solid -webkit-focus-ring-color;
+  }
+
+  input[type="checkbox"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    appearance: none;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  svg {
+    opacity: 0;
+    transition: opacity 0.5s 1s;
+    pointer-events: none;
+  }
+
+  @each $name, $theme in $themes {
+    &.#{$name} &-bg-color {
+      fill: read($theme, "bg-color");
+    }
+    &.#{$name} &-border-color {
+      stroke: read($theme, "border-color");
+    }
+    &.#{$name} &-image-stroke-color {
+      stroke: read($theme, "color");
+    }
+    &.#{$name} &-image-fill-color {
+      fill: read($theme, "color");
+    }
+  }
+}
+
+.#{$name}:hover .#{$name}-handler svg,
+.#{$name}.collapsed .#{$name}-handler svg {
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+
+.#{$name}-btn {
+  @include btn(32px, 4px);
+}
+
+@import "./components/Slider.scss";
+@import "./components/Contents.scss";

package/src/components/Toolbar/Toolbar.svelte

@@ -1,62 +1,62 @@
-<script lang="ts">
-  import type { FastboardApp } from "@netless/fastboard-core";
-  import type { Language, Theme, ToolbarConfig } from "../../typings";
-  import { writable as svelte_writable } from "svelte/store";
-  import { height } from "../../actions/height";
-  import { clamp } from "../helpers";
-  import Contents from "./components/Contents.svelte";
-
-  export let app: FastboardApp | null | undefined = null;
-  export let theme: Theme = "light";
-  export let language: Language = "en";
-  export let config: ToolbarConfig = {};
-
-  const name = "fastboard-toolbar";
-  const extra_height = (32 + 4 + 4) * 2;
-
-  $: writable = app?.writable;
-  $: disabled = !$writable;
-
-  let collapsed = false;
-  let container_height = svelte_writable(0);
-  let scroll_height = svelte_writable(0);
-
-  $: computed_height = clamp($container_height, extra_height, $scroll_height + extra_height);
-  $: scrollable = $scroll_height + extra_height > $container_height;
-
-  $: hide_apps = config.apps?.enable === false;
-</script>
-
-<div class="{name} {theme}" class:collapsed use:height={container_height}>
-  <div class="{name}-contents {theme}" style:height={scrollable ? computed_height + "px" : "auto"}>
-    <Contents
-      {app}
-      {theme}
-      {language}
-      {disabled}
-      {scroll_height}
-      {computed_height}
-      {scrollable}
-      {hide_apps}
-    />
-  </div>
-  <label class="{name}-handler {theme}">
-    <input type="checkbox" bind:checked={collapsed} />
-    <svg fill="none" stroke-width="2" viewBox="0 0 32 120">
-      <path
-        fill="#fff"
-        stroke="none"
-        d="m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120"
-        class="{name}-handler-bg-color"
-      />
-      <path stroke="#000" d="m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120" class="{name}-handler-border-color" />
-      {#if collapsed}
-        <path stroke="#000" d="M10 52v16" class="{name}-handler-image-stroke-color" />
-        <path fill="#000" stroke="none" d="M14 52v16l8-8z" class="{name}-handler-image-fill-color" />
-      {:else}
-        <path stroke="#000" d="M20 52v16" class="{name}-handler-image-stroke-color" />
-        <path fill="#000" stroke="none" d="M16 52v16l-8-8z" class="{name}-handler-image-fill-color" />
-      {/if}
-    </svg>
-  </label>
-</div>
+<script lang="ts">
+  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { Language, Theme, ToolbarConfig } from "../../typings";
+  import { writable as svelte_writable } from "svelte/store";
+  import { height } from "../../actions/height";
+  import { clamp } from "../helpers";
+  import Contents from "./components/Contents.svelte";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+  export let config: ToolbarConfig = {};
+
+  const name = "fastboard-toolbar";
+  const extra_height = (32 + 4 + 4) * 2;
+
+  $: writable = app?.writable;
+  $: disabled = !$writable;
+
+  let collapsed = false;
+  let container_height = svelte_writable(0);
+  let scroll_height = svelte_writable(0);
+
+  $: computed_height = clamp($container_height, extra_height, $scroll_height + extra_height);
+  $: scrollable = $scroll_height + extra_height > $container_height;
+
+  $: hide_apps = config.apps?.enable === false;
+</script>
+
+<div class="{name} {theme}" class:collapsed use:height={container_height}>
+  <div class="{name}-contents {theme}" style:height={scrollable ? computed_height + "px" : "auto"}>
+    <Contents
+      {app}
+      {theme}
+      {language}
+      {disabled}
+      {scroll_height}
+      {computed_height}
+      {scrollable}
+      {hide_apps}
+    />
+  </div>
+  <label class="{name}-handler {theme}">
+    <input type="checkbox" bind:checked={collapsed} />
+    <svg fill="none" stroke-width="2" viewBox="0 0 32 120">
+      <path
+        fill="#fff"
+        stroke="none"
+        d="m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120"
+        class="{name}-handler-bg-color"
+      />
+      <path stroke="#000" d="m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120" class="{name}-handler-border-color" />
+      {#if collapsed}
+        <path stroke="#000" d="M10 52v16" class="{name}-handler-image-stroke-color" />
+        <path fill="#000" stroke="none" d="M14 52v16l8-8z" class="{name}-handler-image-fill-color" />
+      {:else}
+        <path stroke="#000" d="M20 52v16" class="{name}-handler-image-stroke-color" />
+        <path fill="#000" stroke="none" d="M16 52v16l-8-8z" class="{name}-handler-image-fill-color" />
+      {/if}
+    </svg>
+  </label>
+</div>

package/src/components/Toolbar/Toolbar.svelte.d.ts

@@ -1,13 +1,13 @@
-import type { FastboardApp } from "@netless/fastboard-core";
-import type { Theme, Language, ToolbarConfig } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
-
-export declare interface ToolbarProps {
-  app?: FastboardApp | null;
-  theme?: Theme;
-  language?: Language;
-  config?: ToolbarConfig;
-}
-
-declare class Toolbar extends SvelteComponentTyped<ToolbarProps> {}
-export default Toolbar;
+import type { FastboardApp } from "@netless/fastboard-core";
+import type { Theme, Language, ToolbarConfig } from "../../typings";
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface ToolbarProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  config?: ToolbarConfig;
+}
+
+declare class Toolbar extends SvelteComponentTyped<ToolbarProps> {}
+export default Toolbar;