@c8y/style 1022.27.0 β 1022.30.0
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.
|
Binary file
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
### π Dashboard manager: Smarter, more flexible dashboards
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
We are making it easier than ever to organize and view your device data. The **Dashboard manager** in **Device management** brings more flexibility, consistency, and control over device dashboards.
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
With this update, you can create **template dashboards that automatically apply to devices of the same type**, ensuring consistent views across your environment. The **Dashboard Manager** makes it simple to organize dashboards in one place, while support for **multiple dashboards per device** gives you the freedom to tailor different perspectives for different use cases. You can also **name dashboards in ways that match your workflows**, so finding the right view is effortless.
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### β¨ Key Enhancements & Features
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
#### π Type-based dashboard templates
|
|
20
|
+
|
|
21
|
+
Build once, apply everywhere. Create dashboards that automatically apply to devices of the same type, saving time and ensuring consistency.
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
#### ποΈ Dashboard Manager
|
|
26
|
+
|
|
27
|
+
A simple, centralized way to create, edit, and organize dashboards across your environment.
|
|
28
|
+
|
|
29
|
+
<img src="./c8y-style-assets/dm-dashboard-manager.png" alt="Dashboard manager" width="100%">
|
|
30
|
+
|
|
31
|
+
#### β Multiple dashboards per device
|
|
32
|
+
|
|
33
|
+
Add as many dashboards as you need to a single device β tailor views for different use cases.
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
#### π Custom dashboard names
|
|
38
|
+
|
|
39
|
+
Label dashboards with meaningful names so your teams can quickly find the views they need.
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
#### π Seamless compatibility
|
|
44
|
+
|
|
45
|
+
Keep your current **Info** dashboards β theyβll continue to work right alongside the new type-based ones.
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
#### π‘ Why This Upgrade Matters
|
|
50
|
+
|
|
51
|
+
π With these updates, managing dashboards is faster, more intuitive, and ready to scale with your needs.
|
package/package.json
CHANGED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
c8y-resizable-grid {
|
|
2
|
+
display: flex;
|
|
3
|
+
height: 100%;
|
|
4
|
+
position: relative;
|
|
5
|
+
|
|
6
|
+
// This CSS variable is set by the component and used here
|
|
7
|
+
--col-a-width: var(--c8y-resizable-grid-default-width, 560px);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.resizable-grid-container {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-grow: 1;
|
|
13
|
+
height: 100%;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
|
|
16
|
+
/* Prevent content overflow during resize */
|
|
17
|
+
.collapsed {
|
|
18
|
+
width: 0 !important; // Hide the column
|
|
19
|
+
min-width: 0 !important;
|
|
20
|
+
opacity: 0;
|
|
21
|
+
transition: all 0.3s ease;
|
|
22
|
+
flex-shrink: 1;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.expanded {
|
|
26
|
+
transition: all 0.3s ease;
|
|
27
|
+
flex-grow: 1;
|
|
28
|
+
width: calc(100% - 8px)!important;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&:has(.collapsed) {
|
|
32
|
+
.resizer > i{
|
|
33
|
+
display: block;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.col-a {
|
|
39
|
+
width: var(--col-a-width);
|
|
40
|
+
min-width: 0;
|
|
41
|
+
flex-shrink: 0; // Prevent it from shrinking
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
|
|
44
|
+
>* {
|
|
45
|
+
min-width: fit-content;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.col-b {
|
|
50
|
+
flex-grow: 1; // Col B takes up remaining space
|
|
51
|
+
overflow: hidden;
|
|
52
|
+
min-width: 0;
|
|
53
|
+
|
|
54
|
+
>* {
|
|
55
|
+
min-width: fit-content;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.resizer {
|
|
60
|
+
width: 8px;
|
|
61
|
+
flex: 0 0 8px;
|
|
62
|
+
cursor: col-resize;
|
|
63
|
+
z-index: 1;
|
|
64
|
+
position: relative;
|
|
65
|
+
overflow: visible;
|
|
66
|
+
|
|
67
|
+
&::before {
|
|
68
|
+
content: '';
|
|
69
|
+
position: absolute;
|
|
70
|
+
top: 0;
|
|
71
|
+
left: 50%;
|
|
72
|
+
transform: translateX(-50%);
|
|
73
|
+
width: 1px;
|
|
74
|
+
bottom: 0;
|
|
75
|
+
background: @component-border-color;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
>i {
|
|
79
|
+
position: absolute;
|
|
80
|
+
top: 50%;
|
|
81
|
+
left: 50%;
|
|
82
|
+
transform: translate(-50%, -50%);
|
|
83
|
+
background-color: @component-background-default;
|
|
84
|
+
border-radius: 50%;
|
|
85
|
+
color: @component-color-text-muted;
|
|
86
|
+
&::before{
|
|
87
|
+
transition: all 0.3s ease;
|
|
88
|
+
display: block;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.is-resizing &,
|
|
93
|
+
&:hover, &:focus {
|
|
94
|
+
&::before {
|
|
95
|
+
background: @component-color-focus;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
>i {
|
|
99
|
+
color: @component-color-focus;
|
|
100
|
+
display: block;
|
|
101
|
+
&::before{
|
|
102
|
+
scale: 2;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
// Global styles applied when resizing to prevent text selection
|
|
112
|
+
body.no-select {
|
|
113
|
+
user-select: none;
|
|
114
|
+
-webkit-user-select: none;
|
|
115
|
+
-moz-user-select: none;
|
|
116
|
+
-ms-user-select: none;
|
|
117
|
+
}
|