Terminal TAST

Styles

You can style terminal responses by using the TAST Inline element. It accepts three kinds of styles:

  • CSS object styles

  • terminal theme styling

  • styles defined by types of inline.

Styling with CSS Objects

Style any TAST Inline part with CSS. Styled TAST affects only to the children of that Inline.

tast.json

Copy 
[
  "Hello ",
  {
    "type": "Inline",
    "style": {
      "background": "aqua"
    },
    "children": ["World"]
  },
  "!"
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

Nesting Styles

Styles does have inheritance. Children Inlines inherit its parent styles and they can add their own styling.

tast.json

Copy 
[
  {
    "type": "Inline",
    "style": {
      "background": "aqua"
    },
    "children": [
      "Hello ",
      {
        "type": "Inline",
        "style": {
          "color": "blue"
        },
        "children": ["World"]
      },
      "!"
    ]
  }
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

Hover and Pseudo-Styles

Use the key :hover inside the style property with an object specifying hovered styles. Note that hover styles are only applied when the pointer hovers the inline.

tast.json

Copy 
[
  "Hello ",
  {
    "type": "Inline",
    "style": {
      "background": "aqua",
      "color": "blue",
      ":hover": {
        "background": "white"
      }
    },
    "children": ["World"]
  },
  "!"
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

Note that you can use other pseudostyles, like :active.

Styling the whole line

You can style the whole line if it is wrapped by an inline. Be careful, the new line breaks the style and left rest of the line without style. You may want to use pad to be sure that the whole line is styled.

tast.json

Copy 
[
  {
    "type": "Inline",
    "style": {
      "background": "magenta"
    },
    "children": ["Broken line\n"]
  },
  {
    "type": "Inline",
    "style": {
      "background": "blue"
    },
    "children": [{ "type": "Pad", "width": 68, "children": ["Whole line"] }, "\n"]
  },
  "Unstyled line"
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

Theme Styles

Terminal has themes. These themes define distinctive elements that have significative colors. Exact colors are related to the current terminal theme. Learn more about themes in the terminal documentation.

Use the property themeType to choose which type of element is. Currently available types are: actionLink, stripedTable, link, trigger and infoLink. They might change in the future.

tast.json

Copy 
[
  {
    "type": "Inline",
    "themeType": "actionLink",
    "children": ["- actionLink\n"]
  },
  {
    "type": "Inline",
    "themeType": "stripedTable",
    "children": ["- stripedTable\n"]
  },
  {
    "type": "Inline",
    "themeType": "link",
    "children": ["- link\n"]
  },
  {
    "type": "Inline",
    "themeType": "trigger",
    "children": ["- trigger\n"]
  },
  {
    "type": "Inline",
    "themeType": "infoLink",
    "children": ["- infoLink\n"]
  }
]

TerminalThemeSelector.gast

Copy 
<div>
  <select
    value="select('getTerminalThemeId', { terminalId })"
    onChange="({ target: { value } }) => dispatch('replaceTerminalThemeId', { terminalId, themeId: value })"
  >
    <For in="select('getTerminalsThemesIds')">
      <template themeId="item" index="index">
        <option value="themeId">
          {themeId}
        </option>
      </template>
    </For>
  </select>
</div>

POSWebPluginMain.js

Copy 
import React from 'react';
import TerminalThemeSelector from './TerminalThemeSelector.gast';
import tast from './tast.json';

export default class Plugin {
  constructor({ uiHelper, dispatchersHelper, diHelper }) {
    this._uiHelper = uiHelper;
    this._dispatchersHelper = dispatchersHelper;
    this._diHelper = diHelper;

    diHelper.useValues({
      terminalId: '1',
    });
  }

  onInit() {
    this._diHelper.invoke(this._createTerminal);
    this._diHelper.invoke(this._putComponents);
  }

  _createTerminal = ({ dispatchersHelper, terminalId, tastHelper }) => {
    dispatchersHelper.dispatch('createTerminal', {
      terminal: { id: terminalId },
    });
    dispatchersHelper.dispatch('spliceTerminalTAST', {
      terminalId,
      // note: bind gives an uniq id for each inline
      tast: tastHelper.bind(tast, {}),
      from: { line: 1 },
      to: { line: 2 },
    });
  };

  _putComponents = ({ uiHelper, gastHelper, terminalId }) => {
    const { putComponent, POSComponent } = uiHelper;
    const { putGASTComponent } = gastHelper;

    putGASTComponent('TerminalThemeSelector', TerminalThemeSelector);
    putComponent('Example', () => (
      <div style={{ lineHeight: 1.1 }}>
        <POSComponent componentName="TerminalThemeSelector" terminalId={terminalId} />
        <POSComponent componentName="Terminal" terminalId={terminalId} />
      </div>
    ));
  };
}

index.js

Copy 
import POSWebPluginMain from './POSWebPluginMain.js';

export default POSWebPluginMain;

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST",
            "replaceTerminalThemeId"
          ]
        }
      }
    },
    "selectorsHelper": {
      "selectorFactories": {
        "consumes": {
          "@orion/terminals": [
            "getTerminalThemeId",
            "getTerminalsThemesIds"
          ]
        }
      }
    }
  }
}

Other styling

Is it possible to style many inlines at once with inlineType. See InlineTypes.