@things-factory/board-ui 10.1.160 → 10.1.165
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.
- package/dist-client/board-list/board-card-thumb.d.ts +16 -0
- package/dist-client/board-list/board-card-thumb.js +25 -0
- package/dist-client/board-list/board-card-thumb.js.map +1 -0
- package/dist-client/pages/board-list-page.d.ts +0 -1
- package/dist-client/pages/board-list-page.js +7 -8
- package/dist-client/pages/board-list-page.js.map +1 -1
- package/dist-client/pages/board-template/board-template-list-page.d.ts +2 -3
- package/dist-client/pages/board-template/board-template-list-page.js +8 -8
- package/dist-client/pages/board-template/board-template-list-page.js.map +1 -1
- package/dist-client/pages/play-list-page.d.ts +0 -1
- package/dist-client/pages/play-list-page.js +7 -7
- package/dist-client/pages/play-list-page.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/helps/board-modeller/data-binding-property.ko.md +1 -1
- package/helps/board-modeller/data-binding.ko.md +1 -1
- package/helps/board-modeller/data-spread.ko.md +1 -1
- package/helps/board-modeller/effects/hover-event.ko.md +2 -2
- package/helps/board-modeller/effects/tap-event.ko.md +3 -3
- package/helps/board-modeller/modeller.ko.md +1 -1
- package/helps/board-modeller/shapes/shapes.ko.md +1 -1
- package/package.json +7 -7
- package/translations/ko.json +1 -1
- package/dist-client/board-list/board-thumb.d.ts +0 -33
- package/dist-client/board-list/board-thumb.js +0 -119
- package/dist-client/board-list/board-thumb.js.map +0 -1
- package/dist-client/styles/board-card-styles.d.ts +0 -11
- package/dist-client/styles/board-card-styles.js +0 -56
- package/dist-client/styles/board-card-styles.js.map +0 -1
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
- value 속성은 각 컴포넌트의 대표속성과 동일한 기능을 합니다.
|
|
23
23
|
- 예를 들면, 'rect' 컴포넌트의 경우에 'value'와 'text' 속성은 같은 효과를 만들게 됩니다. 'rect'의 대표 속성이 'text' 이기 때문입니다.
|
|
24
24
|
- 'scenario-run' 컴포넌트의 경우에 'value'는 'variables' 속성과 같은 기능을 하게됩니다. 이 속성은 시나리오 호출시에 넘겨줄 파라미터로 사용됩니다.
|
|
25
|
-
- 각 컴포넌트의 대표 속성이 무엇인지는 각 컴포넌트 도움말을
|
|
25
|
+
- 각 컴포넌트의 대표 속성이 무엇인지는 각 컴포넌트 도움말을 참조해 주세요.
|
|
26
26
|
|
|
27
27
|
- data
|
|
28
28
|
- 대상 컴포넌트의 data 속성에 반영된다.
|
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
- 팝업창의 위치는 팝업 대상 보드의 크기와 호버된 컴포넌트의 위치를 감안해서 다음의 위치중 한 곳에 보여진다.
|
|
16
16
|
- top-left, top-right, bottom-left, bottom-right, center
|
|
17
17
|
- 팝업창의 크기는 현재 보드의 크기보다 커서는 안된다. 팝업 대상 보드의 크기가 현재 보드보다 크면, 팝업 대상 보드의 모든 내용을 보기 힘들게 된다.
|
|
18
|
-
- 팝업창을 닫기 위해서는 팝업창 우측 상단의 'X'
|
|
18
|
+
- 팝업창을 닫기 위해서는 팝업창 우측 상단의 'X' 닫기 버튼을 누르거나, 대상 보드의 특정 컴포넌트의 탭이벤트가 'close current board'로 설정되어 있다면, 해당 컴포넌트를 클릭해서 닫을 수 있다.
|
|
19
19
|
- 'reset on leave(나갈 때 원상태로 복구)' 설정에 영향을 받지 않는다.
|
|
20
20
|
- 파라미터
|
|
21
21
|
- target : 팝업창으로 보여줄 대상 보드를 보드목록에서 지정한다.
|
|
22
22
|
- open infowindow
|
|
23
23
|
- 'info-window' 컴포넌트에 설정된 내용으로 호버된 포인트에 근접한 위치에 인포윈도우를 띄워준다.
|
|
24
|
-
- 'reset on leave(나갈 때 원상태로 복구)' 설정이
|
|
24
|
+
- 'reset on leave(나갈 때 원상태로 복구)' 설정이 되어 있으면, 마우스 포인터가 컴포넌트에서 벗어날 때 인포윈도우도 닫힙니다.
|
|
25
25
|
- 파라미터
|
|
26
26
|
- target : 대상 인포윈도우의 아이디를 지정한다.
|
|
27
27
|
- toggle target component data
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
- goto target board
|
|
16
16
|
- 타겟으로 지정한 대상 보드로 이동한다.
|
|
17
|
-
- 이를 지원하는 뷰어는 현재 보드에서 타겟보드로 화면이 바뀌게 되며, 뷰어에서 제공하는 '뒤로 가기' 기능으로
|
|
17
|
+
- 이를 지원하는 뷰어는 현재 보드에서 타겟보드로 화면이 바뀌게 되며, 뷰어에서 제공하는 '뒤로 가기' 기능으로 되돌아오거나, 대상 보드의 특정 컴포넌트의 탭이벤트가 'close current board'로 설정되어 있다면, 해당 컴포넌트를 클릭해서 돌아올 수 있다.
|
|
18
18
|
- 이처럼 보드 네비게이션을 제공하는 뷰어에서 효과를 발휘한다.
|
|
19
19
|
- 파라미터
|
|
20
20
|
- 대상(target) : 팝업창으로 보여줄 대상 보드를 보드목록에서 지정한다.
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
- 팝업창의 위치는 팝업 대상 보드의 크기와 호버된 컴포넌트의 위치를 감안해서 다음의 위치중 한 곳에 보여진다.
|
|
37
37
|
- top-left, top-right, bottom-left, bottom-right, center
|
|
38
38
|
- 팝업창의 크기는 현재 보드의 크기보다 커서는 안된다. 팝업 대상 보드의 크기가 현재 보드보다 크면, 팝업 대상 보드의 모든 내용을 보기 힘들게 된다.
|
|
39
|
-
- 팝업창을 닫기 위해서는 팝업창 우측 상단의 'X'
|
|
39
|
+
- 팝업창을 닫기 위해서는 팝업창 우측 상단의 'X' 닫기 버튼을 누르거나, 대상 보드의 특정 컴포넌트의 탭이벤트가 'close current board'로 설정되어 있다면, 해당 컴포넌트를 클릭해서 닫을 수 있다.
|
|
40
40
|
- 파라미터
|
|
41
41
|
- 대상(target) : 팝업창으로 보여줄 대상 보드를 보드목록에서 지정한다.
|
|
42
42
|
- 입력데이타 : 대상보드에 전달될 초기값. 이 파라미터에 지정된 컴포넌트의 데이터값이 초기값으로 전달된다.
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
- modal popup target board
|
|
45
45
|
- popup target board 와 동일하나 팝업창은 'modal'식으로 동작한다. 팝업창을 닫기 위해서는 팝업창 주변의 backdrop 부분을 클릭하거나, esc 키로 제거한다.
|
|
46
46
|
- close current board
|
|
47
|
-
- 이 컴포넌트가 속한 보드가 'popup target board'으로 오픈된 경우이면 popup이
|
|
47
|
+
- 이 컴포넌트가 속한 보드가 'popup target board'으로 오픈된 경우이면 popup이 닫힙니다.
|
|
48
48
|
- 이 컴포넌트가 속한 보드가 'goto target board'로 이동된 경우이면 이전 보드로 돌아간다.
|
|
49
49
|
- open infowindow
|
|
50
50
|
- 'info-window' 컴포넌트에 설정된 내용으로 호버된 포인트에 근접한 위치에 인포윈도우를 띄워준다.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@things-factory/board-ui",
|
|
3
|
-
"version": "10.1.
|
|
3
|
+
"version": "10.1.165",
|
|
4
4
|
"main": "dist-server/index.js",
|
|
5
5
|
"browser": "dist-client/index.js",
|
|
6
6
|
"things-factory": true,
|
|
@@ -43,12 +43,12 @@
|
|
|
43
43
|
"@operato/shell": "^10.29.2",
|
|
44
44
|
"@operato/styles": "^10.0.0",
|
|
45
45
|
"@operato/utils": "^10.0.0",
|
|
46
|
-
"@things-factory/ai-assistant": "^10.1.
|
|
47
|
-
"@things-factory/barcode-base": "^10.1.
|
|
48
|
-
"@things-factory/board-ai": "^10.1.
|
|
49
|
-
"@things-factory/fav-base": "^10.1.
|
|
50
|
-
"@things-factory/setting-base": "^10.1.
|
|
46
|
+
"@things-factory/ai-assistant": "^10.1.165",
|
|
47
|
+
"@things-factory/barcode-base": "^10.1.165",
|
|
48
|
+
"@things-factory/board-ai": "^10.1.165",
|
|
49
|
+
"@things-factory/fav-base": "^10.1.165",
|
|
50
|
+
"@things-factory/setting-base": "^10.1.165",
|
|
51
51
|
"@things-factory/utils": "^10.1.20"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "d9e3774d70561b063e4f1d10c387caf721d99b61"
|
|
54
54
|
}
|
package/translations/ko.json
CHANGED
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"error.license key is empty": "라이센스 정보가 없습니다!",
|
|
95
95
|
"error.license key is not certified": "라이센스가 인증되지 않았습니다!",
|
|
96
96
|
"error.license token not valid": "라이선스 토큰 데이터 검사에 실패하였습니다!",
|
|
97
|
-
"error.name must be unique from the original board": "원본 보드와 다른 이름을
|
|
97
|
+
"error.name must be unique from the original board": "원본 보드와 다른 이름을 입력해 주세요",
|
|
98
98
|
"error.setting-error": "설정 오류",
|
|
99
99
|
"error.your license due date is x, please renewal your license!": "라이센스 기한은 {x}입니다. 라이센스를 갱신하십시오!",
|
|
100
100
|
"error.your license is expired! expired date is [x]": "라이센스가 만료되었습니다! 만료일은 [{x}]입니다!",
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import '@material/web/icon/icon.js';
|
|
2
|
-
import { LitElement } from 'lit';
|
|
3
|
-
declare const BoardThumb_base: (new (...args: any[]) => LitElement) & typeof LitElement;
|
|
4
|
-
/**
|
|
5
|
-
* A board card's image cell - the picture itself, plus the draft marker.
|
|
6
|
-
*
|
|
7
|
-
* ## Why a component
|
|
8
|
-
*
|
|
9
|
-
* The catalog draws in ox-grist's CARD mode. The grid treats the thumbnail as one column, drawn by
|
|
10
|
-
* that column's `record.renderer` - and a renderer's output lands inside `ox-card-field`'s own
|
|
11
|
-
* shadow root, several shadow boundaries below this page's stylesheet, so inline `style=""` is the
|
|
12
|
-
* only way to reach it directly. That still works for a plain image and a badge, but this stays a
|
|
13
|
-
* component (rather than folding back into an inline renderer) because the border-bottom seam
|
|
14
|
-
* against the info area below wants the same shadow-scoped styling.
|
|
15
|
-
*
|
|
16
|
-
* ## Why info and favorite do *not* live here
|
|
17
|
-
*
|
|
18
|
-
* They did, briefly, overlaid on the image the way figure-ui's figure-thumb.ts overlays its own
|
|
19
|
-
* (2026-09-23). Reverted the same day: a figure's picture is a neutral rendered part, closer to a
|
|
20
|
-
* plan drawing than a screen - text and icons laid over it read fine. A board's picture is the
|
|
21
|
-
* actual dashboard, often already dense with its own labels and numbers; icons on top of that
|
|
22
|
-
* compete with content the catalog exists to let a person recognize at a glance. Board's info and
|
|
23
|
-
* favorite are gutter buttons instead (board-list-page.ts / play-list-page.ts), in the information
|
|
24
|
-
* area below the picture, not on it.
|
|
25
|
-
*/
|
|
26
|
-
export declare class BoardThumb extends BoardThumb_base {
|
|
27
|
-
static styles: import("lit").CSSResult;
|
|
28
|
-
board: any;
|
|
29
|
-
badge?: string;
|
|
30
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
31
|
-
private renderBadge;
|
|
32
|
-
}
|
|
33
|
-
export {};
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import { __decorate, __metadata } from "tslib";
|
|
2
|
-
import '@material/web/icon/icon.js';
|
|
3
|
-
import { css, html, LitElement } from 'lit';
|
|
4
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
-
import { i18next, localize } from '@operato/i18n';
|
|
6
|
-
/**
|
|
7
|
-
* A board card's image cell - the picture itself, plus the draft marker.
|
|
8
|
-
*
|
|
9
|
-
* ## Why a component
|
|
10
|
-
*
|
|
11
|
-
* The catalog draws in ox-grist's CARD mode. The grid treats the thumbnail as one column, drawn by
|
|
12
|
-
* that column's `record.renderer` - and a renderer's output lands inside `ox-card-field`'s own
|
|
13
|
-
* shadow root, several shadow boundaries below this page's stylesheet, so inline `style=""` is the
|
|
14
|
-
* only way to reach it directly. That still works for a plain image and a badge, but this stays a
|
|
15
|
-
* component (rather than folding back into an inline renderer) because the border-bottom seam
|
|
16
|
-
* against the info area below wants the same shadow-scoped styling.
|
|
17
|
-
*
|
|
18
|
-
* ## Why info and favorite do *not* live here
|
|
19
|
-
*
|
|
20
|
-
* They did, briefly, overlaid on the image the way figure-ui's figure-thumb.ts overlays its own
|
|
21
|
-
* (2026-09-23). Reverted the same day: a figure's picture is a neutral rendered part, closer to a
|
|
22
|
-
* plan drawing than a screen - text and icons laid over it read fine. A board's picture is the
|
|
23
|
-
* actual dashboard, often already dense with its own labels and numbers; icons on top of that
|
|
24
|
-
* compete with content the catalog exists to let a person recognize at a glance. Board's info and
|
|
25
|
-
* favorite are gutter buttons instead (board-list-page.ts / play-list-page.ts), in the information
|
|
26
|
-
* area below the picture, not on it.
|
|
27
|
-
*/
|
|
28
|
-
let BoardThumb = class BoardThumb extends localize(i18next)(LitElement) {
|
|
29
|
-
static { this.styles = css `
|
|
30
|
-
:host {
|
|
31
|
-
position: relative;
|
|
32
|
-
display: block;
|
|
33
|
-
width: 100%;
|
|
34
|
-
height: 100%;
|
|
35
|
-
overflow: hidden;
|
|
36
|
-
/* The name/gutters area below has no border of its own (record-card.ts's [content] is plain
|
|
37
|
-
* margin) - without this the image bleeds straight into it with no seam. */
|
|
38
|
-
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
|
39
|
-
box-sizing: border-box;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
img {
|
|
43
|
-
display: block;
|
|
44
|
-
width: 100%;
|
|
45
|
-
height: 100%;
|
|
46
|
-
/*
|
|
47
|
-
contain, not cover. Boards are not one shape - a wide dashboard, a portrait barcode label,
|
|
48
|
-
a small popup - and cover cropped each one differently, so no two cards framed their
|
|
49
|
-
picture alike and the grid never settled. contain shows the whole board on the neutral plate
|
|
50
|
-
(--data-card-thumbnail-background) the way figure-list-page shows a whole figure, so every
|
|
51
|
-
card reads as "a picture in a frame" and the row lines up.
|
|
52
|
-
*/
|
|
53
|
-
object-fit: contain;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
div[empty] {
|
|
57
|
-
display: flex;
|
|
58
|
-
align-items: center;
|
|
59
|
-
justify-content: center;
|
|
60
|
-
width: 100%;
|
|
61
|
-
height: 100%;
|
|
62
|
-
color: var(--md-sys-color-outline);
|
|
63
|
-
}
|
|
64
|
-
div[empty] md-icon {
|
|
65
|
-
--md-icon-size: 28px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
/* Draft marker - only draft ever says anything, same reasoning as figure-thumb.ts's span[draft]. */
|
|
69
|
-
span[draft] {
|
|
70
|
-
position: absolute;
|
|
71
|
-
top: 6px;
|
|
72
|
-
left: 6px;
|
|
73
|
-
padding: 1px 7px;
|
|
74
|
-
font: var(--label-font, inherit);
|
|
75
|
-
font-size: 0.68rem;
|
|
76
|
-
line-height: 1.5;
|
|
77
|
-
color: var(--md-sys-color-on-secondary-container);
|
|
78
|
-
background-color: var(--md-sys-color-secondary-container);
|
|
79
|
-
border-radius: 4px;
|
|
80
|
-
}
|
|
81
|
-
`; }
|
|
82
|
-
render() {
|
|
83
|
-
const board = this.board;
|
|
84
|
-
if (!board) {
|
|
85
|
-
return html ``;
|
|
86
|
-
}
|
|
87
|
-
return html `
|
|
88
|
-
${board.thumbnail
|
|
89
|
-
? html `<img src=${board.thumbnail} alt=${board.name || ''} loading="lazy" />`
|
|
90
|
-
: html `
|
|
91
|
-
<div empty>
|
|
92
|
-
<md-icon>dashboard</md-icon>
|
|
93
|
-
</div>
|
|
94
|
-
`}
|
|
95
|
-
${this.renderBadge(board)}
|
|
96
|
-
`;
|
|
97
|
-
}
|
|
98
|
-
renderBadge(board) {
|
|
99
|
-
const text = this.badge !== undefined
|
|
100
|
-
? this.badge
|
|
101
|
-
: board.state === 'released'
|
|
102
|
-
? ''
|
|
103
|
-
: i18next.t('label.draft', { defaultValue: 'Draft' });
|
|
104
|
-
return text ? html `<span draft>${text}</span>` : '';
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
__decorate([
|
|
108
|
-
property({ type: Object }),
|
|
109
|
-
__metadata("design:type", Object)
|
|
110
|
-
], BoardThumb.prototype, "board", void 0);
|
|
111
|
-
__decorate([
|
|
112
|
-
property({ type: String }),
|
|
113
|
-
__metadata("design:type", String)
|
|
114
|
-
], BoardThumb.prototype, "badge", void 0);
|
|
115
|
-
BoardThumb = __decorate([
|
|
116
|
-
customElement('board-thumb')
|
|
117
|
-
], BoardThumb);
|
|
118
|
-
export { BoardThumb };
|
|
119
|
-
//# sourceMappingURL=board-thumb.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"board-thumb.js","sourceRoot":"","sources":["../../client/board-list/board-thumb.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACpD,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDlB,AApDY,CAoDZ;IAOD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACxB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,SAAS;YACf,CAAC,CAAC,IAAI,CAAA,YAAY,KAAK,CAAC,SAAS,QAAQ,KAAK,CAAC,IAAI,IAAI,EAAE,oBAAoB;YAC7E,CAAC,CAAC,IAAI,CAAA;;;;WAIH;QACH,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;KAC1B,CAAA;IACH,CAAC;IAEO,WAAW,CAAC,KAAU;QAC5B,MAAM,IAAI,GACR,IAAI,CAAC,KAAK,KAAK,SAAS;YACtB,CAAC,CAAC,IAAI,CAAC,KAAK;YACZ,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,UAAU;gBAC1B,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAA;QAE3D,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAA;IACrD,CAAC;;AAhC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAY;AAGX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAe;AA1D/B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAwFtB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n/**\n * A board card's image cell - the picture itself, plus the draft marker.\n *\n * ## Why a component\n *\n * The catalog draws in ox-grist's CARD mode. The grid treats the thumbnail as one column, drawn by\n * that column's `record.renderer` - and a renderer's output lands inside `ox-card-field`'s own\n * shadow root, several shadow boundaries below this page's stylesheet, so inline `style=\"\"` is the\n * only way to reach it directly. That still works for a plain image and a badge, but this stays a\n * component (rather than folding back into an inline renderer) because the border-bottom seam\n * against the info area below wants the same shadow-scoped styling.\n *\n * ## Why info and favorite do *not* live here\n *\n * They did, briefly, overlaid on the image the way figure-ui's figure-thumb.ts overlays its own\n * (2026-09-23). Reverted the same day: a figure's picture is a neutral rendered part, closer to a\n * plan drawing than a screen - text and icons laid over it read fine. A board's picture is the\n * actual dashboard, often already dense with its own labels and numbers; icons on top of that\n * compete with content the catalog exists to let a person recognize at a glance. Board's info and\n * favorite are gutter buttons instead (board-list-page.ts / play-list-page.ts), in the information\n * area below the picture, not on it.\n */\n@customElement('board-thumb')\nexport class BoardThumb extends localize(i18next)(LitElement) {\n static styles = css`\n :host {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n overflow: hidden;\n /* The name/gutters area below has no border of its own (record-card.ts's [content] is plain\n * margin) - without this the image bleeds straight into it with no seam. */\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n box-sizing: border-box;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n /*\n contain, not cover. Boards are not one shape - a wide dashboard, a portrait barcode label,\n a small popup - and cover cropped each one differently, so no two cards framed their\n picture alike and the grid never settled. contain shows the whole board on the neutral plate\n (--data-card-thumbnail-background) the way figure-list-page shows a whole figure, so every\n card reads as \"a picture in a frame\" and the row lines up.\n */\n object-fit: contain;\n }\n\n div[empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: var(--md-sys-color-outline);\n }\n div[empty] md-icon {\n --md-icon-size: 28px;\n }\n\n /* Draft marker - only draft ever says anything, same reasoning as figure-thumb.ts's span[draft]. */\n span[draft] {\n position: absolute;\n top: 6px;\n left: 6px;\n padding: 1px 7px;\n font: var(--label-font, inherit);\n font-size: 0.68rem;\n line-height: 1.5;\n color: var(--md-sys-color-on-secondary-container);\n background-color: var(--md-sys-color-secondary-container);\n border-radius: 4px;\n }\n `\n\n @property({ type: Object }) board!: any\n /* Overrides the marker text. Unset means \"the draft rule\"; an empty string means no marker at\n * all - a template has no draft/released state, so board-template-list-page.ts passes ''. */\n @property({ type: String }) badge?: string\n\n render() {\n const board = this.board\n if (!board) {\n return html``\n }\n\n return html`\n ${board.thumbnail\n ? html`<img src=${board.thumbnail} alt=${board.name || ''} loading=\"lazy\" />`\n : html`\n <div empty>\n <md-icon>dashboard</md-icon>\n </div>\n `}\n ${this.renderBadge(board)}\n `\n }\n\n private renderBadge(board: any) {\n const text =\n this.badge !== undefined\n ? this.badge\n : board.state === 'released'\n ? ''\n : i18next.t('label.draft', { defaultValue: 'Draft' })\n\n return text ? html`<span draft>${text}</span>` : ''\n }\n}\n"]}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The one card look for every board catalog - board list, play list, template list.
|
|
3
|
-
*
|
|
4
|
-
* Each page hosts an `ox-grist` in CARD mode and sets the card by `--data-card-*` variables. The
|
|
5
|
-
* three pages used to carry the same forty lines apiece (2026-09-23); a drift between them is
|
|
6
|
-
* exactly the "why does this page look different" complaint this suite keeps hearing, so the
|
|
7
|
-
* tokens now live once, here, and a page adds only what is its own (a chip strip). The FAB is the suite's (`FabStyles`).
|
|
8
|
-
*
|
|
9
|
-
* Sized and typed after figure-ui's figure-list-page.ts, so board and figure read as one product.
|
|
10
|
-
*/
|
|
11
|
-
export declare const BoardCardStyles: import("lit").CSSResult;
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
import { FabStyles } from '@operato/styles';
|
|
3
|
-
/**
|
|
4
|
-
* The one card look for every board catalog - board list, play list, template list.
|
|
5
|
-
*
|
|
6
|
-
* Each page hosts an `ox-grist` in CARD mode and sets the card by `--data-card-*` variables. The
|
|
7
|
-
* three pages used to carry the same forty lines apiece (2026-09-23); a drift between them is
|
|
8
|
-
* exactly the "why does this page look different" complaint this suite keeps hearing, so the
|
|
9
|
-
* tokens now live once, here, and a page adds only what is its own (a chip strip). The FAB is the suite's (`FabStyles`).
|
|
10
|
-
*
|
|
11
|
-
* Sized and typed after figure-ui's figure-list-page.ts, so board and figure read as one product.
|
|
12
|
-
*/
|
|
13
|
-
export const BoardCardStyles = css `
|
|
14
|
-
/* The page's one primary action: the suite's card-page FAB. */
|
|
15
|
-
${FabStyles}
|
|
16
|
-
|
|
17
|
-
:host {
|
|
18
|
-
/* The frame (WorkSurfacePageStyles) lays the page out; this only anchors the FAB. */
|
|
19
|
-
position: relative;
|
|
20
|
-
|
|
21
|
-
--data-card-min-width: 240px;
|
|
22
|
-
--data-card-record-card-border-radius: 6px;
|
|
23
|
-
--data-card-record-card-padding: 0;
|
|
24
|
-
--data-card-thumbnail-aspect: 16 / 9;
|
|
25
|
-
--data-card-thumbnail-padding: 0;
|
|
26
|
-
--data-card-thumbnail-radius: 6px 6px 0 0;
|
|
27
|
-
/* The card's two surfaces. The theme raises both in dark (--board-card-surface / -plate in
|
|
28
|
-
* operato-board's board-accent.css): the light defaults - white card, light plate - become
|
|
29
|
-
* black on black there, and a card that does not lift off its page is not a card. */
|
|
30
|
-
--data-card-record-card-background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));
|
|
31
|
-
--data-card-thumbnail-background: var(--board-card-plate, var(--md-sys-color-surface-container));
|
|
32
|
-
/* The right margin clears the corner where the action icons sit (below). */
|
|
33
|
-
--data-card-item-margin: 10px 52px 10px 12px;
|
|
34
|
-
--data-card-item-name-font: 500 0.9rem/1.35 var(--theme-font, 'Roboto');
|
|
35
|
-
--data-card-item-name-color: var(--md-sys-color-on-surface);
|
|
36
|
-
--data-card-item-etc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');
|
|
37
|
-
/* The second line under the name is a side note, not a rival to it. */
|
|
38
|
-
--data-card-item-disc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');
|
|
39
|
-
--data-card-item-disc-color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
|
|
40
|
-
/* record-card.ts reads these two with no fallback - unset means no hover feedback at all. */
|
|
41
|
-
--data-card-record-card-border-hover: 1px solid var(--md-sys-color-outline-variant);
|
|
42
|
-
--data-card-record-card-boxshadow-hover: 0 2px 8px rgba(0, 0, 0, 0.16);
|
|
43
|
-
/* Card actions are secondary to the picture and the name: small, in the quiet outline tone. */
|
|
44
|
-
--data-card-gutter-icon-size: 16px;
|
|
45
|
-
--data-card-gutter-icon-color: var(--md-sys-color-outline);
|
|
46
|
-
/* One or two small icons do not deserve a row of their own under the text: park them in the
|
|
47
|
-
* bottom-right corner, level with the meta line, so the information area stays two lines tall. */
|
|
48
|
-
--data-card-gutters-position: absolute;
|
|
49
|
-
--data-card-gutters-inset: auto 8px 9px auto;
|
|
50
|
-
--data-card-gutters-margin: 0;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/* .page-fill is WorkSurfacePageStyles' own class (flex: 1; min-height: 0) - the min-height half
|
|
54
|
-
* is what lets ox-grist's internal scroller, not the page, be the thing that scrolls. */
|
|
55
|
-
`;
|
|
56
|
-
//# sourceMappingURL=board-card-styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"board-card-styles.js","sourceRoot":"","sources":["../../client/styles/board-card-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;IAE9B,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCZ,CAAA","sourcesContent":["import { css } from 'lit'\n\nimport { FabStyles } from '@operato/styles'\n\n/**\n * The one card look for every board catalog - board list, play list, template list.\n *\n * Each page hosts an `ox-grist` in CARD mode and sets the card by `--data-card-*` variables. The\n * three pages used to carry the same forty lines apiece (2026-09-23); a drift between them is\n * exactly the \"why does this page look different\" complaint this suite keeps hearing, so the\n * tokens now live once, here, and a page adds only what is its own (a chip strip). The FAB is the suite's (`FabStyles`).\n *\n * Sized and typed after figure-ui's figure-list-page.ts, so board and figure read as one product.\n */\nexport const BoardCardStyles = css`\n /* The page's one primary action: the suite's card-page FAB. */\n ${FabStyles}\n\n :host {\n /* The frame (WorkSurfacePageStyles) lays the page out; this only anchors the FAB. */\n position: relative;\n\n --data-card-min-width: 240px;\n --data-card-record-card-border-radius: 6px;\n --data-card-record-card-padding: 0;\n --data-card-thumbnail-aspect: 16 / 9;\n --data-card-thumbnail-padding: 0;\n --data-card-thumbnail-radius: 6px 6px 0 0;\n /* The card's two surfaces. The theme raises both in dark (--board-card-surface / -plate in\n * operato-board's board-accent.css): the light defaults - white card, light plate - become\n * black on black there, and a card that does not lift off its page is not a card. */\n --data-card-record-card-background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));\n --data-card-thumbnail-background: var(--board-card-plate, var(--md-sys-color-surface-container));\n /* The right margin clears the corner where the action icons sit (below). */\n --data-card-item-margin: 10px 52px 10px 12px;\n --data-card-item-name-font: 500 0.9rem/1.35 var(--theme-font, 'Roboto');\n --data-card-item-name-color: var(--md-sys-color-on-surface);\n --data-card-item-etc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');\n /* The second line under the name is a side note, not a rival to it. */\n --data-card-item-disc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');\n --data-card-item-disc-color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n /* record-card.ts reads these two with no fallback - unset means no hover feedback at all. */\n --data-card-record-card-border-hover: 1px solid var(--md-sys-color-outline-variant);\n --data-card-record-card-boxshadow-hover: 0 2px 8px rgba(0, 0, 0, 0.16);\n /* Card actions are secondary to the picture and the name: small, in the quiet outline tone. */\n --data-card-gutter-icon-size: 16px;\n --data-card-gutter-icon-color: var(--md-sys-color-outline);\n /* One or two small icons do not deserve a row of their own under the text: park them in the\n * bottom-right corner, level with the meta line, so the information area stays two lines tall. */\n --data-card-gutters-position: absolute;\n --data-card-gutters-inset: auto 8px 9px auto;\n --data-card-gutters-margin: 0;\n }\n\n /* .page-fill is WorkSurfacePageStyles' own class (flex: 1; min-height: 0) - the min-height half\n * is what lets ox-grist's internal scroller, not the page, be the thing that scrolls. */\n`\n"]}
|