@things-factory/board-ui 7.0.15 → 7.0.22
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.
|
@@ -78,9 +78,9 @@ BoardRendererElement.styles = [
|
|
|
78
78
|
bottom: 0;
|
|
79
79
|
width: 100%;
|
|
80
80
|
text-indent: 5px;
|
|
81
|
-
color: #fff;
|
|
82
81
|
|
|
83
82
|
font: var(--board-renderer-name-font);
|
|
83
|
+
color: var(--md-sys-color-on-primary);
|
|
84
84
|
background-color: var(--md-sys-color-primary);
|
|
85
85
|
}
|
|
86
86
|
img {
|
|
@@ -92,7 +92,8 @@ BoardRendererElement.styles = [
|
|
|
92
92
|
position: absolute;
|
|
93
93
|
top: 0;
|
|
94
94
|
text-align: center;
|
|
95
|
-
color:
|
|
95
|
+
color: var(--md-sys-color-on-primary);
|
|
96
|
+
background-color: var(--md-sys-color-primary);
|
|
96
97
|
|
|
97
98
|
width: var(--board-renderer-icon-size);
|
|
98
99
|
height: var(--board-renderer-icon-size);
|
|
@@ -102,13 +103,11 @@ BoardRendererElement.styles = [
|
|
|
102
103
|
right: 0;
|
|
103
104
|
|
|
104
105
|
border-bottom-left-radius: var(--board-renderer-icon-border-radius);
|
|
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(--md-sys-color-secondary);
|
|
112
111
|
}
|
|
113
112
|
`
|
|
114
113
|
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"board-renderer.js","sourceRoot":"","sources":["../../client/data-grist/board-renderer.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAErD,MAAM,eAAe,GAAG,EAAE,CAAC,EAAE;IAC3B,OAAO,GAAG,CAAA;;gBAEI,EAAE;;;;;;;CAOjB,CAAA;AACD,CAAC,CAAA;AAGD,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;
|
|
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\n font: var(--board-renderer-name-font);\n color: var(--md-sys-color-on-primary);\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: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\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 }\n md-icon[view] {\n left: 0;\n\n border-bottom-right-radius: var(--board-renderer-icon-border-radius);\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"]}
|