Run Button shared between mobile REPL and editor (#265)

* Use -webkit-background-clip with text value

* Add run btn that is used on editor & repl mobile

* Add run btn funcionality to repl mobile

* On mobile REPL show only run btn spinner

Remove spinner from editor window. On desktop keep showing it.

* Fix lint error, delete unused code

shared/common/styles.scss

@@ -3,7 +3,11 @@
 :root {
   --baseTextLightTheme: #1a1a1a;
   --baseTextDarkTheme: #b9b9b9;
-  --accentPurple: #b199f2;
+
+  --accentGreenLightTheme: #2cb88e;
+  --accentGreenDarkTheme: #279474;
+
+  --accentPurpleLightTheme: #b199f2;
 
   --grey8: #141414;
   --grey12: #1f1f1f;

shared/common/ui/icons/index.tsx

@@ -84,6 +84,23 @@ export const CrossIcon = () => (
   </svg>
 );
 
+export const RunIcon = () => (
+  <svg
+    width="11.43"
+    height="14"
+    viewBox="0 0 12 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.55844 13.2879L10.9091 7.89815C11.6017 7.49891 11.6017 6.50081 10.9091 6.10157L1.55844 0.711803C0.865802 0.312562 9.9083e-07 0.811613 9.9083e-07 1.6101L0 12.3896C0 13.1881 0.865801 13.6872 1.55844 13.2879Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
 export const SearchIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

shared/common/ui/mobileButtons/index.tsx

@@ -0,0 +1,40 @@
+import cn from "@edgedb/common/utils/classNames";
+import {CrossIcon, RunIcon} from "../icons";
+import styles from "./mobileButtons.module.scss";
+import Spinner from "../spinner";
+
+interface CloseButtonProps {
+  onClick: () => void;
+  className?: string;
+}
+
+export const CloseButton = ({onClick, className}: CloseButtonProps) => (
+  <button
+    onClick={onClick}
+    className={cn(styles.container, styles.close, className)}
+  >
+    <CrossIcon />
+  </button>
+);
+
+interface RunButtonProps {
+  onClick: () => void;
+  className?: string;
+  disabled?: boolean;
+  isLoading?: boolean;
+}
+
+export const RunButton = ({
+  onClick,
+  className,
+  disabled = false,
+  isLoading = false,
+}: RunButtonProps) => (
+  <button
+    className={cn(styles.container, styles.run, className)}
+    onClick={onClick}
+    disabled={disabled}
+  >
+    {isLoading ? <Spinner size={22} /> : <RunIcon />}
+  </button>
+);

shared/common/ui/mobileButtons/mobileButtons.module.scss

@@ -0,0 +1,40 @@
+@import "../../mixins.scss";
+
+.container {
+  border: none;
+  border-radius: 50%;
+  color: #f9f9f9;
+  filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.2));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.run {
+    height: 40px;
+    width: 40px;
+    background-color: var(--accentGreenLightTheme);
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &.close {
+    width: 48px;
+    height: 48px;
+    background-color: var(--accentPurpleLightTheme);
+  }
+
+  @include darkTheme {
+    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.2));
+    color: var(--grey8);
+
+    &.close {
+      background-color: var(--grey60);
+    }
+
+    &.run {
+      background-color: var(--accentGreenDarkTheme);
+    }
+  }
+}

shared/common/ui/navtabs/mobile.tsx

@@ -4,7 +4,7 @@ import cn from "../../utils/classNames";
 import {useModal} from "../../hooks/useModal";
 import {BaseTabBarProps} from "./interfaces";
 import {ThemeSwitcher} from "../themeSwitcher";
