@effindomv2/create-fui-as-app 0.1.5 → 0.1.7

package/templates/mvc/src/routes/settings/SettingsView.ts

@@ -0,0 +1,73 @@
+import { Column, Disposable, FlexBox, SelectionArea, Theme, activeTheme, bindTheme, disposeAll, Text, Unit } from "../../fui/Fui";
+import { createNavBar } from "../shared/design-system/NavBar";
+import { PrimaryButton } from "../shared/design-system/PrimaryButton";
+import { SettingsModel } from "./SettingsModel";
+
+export class SettingsView {
+  readonly actionButton: PrimaryButton;
+  private readonly statusText: Text;
+  private readonly root!: SelectionArea;
+  private readonly themeBindings: Array<Disposable> = new Array<Disposable>();
+  private themeBindingDisposed: bool = false;
+
+  constructor(model: SettingsModel) {
+    const navBar = createNavBar(false);
+
+    const title = new Text(model.title).fontSize(34.0) as Text;
+    const subtitle = new Text(model.subtitle).fontSize(16.0) as Text;
+    this.statusText = new Text("Settings saved: 0").fontSize(18.0) as Text;
+    this.actionButton = new PrimaryButton(model.actionLabel);
+
+    const content = Column(
+      navBar,
+      new FlexBox().height(24.0, Unit.Pixel),
+      title,
+      new FlexBox().height(12.0, Unit.Pixel),
+      subtitle,
+      new FlexBox().height(20.0, Unit.Pixel),
+      this.statusText,
+      new FlexBox().height(16.0, Unit.Pixel),
+      this.actionButton,
+    )
+      .width(100.0, Unit.Percent)
+      .height(100.0, Unit.Percent)
+      .padding(24.0, 24.0, 24.0, 24.0);
+
+    this.root = new SelectionArea()
+      .fillWidth()
+      .fillHeight()
+      .child(content) as SelectionArea;
+    this.trackTheme(bindTheme(this, (view, theme): void => {
+      view.applyTheme(theme);
+    }));
+    this.applyTheme(activeTheme.value);
+  }
+
+  getRoot(): SelectionArea {
+    return this.root;
+  }
+
+  dispose(): void {
+    this.disposeThemeBindings();
+  }
+
+  setSaveCount(count: i32): void {
+    this.statusText.text("Settings saved: " + count.toString());
+  }
+
+  private applyTheme(theme: Theme): void {
+    this.root.bgColor(theme.colors.background);
+  }
+
+  private trackTheme(disposable: Disposable): void {
+    this.themeBindings.push(disposable);
+  }
+
+  private disposeThemeBindings(): void {
+    if (this.themeBindingDisposed) {
+      return;
+    }
+    this.themeBindingDisposed = true;
+    disposeAll(this.themeBindings);
+  }
+}

package/templates/mvc/src/routes/shared/design-system/NavBar.ts

@@ -0,0 +1,18 @@
+import { FlexBox, JustifyContent, Row, Unit } from "../../../fui/Fui";
+import { NavPill } from "./NavPill";
+import { homeRoute, settingsRoute } from "../routes";
+
+function navSpacer(): FlexBox {
+  return new FlexBox().width(10.0, Unit.Pixel).height(1.0, Unit.Pixel);
+}
+
+export function createNavBar(homeIsActive: bool): FlexBox {
+  const homePill = new NavPill(homeRoute(), "Home").active(homeIsActive);
+  const settingsPill = new NavPill(settingsRoute(), "Settings").active(!homeIsActive);
+  return Row()
+    .width(100.0, Unit.Percent)
+    .justifyContent(JustifyContent.End)
+    .child(homePill)
+    .child(navSpacer())
+    .child(settingsPill);
+}

package/templates/mvc/src/routes/shared/design-system/NavPill.ts

