@things-factory/operato-board 10.0.6 → 10.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -54,11 +54,14 @@ let MenuTools = class MenuTools extends LitElement {
54
54
  padding: 5px 0px;
55
55
  text-align: center;
56
56
  text-decoration: none;
57
- color: var(--md-sys-color-on-secondary);
57
+ /* 레일은 두 모드 모두 어두운 크롬이므로 글자색도 모드 불변이어야 한다.
58
+ 역할 토큰(on-secondary·on-primary-container)은 한쪽 모드에서 어두워져 묻힌다. */
59
+ color: var(--menu-tools-color, var(--app-bar-color, rgba(255, 255, 255, 0.92)));
58
60
  }
59
61
 
60
62
  a[active] {
61
- background-color: rgba(0, 0, 0, 0.2);
63
+ /* 크롬이 어두워졌으므로 활성 표시를 검정 오버레이로 두면 보이지 않는다 */
64
+ background-color: var(--menu-tools-active-background, rgba(255, 255, 255, 0.12));
62
65
  }
63
66
 
64
67
  md-icon {
@@ -1 +1 @@
1
- {"version":3,"file":"menu-tools.js","sourceRoot":"","sources":["../../client/viewparts/menu-tools.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAA;AAG3D,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAgEG,eAAU,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,CAAA;QACtC,gBAAW,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAA;IA4DlD,CAAC;aA5HQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2DF;KACF,AA7DY,CA6DZ;IAOD,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAA;QACjC,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAA;QAEvC,OAAO,OAAO,IAAI,OAAO,CAAC,eAAe,CAAC;YACxC,CAAC,CAAC,IAAI,CAAA;;;6CAGiC,IAAI,KAAK,YAAY;;;;;;4CAMtB,IAAI,KAAK,WAAW;;;;;cAKlD,UAAU,CACV,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,EAC5C,IAAI,CAAA;;sDAEoC,IAAI,KAAK,qBAAqB;;;;;;kDAMlC,IAAI,KAAK,iBAAiB;;;;;;kDAM1B,IAAI,KAAK,iBAAiB;;;;;;gDAM5B,IAAI,KAAK,eAAe;;;;;aAK3D,CACA;;SAEJ;YACH,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;IACZ,CAAC;IAES,UAAU;QAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAA;IACrC,CAAC;;AAzD0C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;wCAAe;AAnE9C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA6HrB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RouteController, LayoutController } from '@operato/shell'\nimport { privileged } from '@things-factory/auth-base/dist-client'\n\n@customElement('menu-tools')\nexport class MenuTools extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--menu-tools-background-color);\n\n /* for narrow mode */\n flex-direction: column;\n width: 100%;\n }\n\n :host([width='WIDE']) {\n /* for wide mode */\n flex-direction: row;\n width: initial;\n height: 100%;\n }\n\n ul {\n display: flex;\n flex-direction: row;\n\n margin: auto;\n padding: 0;\n list-style: none;\n height: 100%;\n overflow: hidden;\n }\n\n :host([width='WIDE']) ul {\n flex-direction: column;\n }\n\n :host([width='WIDE']) li {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n a {\n display: block;\n padding: 5px 0px;\n text-align: center;\n text-decoration: none;\n color: var(--md-sys-color-on-secondary);\n }\n\n a[active] {\n background-color: rgba(0, 0, 0, 0.2);\n }\n\n md-icon {\n font-variation-settings: 'FILL' 0;\n\n padding: 5px 15px 0px 15px;\n vertical-align: bottom;\n }\n\n div {\n font-size: 0.6em;\n }\n `\n ]\n\n private _routeCtrl = new RouteController(this)\n private _layoutCtrl = new LayoutController(this)\n\n @property({ type: String, reflect: true }) width?: string\n\n render() {\n const page = this._routeCtrl.page\n const context = this._routeCtrl.context\n\n return context && context['board_topmenu']\n ? html`\n <ul>\n <li>\n <a href=\"board-list\" ?active=${page === 'board-list'}>\n <md-icon>dvr</md-icon>\n <div><ox-i18n msgid=\"label.board\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"play-list\" ?active=${page === 'play-list'}>\n <md-icon>airplay</md-icon>\n <div><ox-i18n msgid=\"label.player\"></ox-i18n></div>\n </a>\n </li>\n ${privileged(\n { privilege: 'mutation', category: 'board' },\n html`\n <li>\n <a href=\"board-template-list\" ?active=${page === 'board-template-list'}>\n <md-icon>developer_board</md-icon>\n <div><ox-i18n msgid=\"label.template\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"attachment-list\" ?active=${page === 'attachment-list'}>\n <md-icon>attachment</md-icon>\n <div><ox-i18n msgid=\"label.attachment\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"connection-list\" ?active=${page === 'connection-list'}>\n <md-icon>device_hub</md-icon>\n <div><ox-i18n msgid=\"label.connection\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"scenario-list\" ?active=${page === 'scenario-list'}>\n <md-icon>format_list_numbered</md-icon>\n <div><ox-i18n msgid=\"label.scenario\"></ox-i18n></div>\n </a>\n </li>\n `\n )}\n </ul>\n `\n : html``\n }\n\n protected willUpdate() {\n this.width = this._layoutCtrl.width\n }\n}\n"]}
1
+ {"version":3,"file":"menu-tools.js","sourceRoot":"","sources":["../../client/viewparts/menu-tools.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAA;AAG3D,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAmEG,eAAU,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,CAAA;QACtC,gBAAW,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAA;IA4DlD,CAAC;aA/HQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;KACF,AAhEY,CAgEZ;IAOD,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAA;QACjC,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAA;QAEvC,OAAO,OAAO,IAAI,OAAO,CAAC,eAAe,CAAC;YACxC,CAAC,CAAC,IAAI,CAAA;;;6CAGiC,IAAI,KAAK,YAAY;;;;;;4CAMtB,IAAI,KAAK,WAAW;;;;;cAKlD,UAAU,CACV,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,EAC5C,IAAI,CAAA;;sDAEoC,IAAI,KAAK,qBAAqB;;;;;;kDAMlC,IAAI,KAAK,iBAAiB;;;;;;kDAM1B,IAAI,KAAK,iBAAiB;;;;;;gDAM5B,IAAI,KAAK,eAAe;;;;;aAK3D,CACA;;SAEJ;YACH,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;IACZ,CAAC;IAES,UAAU;QAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAA;IACrC,CAAC;;AAzD0C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;wCAAe;AAtE9C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAgIrB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RouteController, LayoutController } from '@operato/shell'\nimport { privileged } from '@things-factory/auth-base/dist-client'\n\n@customElement('menu-tools')\nexport class MenuTools extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--menu-tools-background-color);\n\n /* for narrow mode */\n flex-direction: column;\n width: 100%;\n }\n\n :host([width='WIDE']) {\n /* for wide mode */\n flex-direction: row;\n width: initial;\n height: 100%;\n }\n\n ul {\n display: flex;\n flex-direction: row;\n\n margin: auto;\n padding: 0;\n list-style: none;\n height: 100%;\n overflow: hidden;\n }\n\n :host([width='WIDE']) ul {\n flex-direction: column;\n }\n\n :host([width='WIDE']) li {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n a {\n display: block;\n padding: 5px 0px;\n text-align: center;\n text-decoration: none;\n /* 레일은 두 모드 모두 어두운 크롬이므로 글자색도 모드 불변이어야 한다.\n 역할 토큰(on-secondary·on-primary-container)은 한쪽 모드에서 어두워져 묻힌다. */\n color: var(--menu-tools-color, var(--app-bar-color, rgba(255, 255, 255, 0.92)));\n }\n\n a[active] {\n /* 크롬이 어두워졌으므로 활성 표시를 검정 오버레이로 두면 보이지 않는다 */\n background-color: var(--menu-tools-active-background, rgba(255, 255, 255, 0.12));\n }\n\n md-icon {\n font-variation-settings: 'FILL' 0;\n\n padding: 5px 15px 0px 15px;\n vertical-align: bottom;\n }\n\n div {\n font-size: 0.6em;\n }\n `\n ]\n\n private _routeCtrl = new RouteController(this)\n private _layoutCtrl = new LayoutController(this)\n\n @property({ type: String, reflect: true }) width?: string\n\n render() {\n const page = this._routeCtrl.page\n const context = this._routeCtrl.context\n\n return context && context['board_topmenu']\n ? html`\n <ul>\n <li>\n <a href=\"board-list\" ?active=${page === 'board-list'}>\n <md-icon>dvr</md-icon>\n <div><ox-i18n msgid=\"label.board\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"play-list\" ?active=${page === 'play-list'}>\n <md-icon>airplay</md-icon>\n <div><ox-i18n msgid=\"label.player\"></ox-i18n></div>\n </a>\n </li>\n ${privileged(\n { privilege: 'mutation', category: 'board' },\n html`\n <li>\n <a href=\"board-template-list\" ?active=${page === 'board-template-list'}>\n <md-icon>developer_board</md-icon>\n <div><ox-i18n msgid=\"label.template\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"attachment-list\" ?active=${page === 'attachment-list'}>\n <md-icon>attachment</md-icon>\n <div><ox-i18n msgid=\"label.attachment\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"connection-list\" ?active=${page === 'connection-list'}>\n <md-icon>device_hub</md-icon>\n <div><ox-i18n msgid=\"label.connection\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"scenario-list\" ?active=${page === 'scenario-list'}>\n <md-icon>format_list_numbered</md-icon>\n <div><ox-i18n msgid=\"label.scenario\"></ox-i18n></div>\n </a>\n </li>\n `\n )}\n </ul>\n `\n : html``\n }\n\n protected willUpdate() {\n this.width = this._layoutCtrl.width\n }\n}\n"]}