-import CloseButton from "../closeButton";
+import {CloseButton} from "../mobileButtons";
 import styles from "./mobileNavTabs.module.scss";
 
 export interface MobileNavTabsProps extends BaseTabBarProps {

shared/common/ui/themeSwitcher/themeSwitcher.module.scss

@@ -50,6 +50,10 @@
       svg {
         opacity: 1;
       }
+
+      @include breakpoint(mobile) {
+        color: var(--baseText);
+      }
     }
 
     @include breakpoint(mobile) {
@@ -59,11 +63,6 @@
 
     &.active {
       color: #74a6fc;
-      // background-color: var(--grey95);
-
-      @include darkTheme {
-        // background-color: #242424;
-      }
 
       @include breakpoint(mobile) {
         background-color: #fff;

shared/studio/tabs/dashboard/databaseDashboard.module.scss

@@ -173,6 +173,7 @@
 
     background: linear-gradient(90.06deg, #a088ff 1.59%, #e48da2 102.98%);
     background-clip: text;
+    -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
 

shared/studio/tabs/queryEditor/index.tsx

@@ -5,6 +5,7 @@ import {Text} from "@codemirror/state";
 import cn from "@edgedb/common/utils/classNames";
 
 import {CodeEditor, CodeEditorRef} from "@edgedb/code-editor";
+import {RunButton} from "@edgedb/common/ui/mobileButtons";
 
 import styles from "./repl.module.scss";
 
@@ -26,7 +27,7 @@ import {CustomScrollbars} from "@edgedb/common/ui/customScrollbar";
 
 import {HistoryPanel} from "./history";
 import ParamEditorPanel from "./paramEditor";
-import {TabEditorIcon, MobileHistoryIcon, MobileRunIcon} from "../../icons";
+import {TabEditorIcon, MobileHistoryIcon} from "../../icons";
 import {useResize} from "@edgedb/common/hooks/useResize";
 import {VisualQuerybuilder} from "../../components/visualQuerybuilder";
 import Inspector from "@edgedb/inspector";
@@ -172,21 +173,13 @@ export const QueryEditorView = observer(function QueryEditorView() {
             )
           }
         />
-        <button
-          className={cn(styles.mobileBtn, {
-            [styles.running]: editorState.queryRunning,
-          })}
+        <RunButton
           onClick={() => editorState.runQuery()}
+          isLoading={editorState.queryRunning}
           disabled={
             !editorState.canRunQuery || !!splitViewState.activeViewIndex
           }
-        >
-          {editorState.queryRunning ? (
-            <Spinner size={22} />
-          ) : (
-            <MobileRunIcon className={styles.mobileRunIcon} />
-          )}
-        </button>
+        />
       </div>
       {editorState.showHistory && (
         <div className={styles.mobileHistory}>

shared/studio/tabs/repl/index.tsx

@@ -56,6 +56,7 @@ import {useDBRouter} from "../../hooks/dbRoute";
 import styles from "./repl.module.scss";
 import {isEndOfStatement} from "./state/utils";
 import {useIsMobile} from "@edgedb/common/hooks/useMobile";
+import {RunButton} from "@edgedb/common/ui/mobileButtons";
 
 const ReplView = observer(function ReplView() {
   const replState = useTabState(Repl);
@@ -229,6 +230,12 @@ const ReplList = observer(function ReplList({
         </div>
         <ReplInput />
       </div>
+      <RunButton
+        onClick={() => replState.runQuery()}
+        isLoading={replState.queryRunning}
+        disabled={!replState.canRunQuery}
+        className={styles.runBtn}
+      />
     </div>
   );
 });
@@ -476,9 +483,13 @@ const ReplHistoryItem = observer(function ReplHistoryItem({
     output = renderCommandResult(item.commandResult.data);
   } else {
     output = (
-      <div style={{marginLeft: 8}}>
-        <Spinner size={18} />
-      </div>
+      <>
+        {!isMobile ? (
+          <div style={{marginLeft: 8}}>
+            <Spinner size={18} />
+          </div>
+        ) : null}
+      </>
     );
   }
 

shared/studio/tabs/repl/repl.module.scss

@@ -116,6 +116,17 @@
   overflow: auto;
 
   @include hideScrollbar;
+
+  .runBtn {
+    display: none;
+
+    @include breakpoint(mobile) {
+      display: flex;
+      position: absolute;
+      bottom: 8px;
+      right: 16px;
+    }
+  }
 }
 
 .scrollInner {

shared/studio/tabs/repl/state/index.ts

@@ -1,4 +1,4 @@
-import {action, observable} from "mobx";
+import {action, observable, computed} from "mobx";
 import {
   Frozen,
   frozen,
@@ -310,6 +310,11 @@ export class Repl extends Model({
   @observable
   queryRunning = false;
 
+  @computed
+  get canRunQuery() {
+    return !this.queryRunning && !!this.currentQuery.toString().trim();
+  }
+
   @modelFlow
   runQuery = _async(function* (this: Repl, queryStr?: string) {
     const dbState = dbCtx.get(this)!;