@@ -0,0 +1,59 @@
+import { Disposable, Theme, activeTheme, bindTheme, disposeAll, NavLink, Text } from "../../../fui/Fui";
+
+const PILL_RADIUS: f32 = 999.0;
+const PILL_PADDING_X: f32 = 16.0;
+const PILL_PADDING_Y: f32 = 8.0;
+export class NavPill extends NavLink {
+  private readonly labelNode: Text;
+  private readonly themeBindings: Array<Disposable> = new Array<Disposable>();
+  private themeBindingDisposed: bool = false;
+  private activeValue: bool = false;
+
+  constructor(href: string, label: string) {
+    super(href, label, false);
+    this.labelNode = new Text(label)
+      .fontSize(14.0)
+      .selectable(false) as Text;
+    this
+      .cornerRadius(PILL_RADIUS)
+      .padding(PILL_PADDING_X, PILL_PADDING_Y, PILL_PADDING_X, PILL_PADDING_Y)
+      .child(this.labelNode);
+    this.trackTheme(bindTheme(this, (pill, theme): void => {
+      pill.applyVisualState(theme);
+    }));
+    this.applyVisualState(activeTheme.value);
+  }
+
+  active(flag: bool = true): this {
+    this.activeValue = flag;
+    this.applyVisualState(activeTheme.value);
+    return this;
+  }
+
+  dispose(): void {
+    this.disposeThemeBindings();
+    super.dispose();
+  }
+
+  private applyVisualState(theme: Theme): void {
+    if (this.activeValue) {
+      this.bgColor(theme.colors.accent);
+      this.labelNode.textColor(theme.colors.textPrimary);
+      return;
+    }
+    this.bgColor(theme.colors.surface);
+    this.labelNode.textColor(theme.colors.textMuted);
+  }
+
+  private trackTheme(disposable: Disposable): void {
+    this.themeBindings.push(disposable);
+  }
+
+  private disposeThemeBindings(): void {
+    if (this.themeBindingDisposed) {
+      return;
+    }
+    this.themeBindingDisposed = true;
+    disposeAll(this.themeBindings);
+  }
+}

package/{build/templates/mvc/src/routes/mvc/shared/design-system/MvcPrimaryButton.ts → templates/mvc/src/routes/shared/design-system/PrimaryButton.ts}

@@ -1,19 +1,14 @@
-import { Button, rgb } from "../../../../fui/Fui";
+import { Button } from "../../../fui/Fui";
 
 const BUTTON_RADIUS: f32 = 12.0;
 const BUTTON_PADDING_X: f32 = 18.0;
 const BUTTON_PADDING_Y: f32 = 10.0;
