Embed UI Tweaks (#266)

- Add fullscreen button embed UI
- Adjust Finish button background, remove border, adjust spacing.
- bump to 0.13.2

Author: ikreymer

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webrecorder/archivewebpage",
   "productName": "ArchiveWeb.page",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "main": "index.js",
   "description": "Create Web Archives directly in your browser",
   "repository": {

src/ui/coll.ts

@@ -6,6 +6,9 @@ import {
   apiPrefix,
 } from "replaywebpage";
 
+import fasFullscreen from "@fortawesome/fontawesome-free/svgs/solid/desktop.svg";
+import fasUnfullscreen from "@fortawesome/fontawesome-free/svgs/solid/compress-arrows-alt.svg";
+
 import { type PropertyValues } from "lit";
 import { property, state } from "lit/decorators.js";
 
@@ -42,11 +45,21 @@ class WrRecColl extends Item {
         flex-direction: row;
         margin: 0 1px;
         align-items: center;
-        border: 1px darkgrey solid;
-        border-radius: 16px;
         padding: 0 0.5em;
         min-width: max-content;
-        margin-left: 0.5mm;
+        margin-left: 1em;
+        height: 40px;
+      }
+
+      .button.is-primary-new {
+        background-color: #4d7c0f;
+        border-color: rgba(0, 0, 0, 0);
+        color: rgb(255, 255, 255);
+        border-radius: 6px;
+      }
+
+      .button.is-primary-new:hover {
+        background-color: #3a5f09;
       }
 
       .size-label {
@@ -138,21 +151,41 @@ class WrRecColl extends Item {
     }
 
     return html`
+      <a
+        href="#"
+        role="button"
+        class="button is-borderless"
+        style="margin-top: 2px"
+        id="fullscreen"
+        @click="${this.onFullscreenToggle}"
+        @keyup="${clickOnSpacebarPress}"
+        title="${this.isFullscreen ? "Exit Full Screen" : "Full Screen"}"
+        aria-label="${this.isFullscreen ? "Exit Fullscreen" : "Fullscreen"}"
+      >
+        <span class="icon is-small">
+          <fa-icon
+            size="1.0em"
+            class="has-text-grey"
+            aria-hidden="true"
+            .svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"
+          ></fa-icon>
+        </span>
+      </a>
       <span class="rec-button" title="Archiving">
         <span class="dot"></span>
         <span class="size-label">${prettyBytes(this.totalSize)}</span>
       </span>
       ${this.showFinish
         ? html` <button
-            class="button is-primary"
+            class="button is-primary-new"
             @click="${this.onEmbedFinish}"
             type="button"
           >
             Finish
           </button>`
         : html`
             <a
-              class="button is-primary"
+              class="button is-primary-new"
               role="button"
               download="my-archive.wacz"
               href="${this.downloadUrl}"