feat: Slider add children to thumb

I am not super happy with how this works as the child is inside the thumb div. Ideally it should be moving around the thumb, but then that might be a tooltip lib?
2026-01-12 07:12:54 +01:00 · 2024-05-21 16:47:16 +02:00
22 changed files with 55 additions and 188 deletions
--- a/package.json
+++ b/package.json
@@ -2,8 +2,8 @@
  "private": true,
  "name": "@noodl/repo",
  "description": "Low-code for when experience matter",
-  "author": "Fluxscape <contact@fluxcsape.io>",
+  "author": "Noodl <info@noodl.net>",
-  "homepage": "https://fluxscape.io",
+  "homepage": "https://noodl.net",
  "version": "1.0.0",
  "workspaces": [
    "packages/*"
--- a/packages/noodl-core-ui/src/components/popups/Tooltip/Tooltip.tsx
+++ b/packages/noodl-core-ui/src/components/popups/Tooltip/Tooltip.tsx
@@ -11,7 +11,7 @@ import css from './Tooltip.module.scss';
 export interface TooltipProps extends UnsafeStyleProps {
  content: SingleSlot;
-  fineType?: string | string[];
+  fineType?: string;
  children: Slot;
  showAfterMs?: number;
@@ -79,17 +79,9 @@ export function Tooltip({
        {fineType && (
          <div className={css['FineType']}>
            {Array.isArray(fineType) ? (
              fineType.map((x) => (
                <Label size={LabelSize.Small} variant={TextType.Secondary}>
                  {x}
                </Label>
              ))
            ) : (
            <Label size={LabelSize.Small} variant={TextType.Secondary}>
              {fineType}
            </Label>
            )}
          </div>
        )}
      </BaseDialog>
--- a/packages/noodl-editor/src/editor/index.html
+++ b/packages/noodl-editor/src/editor/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <title>Fluxscape</title>
+    <title>Noodl</title>
    <link href="../assets/lib/fontawesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="../assets/css/style.css" rel="stylesheet" />
--- a/packages/noodl-editor/src/editor/src/constants/Keybindings.ts
+++ b/packages/noodl-editor/src/editor/src/constants/Keybindings.ts
@@ -2,11 +2,6 @@ import { Keybinding } from '@noodl-utils/keyboard/Keybinding';
 import { KeyCode, KeyMod } from '@noodl-utils/keyboard/KeyCode';
 export namespace Keybindings {
  export const SEARCH = new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_F);
  export const CLOUD_SERVICE_OPEN_DASHBOARD = new Keybinding(KeyMod.CtrlCmd, KeyMod.Shift, KeyCode.KEY_P);
  export const CLOUD_SERVICE_OPEN_DASHBOARD_BROWSER = new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_P);
  export const REFRESH_PREVIEW = new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_R);
  export const OPEN_DEVTOOLS = new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_D);
  export const OPEN_CLOUD_DEVTOOLS = new Keybinding(KeyMod.CtrlCmd, KeyMod.Shift, KeyCode.KEY_R);
--- a/packages/noodl-editor/src/editor/src/router.setup.ts
+++ b/packages/noodl-editor/src/editor/src/router.setup.ts
@@ -1,6 +1,7 @@
 import { AppRegistry } from '@noodl-models/app_registry';
 import { SidebarModel } from '@noodl-models/sidebar';
-import { Keybindings } from '@noodl-constants/Keybindings';
+import { Keybinding } from '@noodl-utils/keyboard/Keybinding';
 import { KeyCode, KeyMod } from '@noodl-utils/keyboard/KeyCode';
 import { IconName } from '@noodl-core-ui/components/common/Icon';
@@ -68,7 +69,7 @@ export function installSidePanel({ isLesson }: SetupEditorOptions) {
  SidebarModel.instance.register({
    id: 'search',
    name: 'Search',
-    fineType: Keybindings.SEARCH.label,
+    fineType: new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_F).label,
    order: 2,
    icon: IconName.Search,
    panel: SearchPanel
--- a/packages/noodl-editor/src/editor/src/utils/compilation/build/processors/html-processor.ts
+++ b/packages/noodl-editor/src/editor/src/utils/compilation/build/processors/html-processor.ts
@@ -41,7 +41,7 @@ export class HtmlProcessor {
      baseUrl = baseUrl + '/';
    }
-    const title = parameters.title || settings.htmlTitle || 'Fluxscape Viewer';
+    const title = parameters.title || settings.htmlTitle || 'Noodl Viewer';
    let headCode = settings.headCode || '';
    if (parameters.headCode) {
--- a/packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCard/CloudServiceCard.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCard/CloudServiceCard.tsx
@@ -1,16 +1,13 @@
 import classNames from 'classnames';
 import React, { useEffect, useRef, useState } from 'react';
 import { Keybindings } from '@noodl-constants/Keybindings';
 import { Environment } from '@noodl-models/CloudServices';
 import ParseDashboardServer from '@noodl-utils/parsedashboardserver';
 import { Icon, IconName, IconSize } from '@noodl-core-ui/components/common/Icon';
 import { IconButton, IconButtonState, IconButtonVariant } from '@noodl-core-ui/components/inputs/IconButton';
 import { PrimaryButton, PrimaryButtonSize, PrimaryButtonVariant } from '@noodl-core-ui/components/inputs/PrimaryButton';
 import { DialogRenderDirection } from '@noodl-core-ui/components/layout/BaseDialog';
 import { Collapsible } from '@noodl-core-ui/components/layout/Collapsible';
 import { Tooltip } from '@noodl-core-ui/components/popups/Tooltip';
 import { Label, LabelSpacingSize } from '@noodl-core-ui/components/typography/Label';
 import { Text, TextType } from '@noodl-core-ui/components/typography/Text';
@@ -121,21 +118,12 @@ export function CloudServiceCard({
          </div>
          {isEditorEnvironment && (
            <Tooltip
              content="Open the Parse Dashboard"
              fineType={[
                `In Window: ${Keybindings.CLOUD_SERVICE_OPEN_DASHBOARD.label}`,
                `In Browser: ${Keybindings.CLOUD_SERVICE_OPEN_DASHBOARD_BROWSER.label}`
              ]}
              renderDirection={DialogRenderDirection.Below}
            >
            <PrimaryButton
              label="Open dashboard"
              size={PrimaryButtonSize.Small}
              onClick={onDashboardClicked}
              isGrowing
            />
            </Tooltip>
          )}
        </div>
      </div>
--- a/packages/noodl-editor/src/frames/viewer-frame/index.html
+++ b/packages/noodl-editor/src/frames/viewer-frame/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <title>Fluxscape Viewer</title>
+    <title>Noodl Viewer</title>
    <link href="../../assets/lib/fontawesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/style.css" rel="stylesheet">
    <script type="text/javascript" src="../../assets/lib/jquery-min.js"></script>
--- a/packages/noodl-editor/src/main/src/web-server.js
+++ b/packages/noodl-editor/src/main/src/web-server.js
@@ -67,7 +67,7 @@ function startServer(app, projectGetSettings, projectGetInfo, projectGetComponen
        ProjectModules.instance.injectIntoHtml(info.projectDirectory, data, '/', function (injected) {
          projectGetSettings((settings) => {
            settings = settings || {};
-            injected = injected.replace('{{#title#}}', settings.htmlTitle || 'Fluxscape Viewer');
+            injected = injected.replace('{{#title#}}', settings.htmlTitle || 'Noodl Viewer');
            injected = injected.replace('{{#customHeadCode#}}', settings.headCode || '');
            response.writeHead(200, {
--- a/packages/noodl-git/package.json
+++ b/packages/noodl-git/package.json
@@ -3,8 +3,8 @@
  "version": "2.7.0",
  "main": "src/index.ts",
  "description": "",
-  "author": "Fluxscape <contact@fluxscape.io>",
+  "author": "Noodl <info@noodl.net>",
-  "homepage": "https://fluxscape.io",
+  "homepage": "https://noodl.net",
  "dependencies": {
    "desktop-trampoline": "https://github.com/desktop/desktop-trampoline/archive/refs/tags/v0.9.8.tar.gz",
    "dugite": "^1.106.0",
--- a/packages/noodl-platform-electron/package.json
+++ b/packages/noodl-platform-electron/package.json
@@ -3,8 +3,8 @@
  "version": "2.7.0",
  "main": "src/index.ts",
  "description": "Cross platform implementation of platform specific features.",
-  "author": "Fluxscape <contact@fluxscape.io>",
+  "author": "Noodl <info@noodl.net>",
-  "homepage": "https://fluxscape.io",
+  "homepage": "https://noodl.net",
  "dependencies": {
    "@noodl/platform": "file:../noodl-platform",
    "@noodl/platform-node": "file:../noodl-platform-node"
--- a/packages/noodl-platform-node/package.json
+++ b/packages/noodl-platform-node/package.json
@@ -3,8 +3,8 @@
  "version": "2.7.0",
  "main": "src/index.ts",
  "description": "Cross platform implementation of platform specific features.",
-  "author": "Fluxscape <contact@fluxscape.io>",
+  "author": "Noodl <info@noodl.net>",
-  "homepage": "https://fluxscape.io",
+  "homepage": "https://noodl.net",
  "scripts": {
    "test": "jest",
    "test:coverage": "jest --coverage"
--- a/packages/noodl-platform/package.json
+++ b/packages/noodl-platform/package.json
@@ -3,6 +3,6 @@
  "version": "2.7.0",
  "main": "src/index.ts",
  "description": "Cross platform implementation of platform specific features.",
-  "author": "Fluxscape <contact@fluxscape.io>",
+  "author": "Noodl <info@noodl.net>",
-  "homepage": "https://fluxscape.io"
+  "homepage": "https://noodl.net"
 }
--- a/packages/noodl-runtime/src/nodes/std-library/data/setdbmodelpropertiesnode.js
+++ b/packages/noodl-runtime/src/nodes/std-library/data/setdbmodelpropertiesnode.js
@@ -75,10 +75,10 @@ var SetDbModelPropertiedNodeDefinition = {
            _this.setError('Missing Record Id');
            return;
          }
          var model = internal.model;
-          const model = internal.model;
+          for (var i in internal.inputValues) {
-          for (const key in internal.inputValues) {
+            model.set(i, internal.inputValues[i], { resolve: true });
            model.set(key, internal.inputValues[key], { resolve: true });
          }
          CloudStore.forScope(_this.nodeScope.modelScope).save({
--- a/packages/noodl-runtime/src/nodes/std-library/datetostring.js
+++ b/packages/noodl-runtime/src/nodes/std-library/datetostring.js
@@ -59,7 +59,6 @@ const DateToStringNode = {
      const month = ('0' + (t.getMonth() + 1)).slice(-2);
      const monthShort = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(t);
      const year = t.getFullYear();
      const yearShort = year.toString().substring(2);
      const hours = ('0' + t.getHours()).slice(-2);
      const minutes = ('0' + t.getMinutes()).slice(-2);
      const seconds = ('0' + t.getSeconds()).slice(-2);
@@ -69,7 +68,6 @@ const DateToStringNode = {
        .replace(/\{month\}/g, month)
        .replace(/\{monthShort\}/g, monthShort)
        .replace(/\{year\}/g, year)
        .replace(/\{yearShort\}/g, yearShort)
        .replace(/\{hours\}/g, hours)
        .replace(/\{minutes\}/g, minutes)
        .replace(/\{seconds\}/g, seconds);
--- a/packages/noodl-types/package.json
+++ b/packages/noodl-types/package.json
@@ -3,6 +3,6 @@
  "version": "2.7.0",
  "main": "src/index.d.ts",
  "description": "",
-  "author": "Fluxscape <contact@fluxscape.io>",
+  "author": "Noodl <info@noodl.net>",
-  "homepage": "https://fluxscape.io"
+  "homepage": "https://noodl.net"
 }
--- a/packages/noodl-viewer-cloud/package.json
+++ b/packages/noodl-viewer-cloud/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@noodl/cloud-runtime",
-  "author": "Fluxscape <contact@fluxscape.io>",
+  "author": "Noodl <info@noodl.net>",
-  "homepage": "https://fluxscape.io",
+  "homepage": "https://noodl.net",
  "version": "0.6.3",
  "license": "MIT",
  "main": "dist/main.js",
--- a/packages/noodl-viewer-cloud/static/viewer/global.d.ts.keep
+++ b/packages/noodl-viewer-cloud/static/viewer/global.d.ts.keep
@@ -74,59 +74,6 @@ declare namespace Noodl {
   */
  const Object: any;
  type RecordQuery<T> =
    {
      lessThan: T
    } |
    {
      lessThanOrEqualTo: T
    } |
    {
      greaterThan: T
    } |
    {
      greaterThanOrEqualTo: T
    } |
    {
      equalTo: T
    } |
    {
      notEqualTo: T
    } |
    {
      containedIn: T
    } |
    {
      notContainedIn : T
    } |
    {
      exists: T
    } |
    {
      matchesRegex: T
    } |
    {
      text: T
    } |
    {
      idEqualTo: T
    } |
    {
      idContainedIn: T
    } |
    {
      pointsTo: T
    } |
    {
      relatedTo: T
    };
  type RecordQueryField<T> = T extends RecordQuery<any> ?
    { [K in keyof T]: { [P in K]: T[P] } & Partial<Record<Exclude<keyof T, K>, never>> }[keyof T]
    : never;
  type RecordSortKey<T extends string> = (`${T}` | `-${T}`)[];
  interface RecordsApi {
    /**
     * This is an async function that will query the database using the query
@@ -168,17 +115,15 @@ declare namespace Noodl {
     *  })
     * ```
     */
-    query<TClassName extends RecordClassName>(
+    query(
-      className: TClassName,
+      className: RecordClassName,
-      query?:
+      query?: any,
        RecordQueryField<{ [K in keyof DatabaseSchema[TClassName]]: RecordQuery<any> }> |
        { and: RecordQueryField<{ [K in keyof DatabaseSchema[TClassName]]: RecordQuery<any> }>[] },
      options?: {
        limit?: number;
        skip?: number;
-        sort?: string | RecordSortKey<keyof DatabaseSchema[TClassName]>;
+        sort?: string[];
-        include?: string | (keyof DatabaseSchema[TClassName])[];
+        include?: any;
-        select?: string | (keyof DatabaseSchema[TClassName])[];
+        select?: any;
      }
    ): Promise<any>;
--- a/packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Layout from '../../../layout';
 import Utils from '../../../nodes/controls/utils';
-import { Noodl } from '../../../types';
+import { Noodl, Slot } from '../../../types';
 export interface SliderProps extends Noodl.ReactProps {
  _nodeId: string;
@@ -24,6 +24,8 @@ export interface SliderProps extends Noodl.ReactProps {
  onClick: () => void;
  updateOutputValue: (value: number) => void;
  children: Slot;
 }
 function _styleTemplate(_class: string, props: SliderProps) {
@@ -168,7 +170,9 @@ export function Slider(props: SliderProps) {
  return (
    <div style={divStyle}>
      <div style={trackStyle} />
-      <div style={thumbStyle} />
+      <div style={thumbStyle}>
        {props.children}
      </div>
      <input
        className={className}
        {...Utils.controlEvents(props)}
--- a/packages/noodl-viewer-react/src/nodes/controls/slider.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/slider.ts
@@ -11,7 +11,6 @@ const RangeNode = {
  name: 'net.noodl.controls.range',
  displayNodeName: 'Slider',
  docs: 'https://docs.noodl.net/nodes/ui-controls/slider',
  allowChildren: false,
  noodlNodeAsProp: true,
  connectionPanel: {
    groupPriority: [
--- a/packages/noodl-viewer-react/src/project-settings.js
+++ b/packages/noodl-viewer-react/src/project-settings.js
@@ -6,7 +6,7 @@ export default {
      group: 'General',
      plug: 'input',
      type: 'string',
-      default: 'Fluxscape Viewer',
+      default: 'Noodl Viewer',
      tooltip: 'The title that web browsers show',
      ignoreInExport: true
    },
--- a/packages/noodl-viewer-react/static/viewer/global.d.ts.keep
+++ b/packages/noodl-viewer-react/static/viewer/global.d.ts.keep
@@ -131,59 +131,6 @@ declare namespace Noodl {
   */
  const Events: EventsApi;
  type RecordQuery<T> =
    {
      lessThan: T
    } |
    {
      lessThanOrEqualTo: T
    } |
    {
      greaterThan: T
    } |
    {
      greaterThanOrEqualTo: T
    } |
    {
      equalTo: T
    } |
    {
      notEqualTo: T
    } |
    {
      containedIn: T
    } |
    {
      notContainedIn : T
    } |
    {
      exists: T
    } |
    {
      matchesRegex: T
    } |
    {
      text: T
    } |
    {
      idEqualTo: T
    } |
    {
      idContainedIn: T
    } |
    {
      pointsTo: T
    } |
    {
      relatedTo: T
    };
  type RecordQueryField<T> = T extends RecordQuery<any> ?
    { [K in keyof T]: { [P in K]: T[P] } & Partial<Record<Exclude<keyof T, K>, never>> }[keyof T]
    : never;
  type RecordSortKey<T extends string> = (`${T}` | `-${T}`)[];
  interface RecordsApi {
    /**
     * This is an async function that will query the database using the query
@@ -225,17 +172,15 @@ declare namespace Noodl {
     *  })
     * ```
     */
-    query<TClassName extends RecordClassName>(
+    query(
-      className: TClassName,
+      className: RecordClassName,
-      query?:
+      query?: any,
        RecordQueryField<{ [K in keyof DatabaseSchema[TClassName]]: RecordQuery<any> }> |
        { and: RecordQueryField<{ [K in keyof DatabaseSchema[TClassName]]: RecordQuery<any> }>[] },
      options?: {
        limit?: number;
        skip?: number;
-        sort?: string | RecordSortKey<keyof DatabaseSchema[TClassName]>;
+        sort?: string[];
-        include?: string | (keyof DatabaseSchema[TClassName])[];
+        include?: any;
-        select?: string | (keyof DatabaseSchema[TClassName])[];
+        select?: any;
      }
    ): Promise<any>;