add always visible lock icon on top right to show info about e… (#1403)

* improvement(layerui.js): add lock icon on top right to show encrypted info about excalidraw

fixes https://github.com/excalidraw/excalidraw/issues/1313

* swap lock with shield

* fix dimensions

* make link open in new tab

* add newline between toolip text and link

* increase tooltip line-height

* remove unused GitHubCorner compo

* reposition; reintroduce GH icon

* make shield into link

* make tooltip not show when drawing

* Review fix

* remove link from tooltip

Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/LayerUI.scss

@@ -0,0 +1,49 @@
+@import "open-color/open-color";
+
+.layer-ui__wrapper {
+  .encrypted-icon {
+    position: relative;
+    margin-left: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--space-factor);
+    color: $oc-green-9;
+
+    svg {
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+
+    &.tooltip .tooltip-text {
+      visibility: hidden;
+      width: 20rem;
+      bottom: calc(50% + 0.8rem);
+      left: -5px;
+      background-color: $oc-black;
+      color: $oc-white;
+      text-align: center;
+      border-radius: 6px;
+      padding: 5px;
+      position: absolute;
+      z-index: 10;
+      font-size: 13px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+    }
+
+    // the following 3 rules ensure that the tooltip doesn't show (nor affect
+    // the cursor) when you drag over when you draw on canvas, but at the same
+    // time it still works when clicking on the link/shield
+
+    body:active &.tooltip:not(:hover) {
+      pointer-events: none;
+    }
+    body:not(:active) &.tooltip:hover .tooltip-text {
+      visibility: visible;
+    }
+    .tooltip-text:hover {
+      visibility: visible;
+    }
+  }
+}

src/components/LayerUI.tsx

@@ -25,8 +25,11 @@ import { RoomDialog } from "./RoomDialog";
 import { ErrorDialog } from "./ErrorDialog";
 import { ShortcutsDialog } from "./ShortcutsDialog";
 import { LoadingMessage } from "./LoadingMessage";
-import { GitHubCorner } from "./GitHubCorner";
 import { CLASSES } from "../constants";
+import { shield } from "./icons";
+import { GitHubCorner } from "./GitHubCorner";
+
+import "./LayerUI.scss";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -53,6 +56,18 @@ const LayerUI = ({
 }: LayerUIProps) => {
   const isMobile = useIsMobile();
 
+  const renderEncryptedIcon = () => (
+    <a
+      className="encrypted-icon tooltip"
+      href="https://blog.excalidraw.com/end-to-end-encryption/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <span className="tooltip-text">{t("encrypted.tooltip")}</span>
+      {shield}
+    </a>
+  );
+
   const renderExportDialog = () => {
     const createExporter = (type: ExportType): ExportCB => (
       exportedElements,
@@ -178,6 +193,7 @@ const LayerUI = ({
                   zoom={appState.zoom}
                 />
               </Island>
+              {renderEncryptedIcon()}
             </Section>
           </Stack.Col>
         </div>
@@ -222,7 +238,7 @@ const LayerUI = ({
       onLockToggle={onLockToggle}
     />
   ) : (
-    <>
+    <div className="layer-ui__wrapper">
       {appState.isLoading && <LoadingMessage />}
       {appState.errorMessage && (
         <ErrorDialog
@@ -240,7 +256,7 @@ const LayerUI = ({
         <GitHubCorner />
       </aside>
       {renderFooter()}
-    </>
+    </div>
   );
 };
 

src/components/icons.tsx

@@ -201,3 +201,9 @@ export const clone = createIcon(
   "M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z",
   { mirror: true },
 );
+
+// modified https://feathericons.com/?query=shield
+export const shield = createIcon(
+  "M11.553 22.894a.998.998 0 00.894 0s3.037-1.516 5.465-4.097C19.616 16.987 21 14.663 21 12V5a1 1 0 00-.649-.936l-8-3a.998.998 0 00-.702 0l-8 3A1 1 0 003 5v7c0 2.663 1.384 4.987 3.088 6.797 2.428 2.581 5.465 4.097 5.465 4.097zm-1.303-8.481l6.644-6.644a.856.856 0 111.212 1.212l-7.25 7.25a.856.856 0 01-1.212 0l-3.75-3.75a.856.856 0 111.212-1.212l3.144 3.144z",
+  { width: 24 },
+);

src/css/styles.scss

@@ -266,6 +266,10 @@ button,
   align-items: flex-start;
   cursor: default;
   pointer-events: none !important;
+
+  section {
+    display: flex;
+  }
 }
 
 .App-menu_bottom > * {

src/is-mobile.tsx

@@ -7,7 +7,7 @@ export function IsMobileProvider({ children }: { children: React.ReactNode }) {
   if (!query.current) {
     query.current = window.matchMedia
       ? window.matchMedia(
-          "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)",
+          "(max-width: 640px), (max-height: 500px) and (max-width: 1000px)",
         )
       : (({
           matches: false,

src/locales/en.json

@@ -151,5 +151,8 @@
     "github": "Found an issue? Submit",
     "textNewLine": "Add new line (text)",
     "textFinish": "Finish editing (text)"
+  },
+  "encrypted": {
+    "tooltip": "Your drawings are end-to-end encrypted so Excalidraw's servers will never see them.\nClick the icon to learn more..."
   }
 }