@things-factory/dashboard 7.0.1-rc.10 → 7.0.1-rc.12

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.
Files changed (6) hide show
  1. package/client/viewparts/dashboard-setting-let.ts +4 -4
  2. package/dist-client/tsconfig.tsbuildinfo +1 -1
  3. package/dist-client/viewparts/dashboard-setting-let.js +4 -4
  4. package/dist-client/viewparts/dashboard-setting-let.js.map +1 -1
  5. package/dist-server/tsconfig.tsbuildinfo +1 -1
  6. package/package.json +6 -6
package/dist-client/viewparts/dashboard-setting-let.js CHANGED
@@ -168,7 +168,7 @@ DashboardSettingLet.styles = [
168
168
 
169
169
  label {
170
170
  width: 80px;
171
- padding-right: var(--padding-default);
171
+ padding-right: var(--spacing-medium);
172
172
  font: bold 0.9em var(--theme-font);
173
173
  }
174
174
 
@@ -180,7 +180,7 @@ DashboardSettingLet.styles = [
180
180
  md-icon {
181
181
  --md-icon-size: 18px;
182
182
  margin: 2px 2px 5px 2px;
183
- padding: 0 var(--padding-default);
183
+ padding: 0 var(--spacing-medium);
184
184
  color: var(--md-sys-on-secondary-container, #fff);
185
185
  background-color: var(--md-sys-secondary-container, #394e64);
186
186
  border-radius: var(--border-radius, 5px);
@@ -199,10 +199,10 @@ DashboardSettingLet.styles = [
199
199
  }
200
200
  div.field {
201
201
  border-bottom: var(--border-dim-color);
202
- padding: var(--padding-default);
202
+ padding: var(--spacing-medium);
203
203
  }
204
204
  md-icon {
205
- padding: var(--padding-narrow) var(--padding-default);
205
+ padding: var(--spacing-small) var(--spacing-medium);
206
206
  }
207
207
  }
208
208
  `
package/dist-client/viewparts/dashboard-setting-let.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dashboard-setting-let.js","sourceRoot":"","sources":["../../client/viewparts/dashboard-setting-let.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/board/ox-board-selector.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { openPopup } from '@operato/layout'\nimport { i18next, localize } from '@operato/i18n'\nimport { store } from '@operato/shell'\nimport { client } from '@operato/graphql'\n\nimport { fetchBoardSettings, UPDATE_BOARD_SETTINGS } from '../actions/board-settings'\nimport {\n DASHBOARD,\n DASHBOARD_DESCRIPTION,\n DASHBOARD_MOBILE,\n DASHBOARD_MOBILE_DESCRIPTION,\n FALLBACK_HOME_BOARD\n} from '../const'\n\n@customElement('dashboard-setting-let')\nexport class DashboardSettingLet extends connect(store)(localize(i18next)(LitElement)) {\n static styles = [\n css`\n div.field {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n max-width: 100%;\n overflow: hidden;\n }\n\n div.field > * {\n flex: none;\n }\n\n div.field > div {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n div.field a {\n overflow: hidden;\n border: var(--border-dim-color);\n border-radius: var(--border-radius);\n background-color: rgba(0, 0, 0, 0.1);\n min-width: 50px;\n min-height: 50px;\n }\n\n div.field img {\n max-height: 250px;\n max-width: 100%;\n }\n\n .name {\n color: var(--md-sys-color-on-secondary-container);\n }\n\n .description {\n font-size: 0.7rem;\n opacity: 0.7;\n color: var(--md-sys-color-on-secondary-container);\n }\n\n label {\n width: 80px;\n padding-right: var(--padding-default);\n font: bold 0.9em var(--theme-font);\n }\n\n setting-let > form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n md-icon {\n --md-icon-size: 18px;\n margin: 2px 2px 5px 2px;\n padding: 0 var(--padding-default);\n color: var(--md-sys-on-secondary-container, #fff);\n background-color: var(--md-sys-secondary-container, #394e64);\n border-radius: var(--border-radius, 5px);\n border: var(--button-border, 1px solid transparent);\n }\n\n md-icon:hover,\n md-icon:active {\n background-color: var(--button-active-background-color, #22a6a7);\n }\n\n @media screen and (max-width: 460px) {\n setting-let > form {\n display: flex;\n flex-direction: column;\n }\n div.field {\n border-bottom: var(--border-dim-color);\n padding: var(--padding-default);\n }\n md-icon {\n padding: var(--padding-narrow) var(--padding-default);\n }\n }\n `\n ]\n\n @state() private dashboard: any\n @state() private dashboardMobile: any\n\n render() {\n return html`\n <setting-let>\n <ox-i18n slot=\"title\" msgid=\"title.dashboard setting\"></ox-i18n>\n\n <form slot=\"content\">\n ${[\n {\n title: i18next.t('label.dashboard for desktop'),\n board: this.dashboard,\n key: DASHBOARD,\n description: DASHBOARD_DESCRIPTION\n },\n {\n title: i18next.t('label.dashboard for mobile'),\n board: this.dashboardMobile,\n key: DASHBOARD_MOBILE,\n description: DASHBOARD_MOBILE_DESCRIPTION\n }\n ].map(\n field => html`\n <div class=\"field\">\n <label>${field.title}</ox-i18n></label>\n <div>\n <div class=\"name\">${field.board.name}</div>\n <span class=\"description\">${field.board.description}</span>\n <md-icon @click=${e => this.onClickBoardSelector(field.key, field.description)}>\n more_horiz\n </md-icon>\n ${\n field.board.id\n ? html`\n <a href=${`board-modeller/${field.board.id}`}>\n <img\n src=${field.board.thumbnail ||\n 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}\n />\n </a>\n `\n : html``\n }\n </div>\n </div>\n `\n )}\n </form>\n </setting-let>\n `\n }\n\n stateChanged(state: any) {\n var dashboard = state.boardSetting[DASHBOARD] || state.boardSetting[FALLBACK_HOME_BOARD]\n var dashboardMobile = state.boardSetting[DASHBOARD_MOBILE] || dashboard\n\n this.dashboard = (dashboard ? dashboard.board : {}) || {}\n this.dashboardMobile = (dashboardMobile ? dashboardMobile.board : {}) || {}\n }\n\n onClickBoardSelector(name: string, description: string) {\n var popup = openPopup(\n html`\n <ox-board-selector\n .creatable=${true}\n .value=${name == DASHBOARD ? this.dashboard?.id : this.dashboardMobile?.id}\n @board-selected=${async e => {\n var board = e.detail.board\n\n await this.saveSettings({\n name,\n value: board.id,\n category: 'board',\n description\n })\n\n var settings = await fetchBoardSettings([FALLBACK_HOME_BOARD, DASHBOARD, DASHBOARD_MOBILE])\n store.dispatch({\n type: UPDATE_BOARD_SETTINGS,\n settings: settings.reduce((settings, setting) => {\n settings[setting.name] = setting\n return settings\n }, {})\n })\n\n popup.close()\n this.requestUpdate()\n }}\n ></ox-board-selector>\n `,\n {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.dashboard setting')\n }\n )\n }\n\n async saveSettings({ name, value, category, description }) {\n if (!(name && value)) {\n return\n }\n\n await client.query({\n query: gql`\n mutation UpdateSetting($patch: SettingPatch!, $name: String!) {\n updateSetting(patch: $patch, name: $name) {\n name\n value\n }\n }\n `,\n variables: {\n name,\n patch: {\n name,\n description,\n category,\n value\n }\n }\n })\n }\n}\n"]}
1
+ {"version":3,"file":"dashboard-setting-let.js","sourceRoot":"","sources":["../../client/viewparts/dashboard-setting-let.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/board/ox-board-selector.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { openPopup } from '@operato/layout'\nimport { i18next, localize } from '@operato/i18n'\nimport { store } from '@operato/shell'\nimport { client } from '@operato/graphql'\n\nimport { fetchBoardSettings, UPDATE_BOARD_SETTINGS } from '../actions/board-settings'\nimport {\n DASHBOARD,\n DASHBOARD_DESCRIPTION,\n DASHBOARD_MOBILE,\n DASHBOARD_MOBILE_DESCRIPTION,\n FALLBACK_HOME_BOARD\n} from '../const'\n\n@customElement('dashboard-setting-let')\nexport class DashboardSettingLet extends connect(store)(localize(i18next)(LitElement)) {\n static styles = [\n css`\n div.field {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n max-width: 100%;\n overflow: hidden;\n }\n\n div.field > * {\n flex: none;\n }\n\n div.field > div {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n div.field a {\n overflow: hidden;\n border: var(--border-dim-color);\n border-radius: var(--border-radius);\n background-color: rgba(0, 0, 0, 0.1);\n min-width: 50px;\n min-height: 50px;\n }\n\n div.field img {\n max-height: 250px;\n max-width: 100%;\n }\n\n .name {\n color: var(--md-sys-color-on-secondary-container);\n }\n\n .description {\n font-size: 0.7rem;\n opacity: 0.7;\n color: var(--md-sys-color-on-secondary-container);\n }\n\n label {\n width: 80px;\n padding-right: var(--spacing-medium);\n font: bold 0.9em var(--theme-font);\n }\n\n setting-let > form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n md-icon {\n --md-icon-size: 18px;\n margin: 2px 2px 5px 2px;\n padding: 0 var(--spacing-medium);\n color: var(--md-sys-on-secondary-container, #fff);\n background-color: var(--md-sys-secondary-container, #394e64);\n border-radius: var(--border-radius, 5px);\n border: var(--button-border, 1px solid transparent);\n }\n\n md-icon:hover,\n md-icon:active {\n background-color: var(--button-active-background-color, #22a6a7);\n }\n\n @media screen and (max-width: 460px) {\n setting-let > form {\n display: flex;\n flex-direction: column;\n }\n div.field {\n border-bottom: var(--border-dim-color);\n padding: var(--spacing-medium);\n }\n md-icon {\n padding: var(--spacing-small) var(--spacing-medium);\n }\n }\n `\n ]\n\n @state() private dashboard: any\n @state() private dashboardMobile: any\n\n render() {\n return html`\n <setting-let>\n <ox-i18n slot=\"title\" msgid=\"title.dashboard setting\"></ox-i18n>\n\n <form slot=\"content\">\n ${[\n {\n title: i18next.t('label.dashboard for desktop'),\n board: this.dashboard,\n key: DASHBOARD,\n description: DASHBOARD_DESCRIPTION\n },\n {\n title: i18next.t('label.dashboard for mobile'),\n board: this.dashboardMobile,\n key: DASHBOARD_MOBILE,\n description: DASHBOARD_MOBILE_DESCRIPTION\n }\n ].map(\n field => html`\n <div class=\"field\">\n <label>${field.title}</ox-i18n></label>\n <div>\n <div class=\"name\">${field.board.name}</div>\n <span class=\"description\">${field.board.description}</span>\n <md-icon @click=${e => this.onClickBoardSelector(field.key, field.description)}>\n more_horiz\n </md-icon>\n ${\n field.board.id\n ? html`\n <a href=${`board-modeller/${field.board.id}`}>\n <img\n src=${field.board.thumbnail ||\n 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}\n />\n </a>\n `\n : html``\n }\n </div>\n </div>\n `\n )}\n </form>\n </setting-let>\n `\n }\n\n stateChanged(state: any) {\n var dashboard = state.boardSetting[DASHBOARD] || state.boardSetting[FALLBACK_HOME_BOARD]\n var dashboardMobile = state.boardSetting[DASHBOARD_MOBILE] || dashboard\n\n this.dashboard = (dashboard ? dashboard.board : {}) || {}\n this.dashboardMobile = (dashboardMobile ? dashboardMobile.board : {}) || {}\n }\n\n onClickBoardSelector(name: string, description: string) {\n var popup = openPopup(\n html`\n <ox-board-selector\n .creatable=${true}\n .value=${name == DASHBOARD ? this.dashboard?.id : this.dashboardMobile?.id}\n @board-selected=${async e => {\n var board = e.detail.board\n\n await this.saveSettings({\n name,\n value: board.id,\n category: 'board',\n description\n })\n\n var settings = await fetchBoardSettings([FALLBACK_HOME_BOARD, DASHBOARD, DASHBOARD_MOBILE])\n store.dispatch({\n type: UPDATE_BOARD_SETTINGS,\n settings: settings.reduce((settings, setting) => {\n settings[setting.name] = setting\n return settings\n }, {})\n })\n\n popup.close()\n this.requestUpdate()\n }}\n ></ox-board-selector>\n `,\n {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.dashboard setting')\n }\n )\n }\n\n async saveSettings({ name, value, category, description }) {\n if (!(name && value)) {\n return\n }\n\n await client.query({\n query: gql`\n mutation UpdateSetting($patch: SettingPatch!, $name: String!) {\n updateSetting(patch: $patch, name: $name) {\n name\n value\n }\n }\n `,\n variables: {\n name,\n patch: {\n name,\n description,\n category,\n value\n }\n }\n })\n }\n}\n"]}