@things-factory/board-ui 7.0.14 → 7.0.15

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.
@@ -39,10 +39,10 @@ class BoardRendererElement extends LitElement {
39
39
  bottom: 0;
40
40
  width: 100%;
41
41
  text-indent: 5px;
42
- color: #fff;
43
42
 
44
43
  font: var(--board-renderer-name-font);
45
- background-color: var(--board-renderer-name-background-color);
44
+ color: var(--md-sys-color-on-primary);
45
+ background-color: var(--md-sys-color-primary);
46
46
  }
47
47
  img {
48
48
  object-fit: contain;
@@ -53,7 +53,8 @@ class BoardRendererElement extends LitElement {
53
53
  position: absolute;
54
54
  top: 0;
55
55
  text-align: center;
56
- color: #fff;
56
+ color: var(--md-sys-color-on-primary);
57
+ background-color: var(--md-sys-color-primary);
57
58
 
58
59
  width: var(--board-renderer-icon-size);
59
60
  height: var(--board-renderer-icon-size);
@@ -63,13 +64,11 @@ class BoardRendererElement extends LitElement {
63
64
  right: 0;
64
65
 
65
66
  border-bottom-left-radius: var(--board-renderer-icon-border-radius);
66
- background-color: var(--board-renderer-icon-edit-background-color);
67
67
  }
68
68
  md-icon[view] {
69
69
  left: 0;
70
70
 
71
71
  border-bottom-right-radius: var(--board-renderer-icon-border-radius);
72
- background-color: var(--board-renderer-icon-view-background-color);
73
72
  }
74
73
  `
75
74
  ]
@@ -81,7 +81,7 @@ BoardRendererElement.styles = [
81
81
  color: #fff;
82
82
 
83
83
  font: var(--board-renderer-name-font);
84
- background-color: var(--board-renderer-name-background-color);
84
+ background-color: var(--md-sys-color-primary);
85
85
  }
86
86
  img {
87
87
  object-fit: contain;
@@ -102,13 +102,13 @@ BoardRendererElement.styles = [
102
102
  right: 0;
103
103
 
104
104
  border-bottom-left-radius: var(--board-renderer-icon-border-radius);
105
- background-color: var(--board-renderer-icon-edit-background-color);
105
+ background-color: var(--md-sys-color-secondary);
106
106
  }
107
107
  md-icon[view] {
108
108
  left: 0;
109
109
 
110
110
  border-bottom-right-radius: var(--board-renderer-icon-border-radius);
111
- background-color: var(--board-renderer-icon-view-background-color);
111
+ background-color: var(--md-sys-color-secondary);
112
112
  }
113
113
  `
114
114
  ];
@@ -1 +1 @@
1
- {"version":3,"file":"board-renderer.js","sourceRoot":"","sources":["../../client/data-grist/board-renderer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { navigate } from '@operato/shell'\nimport { client, gqlContext } from '@operato/graphql'\n\nconst FETCH_BOARD_GQL = id => {\n return gql`\n {\n board(id:\"${id}\") {\n id\n name\n description\n thumbnail\n }\n }\n`\n}\n\n@customElement('board-renderer')\nclass BoardRendererElement extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n justify-content: center;\n position: relative;\n\n max-width: var(--board-renderer-max-width);\n border: var(--board-renderer-border);\n\n width: 100%;\n }\n span {\n position: absolute;\n bottom: 0;\n width: 100%;\n text-indent: 5px;\n color: #fff;\n\n font: var(--board-renderer-name-font);\n background-color: var(--board-renderer-name-background-color);\n }\n img {\n object-fit: contain;\n max-width: 100%;\n max-height: 100%;\n }\n md-icon {\n position: absolute;\n top: 0;\n text-align: center;\n color: #fff;\n\n width: var(--board-renderer-icon-size);\n height: var(--board-renderer-icon-size);\n font: var(--board-renderer-font);\n }\n md-icon[edit] {\n right: 0;\n\n border-bottom-left-radius: var(--board-renderer-icon-border-radius);\n background-color: var(--board-renderer-icon-edit-background-color);\n }\n md-icon[view] {\n left: 0;\n\n border-bottom-right-radius: var(--board-renderer-icon-border-radius);\n background-color: var(--board-renderer-icon-view-background-color);\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: String }) boardViewerPage?: string\n @property({ type: Object }) _value: any\n\n async updated(changes) {\n if (changes.has('value')) {\n if (typeof this.value == 'string' && this.value) {\n /* fetchBoard..., */\n try {\n var response = await client.query({\n query: FETCH_BOARD_GQL(this.value),\n context: gqlContext()\n })\n\n this._value = (response && response.data && response.data.board) || {}\n } catch (e) {\n console.error(e)\n }\n } else {\n this._value = this.value || {}\n }\n }\n }\n\n render() {\n var { id, name = '', thumbnail = 'image/gif' } = this._value || {}\n\n return id\n ? html`\n <span>${name}</span>\n <img src=${thumbnail} alt=\"no thumbnail!\" />\n <md-icon view @mousedown=${e => this.onClickViewer(e, id)}>search</md-icon>\n <md-icon edit @mousedown=${e => this.onClickModeler(e, id)}>edit</md-icon>\n `\n : html` choose board.. `\n }\n\n onClickViewer(e, id) {\n e.preventDefault()\n e.stopPropagation()\n\n var boardViewerPage = this.boardViewerPage || 'board-viewer'\n\n navigate(`${boardViewerPage}/${id}${window.location.search}`)\n }\n\n onClickModeler(e, id) {\n e.preventDefault()\n e.stopPropagation()\n\n navigate(`board-modeller/${id}${window.location.search}`)\n }\n}\n\nexport const BoardRenderer = (value, column, record) => {\n var { boardViewerPage = '' } = column.record.options || {}\n\n return html` <board-renderer .value=${value} .boardViewerPage=${boardViewerPage}></board-renderer> `\n}\n"]}
1
+ {"version":3,"file":"board-renderer.js","sourceRoot":"","sources":["../../client/data-grist/board-renderer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { navigate } from '@operato/shell'\nimport { client, gqlContext } from '@operato/graphql'\n\nconst FETCH_BOARD_GQL = id => {\n return gql`\n {\n board(id:\"${id}\") {\n id\n name\n description\n thumbnail\n }\n }\n`\n}\n\n@customElement('board-renderer')\nclass BoardRendererElement extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n justify-content: center;\n position: relative;\n\n max-width: var(--board-renderer-max-width);\n border: var(--board-renderer-border);\n\n width: 100%;\n }\n span {\n position: absolute;\n bottom: 0;\n width: 100%;\n text-indent: 5px;\n color: #fff;\n\n font: var(--board-renderer-name-font);\n background-color: var(--md-sys-color-primary);\n }\n img {\n object-fit: contain;\n max-width: 100%;\n max-height: 100%;\n }\n md-icon {\n position: absolute;\n top: 0;\n text-align: center;\n color: #fff;\n\n width: var(--board-renderer-icon-size);\n height: var(--board-renderer-icon-size);\n font: var(--board-renderer-font);\n }\n md-icon[edit] {\n right: 0;\n\n border-bottom-left-radius: var(--board-renderer-icon-border-radius);\n background-color: var(--md-sys-color-secondary);\n }\n md-icon[view] {\n left: 0;\n\n border-bottom-right-radius: var(--board-renderer-icon-border-radius);\n background-color: var(--md-sys-color-secondary);\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: String }) boardViewerPage?: string\n @property({ type: Object }) _value: any\n\n async updated(changes) {\n if (changes.has('value')) {\n if (typeof this.value == 'string' && this.value) {\n /* fetchBoard..., */\n try {\n var response = await client.query({\n query: FETCH_BOARD_GQL(this.value),\n context: gqlContext()\n })\n\n this._value = (response && response.data && response.data.board) || {}\n } catch (e) {\n console.error(e)\n }\n } else {\n this._value = this.value || {}\n }\n }\n }\n\n render() {\n var { id, name = '', thumbnail = 'image/gif' } = this._value || {}\n\n return id\n ? html`\n <span>${name}</span>\n <img src=${thumbnail} alt=\"no thumbnail!\" />\n <md-icon view @mousedown=${e => this.onClickViewer(e, id)}>search</md-icon>\n <md-icon edit @mousedown=${e => this.onClickModeler(e, id)}>edit</md-icon>\n `\n : html` choose board.. `\n }\n\n onClickViewer(e, id) {\n e.preventDefault()\n e.stopPropagation()\n\n var boardViewerPage = this.boardViewerPage || 'board-viewer'\n\n navigate(`${boardViewerPage}/${id}${window.location.search}`)\n }\n\n onClickModeler(e, id) {\n e.preventDefault()\n e.stopPropagation()\n\n navigate(`board-modeller/${id}${window.location.search}`)\n }\n}\n\nexport const BoardRenderer = (value, column, record) => {\n var { boardViewerPage = '' } = column.record.options || {}\n\n return html` <board-renderer .value=${value} .boardViewerPage=${boardViewerPage}></board-renderer> `\n}\n"]}