minor ui tweaks

Author: Rdmkr

gui-js/apps/minsky-electron/src/app/managers/CommandsManager.ts

@@ -603,9 +603,9 @@ export class CommandsManager {
     const type=await v.type();
     const local=await v.local();
     WindowManager.createPopupWindowWithRouting({
-      width: 500,
-      height: 650,
-      title: `Edit ${name} || ''}`,
+      width: 400,
+      height: 500,
+      title: `Edit ${name || ''}`,
       url: `#/headless/menu/insert/create-variable?type=${type}&name=${encodeURIComponent(name)||''}&isEditMode=true&local=${local}`,
     });
   }
@@ -615,11 +615,12 @@ export class CommandsManager {
     let width = 500;
     switch (classType) {
       case ClassType.Group:
-        height = 240;
+        width = 400;
+        height = 130;
         break;
       case ClassType.Operation:
-        height = 250;
-        width = 350;
+        height = 200;
+        width = 300;
         break;
       case ClassType.UserFunction:
         height = 250;

gui-js/apps/minsky-electron/src/app/managers/ContextMenuManager.ts

@@ -590,12 +590,12 @@ export class ContextMenuManager {
     let op=new OperationBase(minsky.canvas.item);
 
     let portValues;
-    op.portValues().
+    await op.portValues().
       then((x)=>{portValues=x;}).
       catch((x)=>{portValues = 'unknown';});
 
     let menuItems = [
-      new MenuItem({ label: `Port values ${portValues}}` }),
+      new MenuItem({ label: `Port values ${portValues}` }),
       new MenuItem({
         label: 'Edit',
         click: async () => {

gui-js/libs/ui-components/src/lib/edit-group/edit-group.component.html

@@ -1,35 +1,32 @@
-<div class="form-wrapper">
-  <br />
-
-  <form [formGroup]="form">
+<form [formGroup]="form">
+  <div class="form-body">
     <div class="form-control">
       <label for="name">Name</label>
       <input type="text" class="name" id="name" formControlName="name" />
     </div>
 
     <div class="form-control">
       <label for="rotation">Rotation</label>
-      <input
-        type="text"
-        class="rotation"
-        id="rotation"
-        formControlName="rotation"
-      />
+      <input type="text" class="rotation" id="rotation" formControlName="rotation" />
     </div>
+  </div>
 
-    <div class="form-buttons">
-      <button mat-raised-button class="btn cancel-btn" (click)="closeWindow()">
-        Cancel
-      </button>
+  <div class="form-buttons">
+    <button
+      mat-raised-button
+      class="btn cancel-btn"
+      (click)="closeWindow()"
+    >
+      Cancel
+    </button>
 
-      <button
-        mat-raised-button
-        class="btn ok-btn submit"
-        type="submit"
-        (click)="handleSave()"
-      >
-        OK
-      </button>
-    </div>
-  </form>
-</div>
+    <button
+      mat-raised-button
+      class="btn ok-btn submit"
+      type="submit"
+      (click)="handleSave()"
+    >
+      OK
+    </button>
+  </div>
+</form>

gui-js/libs/ui-components/src/lib/edit-group/edit-group.component.scss

@@ -4,6 +4,56 @@ select {
   width: 125px;
 }
 
-button {
-  margin: $margin;
-}
+form {
+  width: 100vw;
+  height: 100vh;
+
+  overflow: hidden;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+
+  .form-title {
+    width: 100%;
+
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-weight: bold;
+  }
+
+  .form-body {
+    padding: 10px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+    
+    .form-control {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+
+      * {
+        flex: 1;
+        max-width: 200px;
+      }
+    }
+  }
+
+  .form-buttons {
+    margin: 0px;
+    button {
+      margin: 5px;
+    }
+  }
+}