@appscode/design-system 2.4.26-alpha-2 → 2.4.27-alpha1
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/main.scss +1 -0
- package/package.json +1 -1
- package/vue-components/styles/components/inbox/all.scss +88 -0
- package/vue-components/v3/form-fields/AcSelect.vue +1 -1
- package/vue-components/v3/form-fields/Searchbar.vue +1 -1
- package/vue-components/v3/icons/InfoIcon.vue +9 -0
- package/vue-components/v3/inbox/Inbox.vue +13 -0
- package/vue-components/v3/inbox/MessageDetails.vue +102 -0
- package/vue-components/v3/inbox/MessageList.vue +95 -0
- package/vue-components/v3/navbar/Appdrawer.vue +12 -5
- package/vue-components/v3/table/table-cell/ArrayCell.vue +2 -2
- package/vue-components/v3/table/table-cell/ObjectCell.vue +2 -2
package/main.scss
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
@import "@/components/vue-components/styles/components/form-fields/input";
|
|
24
24
|
@import "@/components/vue-components/styles/components/form-fields/check-radio-switch";
|
|
25
25
|
@import "@/components/vue-components/styles/components/form-fields/custom-selectbox";
|
|
26
|
+
@import "@/components/vue-components/styles/components/inbox/all";
|
|
26
27
|
@import "@/components/vue-components/styles/components/ui-builder/vue-open-api";
|
|
27
28
|
@import "@/components/vue-components/styles/components/ui-builder/ui-builder";
|
|
28
29
|
@import "@/components/vue-components/styles/components/dropdown.scss";
|
package/package.json
CHANGED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
.inbox-sidebar {
|
|
2
|
+
width: 460px;
|
|
3
|
+
border-right: 1px solid $color-border;
|
|
4
|
+
// padding: 20px;
|
|
5
|
+
// box-shadow: 2px 0px 6px 2px rgba(0, 0, 0, 0.04);
|
|
6
|
+
position: sticky;
|
|
7
|
+
top: 60px;
|
|
8
|
+
@include until-widescreen {
|
|
9
|
+
width: 360px;
|
|
10
|
+
}
|
|
11
|
+
.head {
|
|
12
|
+
position: sticky;
|
|
13
|
+
top: 0px;
|
|
14
|
+
z-index: 99;
|
|
15
|
+
background-color: #fff;
|
|
16
|
+
padding: 20px;
|
|
17
|
+
// box-shadow: $ac-shadow-1;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
.message-list {
|
|
21
|
+
height: calc(100vh - 170px);
|
|
22
|
+
overflow-y: auto;
|
|
23
|
+
overflow-x: hidden;
|
|
24
|
+
padding-inline: 20px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.single-message {
|
|
28
|
+
transition: 0.2s ease-in-out;
|
|
29
|
+
padding: 10px 20px;
|
|
30
|
+
border-radius: 4px;
|
|
31
|
+
position: relative;
|
|
32
|
+
z-index: 9;
|
|
33
|
+
width: calc(100% + 40px);
|
|
34
|
+
margin-left: -20px;
|
|
35
|
+
&:after {
|
|
36
|
+
position: absolute;
|
|
37
|
+
content: "";
|
|
38
|
+
left: 0;
|
|
39
|
+
top: 0;
|
|
40
|
+
width: 0px;
|
|
41
|
+
height: 100%;
|
|
42
|
+
border-radius: 4px 0 0 4px;
|
|
43
|
+
background-color: $ac-primary;
|
|
44
|
+
opacity: 0;
|
|
45
|
+
visibility: hidden;
|
|
46
|
+
transition: 0.2s ease-in-out;
|
|
47
|
+
}
|
|
48
|
+
&.is-unread {
|
|
49
|
+
background-color: $primary-light-gray;
|
|
50
|
+
}
|
|
51
|
+
&:hover {
|
|
52
|
+
background-color: $primary-95;
|
|
53
|
+
&::after {
|
|
54
|
+
opacity: 1;
|
|
55
|
+
visibility: visible;
|
|
56
|
+
width: 4px;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.message-details {
|
|
62
|
+
max-width: 768px;
|
|
63
|
+
margin: 36px 32px 32px 64px;
|
|
64
|
+
@include until-widescreen {
|
|
65
|
+
margin: 36px 16px 16px 16px;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.recommended-actions {
|
|
70
|
+
border-radius: 8px;
|
|
71
|
+
box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.06);
|
|
72
|
+
border: 1px solid $color-border;
|
|
73
|
+
overflow: hidden;
|
|
74
|
+
.recommended-heading {
|
|
75
|
+
padding: 10px 20px;
|
|
76
|
+
border-bottom: 1px solid $color-border;
|
|
77
|
+
background-color: $secondary-light-gray;
|
|
78
|
+
}
|
|
79
|
+
.recommended-body {
|
|
80
|
+
padding: 12px 8px;
|
|
81
|
+
.single-action {
|
|
82
|
+
background-color: hsla(var(--secondary-hue), 12%, 98%);
|
|
83
|
+
border: 1px solid $color-border;
|
|
84
|
+
padding: 16px 20px;
|
|
85
|
+
border-radius: 4px;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
@@ -145,7 +145,7 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
|
|
|
145
145
|
:options="options"
|
|
146
146
|
:placeholder="placeholderText"
|
|
147
147
|
:disabled="disabled || isLoaderActive"
|
|
148
|
-
:allow-empty="
|
|
148
|
+
:allow-empty="allowEmpty"
|
|
149
149
|
:show-labels="false"
|
|
150
150
|
:taggable="taggable"
|
|
151
151
|
:close-on-select="true"
|
|
@@ -26,7 +26,7 @@ const RefreshIcon = defineAsyncComponent(() => import("./../icons/RefreshIcon.vu
|
|
|
26
26
|
<SearchIcon v-else />
|
|
27
27
|
</span>
|
|
28
28
|
</label>
|
|
29
|
-
<input id="search" type="text" :placeholder="placeholder" class="pl-
|
|
29
|
+
<input id="search" type="text" :placeholder="placeholder" class="pl-40" />
|
|
30
30
|
|
|
31
31
|
<!-- use .is-absolute -->
|
|
32
32
|
<div v-if="withResult" class="search-result-box panel is-fullwidth z-900">
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="width-32">
|
|
3
|
+
<path
|
|
4
|
+
fill-rule="evenodd"
|
|
5
|
+
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
|
|
6
|
+
clip-rule="evenodd"
|
|
7
|
+
/>
|
|
8
|
+
</svg>
|
|
9
|
+
</template>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import { defineAsyncComponent } from "vue";
|
|
3
|
+
import MessageDetails from "./MessageDetails.vue";
|
|
4
|
+
|
|
5
|
+
const MessageList = defineAsyncComponent(() => import("@/components/vue-components/v3/inbox/MessageList.vue"));
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<template>
|
|
9
|
+
<div class="is-flex">
|
|
10
|
+
<MessageList />
|
|
11
|
+
<MessageDetails />
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import { defineAsyncComponent } from "vue";
|
|
3
|
+
const AlertMessage = defineAsyncComponent(() => import("@/components/vue-components/v3/alert/AlertMessage.vue"));
|
|
4
|
+
const AcSingleInput = defineAsyncComponent(
|
|
5
|
+
() => import("@/components/vue-components/v3/form-fields/AcSingleInput.vue"),
|
|
6
|
+
);
|
|
7
|
+
|
|
8
|
+
const EllipsisVertical = defineAsyncComponent(() => import("../icons/EllipsisVertical.vue"));
|
|
9
|
+
const StarIcon = defineAsyncComponent(() => import("../icons/StarIcon.vue"));
|
|
10
|
+
const TrashIcon = defineAsyncComponent(() => import("../icons/TrashIcon.vue"));
|
|
11
|
+
const InfoIcon = defineAsyncComponent(() => import("../icons/InfoIcon.vue"));
|
|
12
|
+
</script>
|
|
13
|
+
<template>
|
|
14
|
+
<div class="message-details">
|
|
15
|
+
<div class="is-flex is-justify-content-space-between">
|
|
16
|
+
<div class="is-flex gap-16">
|
|
17
|
+
<figure class="avatar image is-48x48">
|
|
18
|
+
<!-- <span class="dots"></span> -->
|
|
19
|
+
<div class="is-initial is-rounded is-size-2 has-text-weight-bold">S</div>
|
|
20
|
+
</figure>
|
|
21
|
+
<div class="is-flex is-flex-direction-column">
|
|
22
|
+
<h5>Support @AppsCode.com</h5>
|
|
23
|
+
<p>@appscode</p>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<div class="is-flex">
|
|
28
|
+
<button class="button ac-button is-white is-small" title="Star">
|
|
29
|
+
<span class="icon">
|
|
30
|
+
<StarIcon :fill="true" />
|
|
31
|
+
</span>
|
|
32
|
+
</button>
|
|
33
|
+
|
|
34
|
+
<button class="button ac-button is-white is-small" title="Trash">
|
|
35
|
+
<span class="icon">
|
|
36
|
+
<TrashIcon />
|
|
37
|
+
</span>
|
|
38
|
+
</button>
|
|
39
|
+
|
|
40
|
+
<button class="button ac-button is-white is-small" title="More Options">
|
|
41
|
+
<span class="icon">
|
|
42
|
+
<EllipsisVertical />
|
|
43
|
+
</span>
|
|
44
|
+
</button>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="message-content mt-24">
|
|
49
|
+
<h2 class="mb-4">Update scanner addons</h2>
|
|
50
|
+
<p>
|
|
51
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the Lorem Ipsum
|
|
52
|
+
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the...Lorem Ipsum is simply
|
|
53
|
+
dummy text of the printing and typesetting industry. Lorem Ipsum has been the...
|
|
54
|
+
</p>
|
|
55
|
+
|
|
56
|
+
<alert-message class="is-info mt-24 mb-24">
|
|
57
|
+
<template #icon>
|
|
58
|
+
<InfoIcon />
|
|
59
|
+
</template>
|
|
60
|
+
<template #custom-text>
|
|
61
|
+
Flux CD is not installed. We are going to install it. By default, we are going to enable Helm Controller and
|
|
62
|
+
Source controller feature of Flux CD. You will be able to configure Flux CD options from Settings > Flux CD of
|
|
63
|
+
your cluster dashboard.
|
|
64
|
+
</template>
|
|
65
|
+
</alert-message>
|
|
66
|
+
|
|
67
|
+
<!-- recommended actions -->
|
|
68
|
+
<div class="recommended-actions mb-16">
|
|
69
|
+
<div class="recommended-heading">
|
|
70
|
+
<h4>Recommend Actions</h4>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div class="recommended-body">
|
|
74
|
+
<div class="single-action" :class="{ 'mb-16': i === 1 }" v-for="i in 2" :key="i">
|
|
75
|
+
<h5 class="mb-4">Remedy Actions {{ i }}</h5>
|
|
76
|
+
<p>
|
|
77
|
+
Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the Lorem Ipsum is simply
|
|
78
|
+
dummy text of the printing and typesetting industry.
|
|
79
|
+
</p>
|
|
80
|
+
|
|
81
|
+
<div class="grid grid-cols-2 mt-16">
|
|
82
|
+
<ac-single-input modifier-classes="is-primary mr-16" v-for="i in 4" :key="i">
|
|
83
|
+
<label for="email" class="ac-label is-required show-label"
|
|
84
|
+
>Email {{ i }}
|
|
85
|
+
<!-- <span class="has-text-danger">*</span> -->
|
|
86
|
+
</label>
|
|
87
|
+
|
|
88
|
+
<input id="email" name="email" type="email" class="ac-input bg-white" value="user@appscode.com" />
|
|
89
|
+
</ac-single-input>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<div class="buttons">
|
|
93
|
+
<button class="button ac-button is-primary">Execute</button>
|
|
94
|
+
<button class="button ac-button">Ignore</button>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
<!-- recommended actions -->
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</template>
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import { defineAsyncComponent } from "vue";
|
|
3
|
+
const Searchbar = defineAsyncComponent(() => import("@/components/vue-components/v3/form-fields/Searchbar.vue"));
|
|
4
|
+
|
|
5
|
+
const ArrowDownIcon = defineAsyncComponent(() => import("../icons/ArrowDownIcon.vue"));
|
|
6
|
+
const RefreshIcon = defineAsyncComponent(() => import("../icons/RefreshIcon.vue"));
|
|
7
|
+
const StarIcon = defineAsyncComponent(() => import("../icons/StarIcon.vue"));
|
|
8
|
+
const EllipsisVertical = defineAsyncComponent(() => import("../icons/EllipsisVertical.vue"));
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<template>
|
|
12
|
+
<div class="inbox-sidebar">
|
|
13
|
+
<div class="head">
|
|
14
|
+
<!-- search -->
|
|
15
|
+
<Searchbar placeholder="Search..." />
|
|
16
|
+
<!-- search -->
|
|
17
|
+
|
|
18
|
+
<!-- filter -->
|
|
19
|
+
<div class="is-flex is-justify-content-space-between">
|
|
20
|
+
<div class="is-flex gap-8">
|
|
21
|
+
<label class="ac-checkbox" for="checkbox16">
|
|
22
|
+
<input class="is-danger" id="checkbox16" type="checkbox" /><span class="checkmark"></span>
|
|
23
|
+
</label>
|
|
24
|
+
<button class="button ac-button is-white is-small" title="Filter">
|
|
25
|
+
<span class="icon">
|
|
26
|
+
<ArrowDownIcon />
|
|
27
|
+
</span>
|
|
28
|
+
</button>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<div class="is-flex gap-4">
|
|
32
|
+
<button class="button ac-button is-white is-small" title="Refresh">
|
|
33
|
+
<span class="icon">
|
|
34
|
+
<RefreshIcon />
|
|
35
|
+
</span>
|
|
36
|
+
</button>
|
|
37
|
+
<!-- is-active -->
|
|
38
|
+
<div class="dropdown-action dropdown">
|
|
39
|
+
<button class="button ac-button is-white is-small" title="More">
|
|
40
|
+
<span class="icon">
|
|
41
|
+
<EllipsisVertical />
|
|
42
|
+
</span>
|
|
43
|
+
</button>
|
|
44
|
+
<!-- dropdown -->
|
|
45
|
+
<div class="dropdown-menu" id="dropdown-menu3" role="menu" style="left: auto; right: 0">
|
|
46
|
+
<div class="dropdown-content ac-scrollbar p-0">
|
|
47
|
+
<div class="dropdown-group">
|
|
48
|
+
<label>Options</label>
|
|
49
|
+
<a href="#" class="dropdown-item">
|
|
50
|
+
<span class="icon">
|
|
51
|
+
<RefreshIcon />
|
|
52
|
+
</span>
|
|
53
|
+
<span>Read</span>
|
|
54
|
+
</a>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
<!-- dropdown -->
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
<!-- filter -->
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<div class="message-list ac-vscrollbar pt-0 pb-0">
|
|
66
|
+
<!-- messages '.is-unread' -->
|
|
67
|
+
<div
|
|
68
|
+
class="is-flex gap-16 is-clickable single-message"
|
|
69
|
+
v-for="i in 10"
|
|
70
|
+
:key="i"
|
|
71
|
+
:class="{ 'is-unread': i % 2 !== 0 }"
|
|
72
|
+
>
|
|
73
|
+
<label class="ac-checkbox is-align-items-flex-start" :for="'check' + i">
|
|
74
|
+
<input class="is-danger" :id="'check' + i" type="checkbox" /><span class="checkmark"></span>
|
|
75
|
+
</label>
|
|
76
|
+
<div class="is-flex gap-4 is-flex-direction-column">
|
|
77
|
+
<div class="is-flex is-flex-direction-column">
|
|
78
|
+
<span>Category</span>
|
|
79
|
+
<h6 class="has-text-weight-medium is-size-5">Update scanner addons</h6>
|
|
80
|
+
</div>
|
|
81
|
+
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="is-flex is-flex-direction-column is-justify-content-space-between">
|
|
84
|
+
<p class="is-size-7">2mins</p>
|
|
85
|
+
<button class="button ac-button is-transparent is-small">
|
|
86
|
+
<span class="icon">
|
|
87
|
+
<StarIcon />
|
|
88
|
+
</span>
|
|
89
|
+
</button>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
<!-- messages -->
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
</template>
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
+
import { setCookie } from "tiny-cookie";
|
|
2
3
|
import { computed, defineAsyncComponent, ref } from "vue";
|
|
3
4
|
|
|
4
5
|
interface Props {
|
|
5
|
-
currentApp
|
|
6
|
-
baseUrl
|
|
6
|
+
currentApp?: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
|
|
7
|
+
baseUrl?: string;
|
|
8
|
+
activeOrganization?: string;
|
|
9
|
+
rootDomain?: string;
|
|
7
10
|
}
|
|
8
11
|
|
|
9
12
|
const props = withDefaults(defineProps<Props>(), {
|
|
10
13
|
currentApp: "platform",
|
|
11
14
|
baseUrl: "https://appscode.com",
|
|
15
|
+
activeOrganization: "",
|
|
16
|
+
rootDomain: "",
|
|
12
17
|
});
|
|
13
18
|
|
|
14
|
-
defineEmits(["onClick"]);
|
|
15
|
-
|
|
16
19
|
const appList = [
|
|
17
20
|
{
|
|
18
21
|
name: "console",
|
|
@@ -98,6 +101,10 @@ const filteredAppList = appListWithUrl.filter((element) => {
|
|
|
98
101
|
|
|
99
102
|
return true;
|
|
100
103
|
});
|
|
104
|
+
|
|
105
|
+
const handleClick = (name: string) => {
|
|
106
|
+
if (name === "grafana") setCookie("gorg", props.activeOrganization, { domain: props.rootDomain });
|
|
107
|
+
};
|
|
101
108
|
</script>
|
|
102
109
|
|
|
103
110
|
<template>
|
|
@@ -140,7 +147,7 @@ const filteredAppList = appListWithUrl.filter((element) => {
|
|
|
140
147
|
<navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
|
|
141
148
|
<ul class="ac-scrollbar p-0 app-drawer">
|
|
142
149
|
<li v-for="app in filteredAppList" :key="app.url">
|
|
143
|
-
<a @click
|
|
150
|
+
<a :href="app.url" target="_blank" @click="handleClick(app.name)">
|
|
144
151
|
<article class="media">
|
|
145
152
|
<figure class="media-left">
|
|
146
153
|
<p class="image">
|
|
@@ -40,9 +40,9 @@ const printableStringObjs = computed(() => {
|
|
|
40
40
|
|
|
41
41
|
const indexOfCharacterLengthExceed = computed(() => {
|
|
42
42
|
let idx = -1;
|
|
43
|
-
let cumulativeLen =
|
|
43
|
+
let cumulativeLen = 4;
|
|
44
44
|
for (const [index, po] of printableStringObjs.value.entries()) {
|
|
45
|
-
const newLen = cumulativeLen + po.print.length +
|
|
45
|
+
const newLen = cumulativeLen + po.print.length + 4;
|
|
46
46
|
if (newLen + 4 > props.maxCharacterLength) {
|
|
47
47
|
idx = index;
|
|
48
48
|
break;
|
|
@@ -40,9 +40,9 @@ const printableStringObjs = computed(() => {
|
|
|
40
40
|
|
|
41
41
|
const indexOfCharacterLengthExceed = computed(() => {
|
|
42
42
|
let idx = -1;
|
|
43
|
-
let cumulativeLen =
|
|
43
|
+
let cumulativeLen = 4;
|
|
44
44
|
for (const [index, po] of printableStringObjs.value.entries()) {
|
|
45
|
-
const newLen = cumulativeLen + po.print.length +
|
|
45
|
+
const newLen = cumulativeLen + po.print.length + 4;
|
|
46
46
|
if (newLen + 4 > props.maxCharacterLength) {
|
|
47
47
|
idx = index;
|
|
48
48
|
break;
|