-const BUTTON_BG: u32 = rgb(59, 130, 246);
-const BUTTON_TEXT: u32 = rgb(241, 245, 249);
-
-export class MvcPrimaryButton extends Button {
+export class PrimaryButton extends Button {
   constructor(label: string) {
     super(label);
     this
       .cornerRadius(BUTTON_RADIUS)
       .padding(BUTTON_PADDING_X, BUTTON_PADDING_Y, BUTTON_PADDING_X, BUTTON_PADDING_Y)
-      .bgColor(BUTTON_BG)
-      .textColor(BUTTON_TEXT)
       .fontSize(14.0);
   }
 }

package/{build/templates/mvc/src/routes/mvc → templates/mvc/src/routes}/shared/routes.ts

@@ -1,10 +1,10 @@
-import { currentRoute } from "../../../fui/Fui";
+import { currentRoute } from "../../fui/Fui";
 
 const SOURCE_DEMO_BASE: string = "/v2/fui-as/demo-mvc";
-const SOURCE_HOME_ROUTE: string = "/v2/fui-as/demo-mvc/mvc-home/";
-const SOURCE_SETTINGS_ROUTE: string = "/v2/fui-as/demo-mvc/mvc-settings/";
-const PUBLISHED_HOME_ROUTE: string = "/mvc-home/";
-const PUBLISHED_SETTINGS_ROUTE: string = "/mvc-settings/";
+const SOURCE_HOME_ROUTE: string = "/v2/fui-as/demo-mvc/home/";
+const SOURCE_SETTINGS_ROUTE: string = "/v2/fui-as/demo-mvc/settings/";
+const PUBLISHED_HOME_ROUTE: string = "/home/";
+const PUBLISHED_SETTINGS_ROUTE: string = "/settings/";
 
 function isSourceDemoRoute(route: string): bool {
   if (route.length == 0) {
@@ -13,10 +13,10 @@ function isSourceDemoRoute(route: string): bool {
   return route.startsWith(SOURCE_DEMO_BASE);
 }
 
-export function mvcHomeRoute(): string {
+export function homeRoute(): string {
   return isSourceDemoRoute(currentRoute.value) ? SOURCE_HOME_ROUTE : PUBLISHED_HOME_ROUTE;
 }
 
-export function mvcSettingsRoute(): string {
+export function settingsRoute(): string {
   return isSourceDemoRoute(currentRoute.value) ? SOURCE_SETTINGS_ROUTE : PUBLISHED_SETTINGS_ROUTE;
 }

package/build/templates/hello/src/fui/Fui.ts

@@ -1 +0,0 @@
-export * from "../../node_modules/@effindomv2/fui-as/src/Fui";

package/build/templates/hello/src/fui/FuiBrowser.ts

@@ -1 +0,0 @@
-export * from "../../node_modules/@effindomv2/fui-as/browser/src/index";

package/build/templates/hello/src/fui/FuiExports.ts

@@ -1 +0,0 @@
-export * from "../../node_modules/@effindomv2/fui-as/src/FuiExports";

package/build/templates/hello/src/fui/FuiPrimitives.ts

@@ -1 +0,0 @@
-export * from "../../node_modules/@effindomv2/fui-as/src/FuiPrimitives";

package/build/templates/mvc/index.html

@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="refresh" content="0; url=/mvc-home/" />
-    <title>FUI-AS MVC App</title>
-  </head>
-  <body>
-    <p>Redirecting to <a href="/mvc-home/">/mvc-home/</a>…</p>
-  </body>
-</html>

package/build/templates/mvc/src/fui/Fui.ts

@@ -1 +0,0 @@
-export * from "../../node_modules/@effindomv2/fui-as/src/Fui";

package/build/templates/mvc/src/fui/FuiBrowser.ts

@@ -1 +0,0 @@
-export * from "../../node_modules/@effindomv2/fui-as/browser/src/index";

package/build/templates/mvc/src/fui/FuiExports.ts

@@ -1 +0,0 @@
-export * from "../../node_modules/@effindomv2/fui-as/src/FuiExports";

package/build/templates/mvc/src/fui/FuiPrimitives.ts

@@ -1 +0,0 @@
-export * from "../../node_modules/@effindomv2/fui-as/src/FuiPrimitives";

package/build/templates/mvc/src/routes/mvc/pages/settings/SettingsView.ts

@@ -1,61 +0,0 @@
-import { Column, FlexBox, JustifyContent, Row, SelectionArea, Text, Unit, rgb } from "../../../../fui/Fui";
-import { MvcNavPill } from "../../shared/design-system/MvcNavPill";
-import { MvcPrimaryButton } from "../../shared/design-system/MvcPrimaryButton";
-import { mvcHomeRoute, mvcSettingsRoute } from "../../shared/routes";
-import { SettingsModel } from "./SettingsModel";
-
-function navSpacer(): FlexBox {
-  return new FlexBox().width(10.0, Unit.Pixel).height(1.0, Unit.Pixel);
-}
-
-export class SettingsView {
-  readonly actionButton: MvcPrimaryButton;
-  private readonly statusText: Text;
-  private readonly root!: SelectionArea;
-
-  constructor(model: SettingsModel) {
-    const homePill = new MvcNavPill(mvcHomeRoute(), "Home").active(false);
-    const settingsPill = new MvcNavPill(mvcSettingsRoute(), "Settings").active(true);
-
-    const navBar = Row()
-      .width(100.0, Unit.Percent)
-      .justifyContent(JustifyContent.End)
-      .child(homePill)
-      .child(navSpacer())
-      .child(settingsPill);
-
-    const title = new Text(model.title).fontSize(34.0).textColor(rgb(241, 245, 249)) as Text;
-    const subtitle = new Text(model.subtitle).fontSize(16.0).textColor(rgb(148, 163, 184)) as Text;
-    this.statusText = new Text("Settings saved: 0").fontSize(18.0).textColor(rgb(134, 239, 172)) as Text;
-    this.actionButton = new MvcPrimaryButton(model.actionLabel);
-
-    const content = Column(
-      navBar,
-      new FlexBox().height(24.0, Unit.Pixel),
-      title,
-      new FlexBox().height(12.0, Unit.Pixel),
-      subtitle,
-      new FlexBox().height(20.0, Unit.Pixel),
-      this.statusText,
-      new FlexBox().height(16.0, Unit.Pixel),
-      this.actionButton,
-    )
-      .width(100.0, Unit.Percent)
-      .height(100.0, Unit.Percent)
-      .padding(24.0, 24.0, 24.0, 24.0);
-
-    this.root = new SelectionArea()
-      .fillWidth()
-      .fillHeight()
-      .bgColor(rgb(2, 6, 23))
-      .child(content) as SelectionArea;
-  }
-
-  getRoot(): SelectionArea {
-    return this.root;
-  }
-
-  setSaveCount(count: i32): void {
-    this.statusText.text("Settings saved: " + count.toString());
-  }
-}

package/build/templates/mvc/src/routes/mvc/shared/design-system/MvcNavPill.ts

@@ -1,42 +0,0 @@
-import { NavLink, Text, rgb } from "../../../../fui/Fui";
-
-const PILL_RADIUS: f32 = 999.0;
-const PILL_PADDING_X: f32 = 16.0;
-const PILL_PADDING_Y: f32 = 8.0;
-const PILL_INACTIVE_BG: u32 = rgb(33, 45, 67);
-const PILL_ACTIVE_BG: u32 = rgb(34, 197, 94);
-const PILL_INACTIVE_TEXT: u32 = rgb(226, 232, 240);
-const PILL_ACTIVE_TEXT: u32 = rgb(12, 16, 24);
-
-export class MvcNavPill extends NavLink {
-  private readonly labelNode: Text;
-  private activeValue: bool = false;
-
-  constructor(href: string, label: string) {
-    super(href, label, false);
-    this.labelNode = new Text(label)
-      .fontSize(14.0)
-      .selectable(false) as Text;
-    this
-      .cornerRadius(PILL_RADIUS)
-      .padding(PILL_PADDING_X, PILL_PADDING_Y, PILL_PADDING_X, PILL_PADDING_Y)
-      .child(this.labelNode);
-    this.applyVisualState();
-  }
-
-  active(flag: bool = true): this {
-    this.activeValue = flag;
-    this.applyVisualState();
-    return this;
-  }
-
-  private applyVisualState(): void {
-    if (this.activeValue) {
-      this.bgColor(PILL_ACTIVE_BG);
-      this.labelNode.textColor(PILL_ACTIVE_TEXT);
-      return;
-    }
-    this.bgColor(PILL_INACTIVE_BG);
-    this.labelNode.textColor(PILL_INACTIVE_TEXT);
-  }
-}

package/build/templates/mvc/src/routes/mvc_home.ts

@@ -1,20 +0,0 @@
-export * from "../fui/FuiExports";
-export * from "../host/generated/HostEvents";
-
-import { Node, createManagedApplication } from "../fui/Fui";
-import { HomeController } from "./mvc/pages/home/HomeController";
-
-const app = createManagedApplication<HomeController>(
-  () => new HomeController(),
-  (controller): Node => controller.getRoot(),
-  (controller): void => controller.mount(),
-  (controller): void => controller.dispose(),
-);
-
-export function __runApp(): void {
-  app.run();
-}
-
-export function __disposeApp(): void {
-  app.dispose();
-}

package/build/templates/mvc/src/routes/mvc_settings.ts

@@ -1,20 +0,0 @@
-export * from "../fui/FuiExports";
-export * from "../host/generated/HostEvents";
-
-import { Node, createManagedApplication } from "../fui/Fui";
-import { SettingsController } from "./mvc/pages/settings/SettingsController";
-
-const app = createManagedApplication<SettingsController>(
-  () => new SettingsController(),
-  (controller): Node => controller.getRoot(),
-  (controller): void => controller.mount(),
-  (controller): void => controller.dispose(),
-);
-
-export function __runApp(): void {
-  app.run();
-}
-
-export function __disposeApp(): void {
-  app.dispose();
-}

package/dist/scripts/sync-templates.d.ts

@@ -1 +0,0 @@
-export {};