Add 'New File' button in code submode (#797)

cardstack · Nov 7, 2023 · 171dfb2 · 171dfb2
1 parent ac12391
commit 171dfb2
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 23 deletions.
diff --git a/packages/boxel-ui/addon/src/styles/variables.css b/packages/boxel-ui/addon/src/styles/variables.css
@@ -36,8 +36,8 @@
   /* Modular scale for spacing */
   --boxel-spacing: 1.25rem; /* base size (20px) */
   --boxel-ratio: 1.333; /* scale (based on "Perfect Fourth" scale) */
-  --boxel-sp-xxxxxs: calc(var(--boxel-sp-xxxxs) / var(--boxel-ratio)); /* 3.57px */
-  --boxel-sp-xxxxs: calc(var(--boxel-sp-xxxs) / var(--boxel-ratio)); /* 4.75px */
+  --boxel-sp-5xs: calc(var(--boxel-sp-4xs) / var(--boxel-ratio)); /* 3.57px */
+  --boxel-sp-4xs: calc(var(--boxel-sp-xxxs) / var(--boxel-ratio)); /* 4.75px */
   --boxel-sp-xxxs: calc(var(--boxel-sp-xxs) / var(--boxel-ratio)); /* 6.33px */
   --boxel-sp-xxs: calc(var(--boxel-sp-xs) / var(--boxel-ratio)); /* 8.44px */
   --boxel-sp-xs: calc(var(--boxel-sp-sm) / var(--boxel-ratio)); /* 11.26px */

diff --git a/packages/host/app/components/operator-mode/card-schema-editor.gts b/packages/host/app/components/operator-mode/card-schema-editor.gts
@@ -143,7 +143,7 @@ export default class CardSchemaEditor extends Component<Signature> {
         display: inline-flex;
         font: 700 var(--boxel-font);
         letter-spacing: var(--boxel-lsp-xs);
-        padding: var(--boxel-sp-xxxxxs) var(--boxel-sp-xxs);
+        padding: var(--boxel-sp-5xs) var(--boxel-sp-xxs);
         background-color: var(--boxel-200);
         border-radius: var(--boxel-border-radius-sm);
         margin-right: var(--boxel-sp-xxs);
@@ -155,7 +155,7 @@ export default class CardSchemaEditor extends Component<Signature> {
         align-items: center;
         height: 20px;
 
-        margin-right: var(--boxel-sp-xxxxxs);
+        margin-right: var(--boxel-sp-5xs);
       }
 
       .field-name {

diff --git a/packages/host/app/components/operator-mode/card-url-bar.gts b/packages/host/app/components/operator-mode/card-url-bar.gts
@@ -92,8 +92,10 @@ export default class CardURLBar extends Component<Signature> {
     <style>
       :global(:root) {
         --card-url-bar-width: 100%;
+        --card-url-bar-height: var(--boxel-form-control-height);
       }
       .card-url-bar {
+        position: relative;
         display: flex;
         align-items: center;
 
@@ -102,6 +104,7 @@ export default class CardURLBar extends Component<Signature> {
         padding: var(--boxel-sp-xs) 0 var(--boxel-sp-xs) var(--boxel-sp-sm);
 
         width: var(--card-url-bar-width);
+        height: var(--card-url-bar-height);
       }
       .focused {
         outline: 2px solid var(--boxel-highlight);

diff --git a/packages/host/app/components/operator-mode/code-submode.gts b/packages/host/app/components/operator-mode/code-submode.gts
@@ -84,6 +84,7 @@ import CardURLBar from './card-url-bar';
 import DeleteModal from './delete-modal';
 import DetailPanel from './detail-panel';
 import SubmodeLayout from './submode-layout';
+import NewFileButton from './new-file-button';
 
 import { getCard } from '@cardstack/host/resources/card-resource';
 
@@ -727,14 +728,16 @@ export default class CodeSubmode extends Component<Signature> {
         ></div>
       </:ready>
     </RealmInfoProvider>
-    <CardURLBar
-      @loadFileError={{this.loadFileError}}
-      @resetLoadFileError={{this.resetLoadFileError}}
-      @userHasDismissedError={{this.userHasDismissedURLError}}
-      @dismissURLError={{this.dismissURLError}}
-      @realmURL={{this.realmURL}}
-      class='card-url-bar'
-    />
+    <div class='code-mode-top-bar'>
+      <CardURLBar
+        @loadFileError={{this.loadFileError}}
+        @resetLoadFileError={{this.resetLoadFileError}}
+        @userHasDismissedError={{this.userHasDismissedURLError}}
+        @dismissURLError={{this.dismissURLError}}
+        @realmURL={{this.realmURL}}
+      />
+      <NewFileButton />
+    </div>
     <SubmodeLayout @onCardSelectFromSearch={{this.openSearchResultInEditor}}>
       <div
         class='code-mode'
@@ -1070,16 +1073,17 @@ export default class CodeSubmode extends Component<Signature> {
         background: var(--boxel-light);
       }
 
-      .card-url-bar {
-        position: absolute;
-        top: var(--boxel-sp);
-        left: calc(var(--submode-switcher-width) + (var(--boxel-sp) * 2));
-
-        --card-url-bar-width: calc(
-          100% - (var(--submode-switcher-width) + (var(--boxel-sp) * 3))
+      .code-mode-top-bar {
+        --code-mode-top-bar-padding-left: calc(
+          var(--submode-switcher-width) + (var(--boxel-sp) * 2)
         );
-        height: var(--submode-switcher-height);
 
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: var(--boxel-sp) var(--boxel-sp) 0
+          var(--code-mode-top-bar-padding-left);
+        display: flex;
         z-index: 2;
       }
 

diff --git a/packages/host/app/components/operator-mode/new-file-button.gts b/packages/host/app/components/operator-mode/new-file-button.gts
@@ -0,0 +1,54 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { array } from '@ember/helper';
+import { noop } from 'lodash';
+import { BoxelDropdown, Button, Menu } from '@cardstack/boxel-ui/components';
+import { menuItem } from '@cardstack/boxel-ui/helpers';
+import { IconPlus } from '@cardstack/boxel-ui/icons';
+
+const NewFileButton: TemplateOnlyComponent = <template>
+  <BoxelDropdown>
+    <:trigger as |bindings|>
+      <Button
+        {{bindings}}
+        @kind='primary'
+        @size='small'
+        class='new-file-button'
+        data-test-new-file-button
+      >
+        <IconPlus
+          @width='var(--boxel-icon-sm)'
+          @height='var(--boxel-icon-sm)'
+          stroke='var(--boxel-light)'
+          stroke-width='1px'
+          aria-label='Add'
+          class='new-file-button-icon'
+        />
+        New File
+      </Button>
+    </:trigger>
+    <:content as |dd|>
+      <Menu
+        @items={{array (menuItem 'Card Instance' noop disabled=true)}}
+        @closeMenu={{dd.close}}
+      />
+    </:content>
+  </BoxelDropdown>
+  <style>
+    .new-file-button {
+      --new-file-button-width: 7.5rem;
+      --new-file-button-height: var(--boxel-form-control-height);
+      --boxel-button-text-color: var(--boxel-light);
+
+      height: var(--new-file-button-height);
+      width: var(--new-file-button-width);
+      margin-left: var(--boxel-sp);
+    }
+    .new-file-button-icon {
+      --icon-color: var(--boxel-light);
+      flex-shrink: 0;
+      margin-right: var(--boxel-sp-5xs);
+    }
+  </style>
+</template>;
+
+export default NewFileButton;
diff --git a/packages/host/app/components/pill.gts b/packages/host/app/components/pill.gts
@@ -30,8 +30,8 @@ export default class Pill extends Component<PillSignature> {
       .pill {
         display: inline-flex;
         align-items: center;
-        padding: var(--boxel-sp-xxxxxs) var(--boxel-sp-xxxs)
-          var(--boxel-sp-xxxxxs) var(--boxel-sp-xxxxxs);
+        padding: var(--boxel-sp-5xs) var(--boxel-sp-xxxs) var(--boxel-sp-5xs)
+          var(--boxel-sp-5xs);
         background-color: var(--boxel-light);
         border: 1px solid var(--boxel-400);
         border-radius: var(--boxel-border-radius-sm);
@@ -53,7 +53,7 @@ export default class Pill extends Component<PillSignature> {
         display: flex;
         margin-block: 0;
         margin-inline: 0;
-        margin-right: var(--boxel-sp-xxxxxs);
+        margin-right: var(--boxel-sp-5xs);
       }
 
       .icon > :deep(*) {