Skip to content

Commit 6a5a7ea

Browse files
ArtyomSavchenkoArtyomSavchenko
authored
Display upgrade plan button if limit is reached (#10175)
1 parent 0ee9891 commit 6a5a7ea

File tree

26 files changed

+459
-21
lines changed

26 files changed

+459
-21
lines changed

‎common/config/rush/pnpm-lock.yaml‎

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎models/billing/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,10 @@
3737
"@hcengineering/core": "^0.7.20",
3838
"@hcengineering/model": "^0.7.17",
3939
"@hcengineering/model-core": "^0.7.0",
40+
"@hcengineering/model-presentation": "^0.7.0",
4041
"@hcengineering/setting": "^0.7.0",
4142
"@hcengineering/billing": "^0.7.0",
42-
"@hcengineering/platform": "^0.7.17"
43+
"@hcengineering/platform": "^0.7.17",
44+
"@hcengineering/workbench": "^0.7.0"
4345
}
4446
}

‎models/billing/src/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import { type IntlString } from '@hcengineering/platform'
1919
import setting from '@hcengineering/setting'
2020
import billing, { type Tier } from '@hcengineering/billing'
2121
import { AccountRole, DOMAIN_MODEL } from '@hcengineering/core'
22+
import presentation from '@hcengineering/model-presentation'
23+
import workbench from '@hcengineering/workbench'
2224

2325
export { billingId } from '@hcengineering/billing'
2426
export { billing as default }
@@ -107,4 +109,9 @@ export function createModel (builder: Builder): void {
107109
},
108110
billing.tier.Legendary
109111
)
112+
113+
builder.createDoc(presentation.class.ComponentPointExtension, core.space.Model, {
114+
extension: workbench.extensions.WorkbenchExtensions,
115+
component: billing.component.WorkbenchExtension
116+
})
110117
}

‎packages/theme/styles/_colors.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,15 @@
138138

139139
--theme-button-container-color: #25262A;
140140

141+
--theme-button-attention-gradient: linear-gradient(135deg, #7C3AED, #A855F7);
142+
--theme-button-attention-border: #A855F7;
143+
--theme-button-attention-hover-gradient: linear-gradient(135deg, #8B5CF6, #7C3AED);
144+
--theme-button-attention-hover-border: #7C3AED;
145+
--theme-button-attention-active-gradient: linear-gradient(135deg, #6D28D9, #7C3AED);
146+
--theme-button-attention-hover-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
147+
--theme-button-attention-active-shadow: 0 4px 12px rgba(124, 58, 237, 0.6);
148+
--theme-button-attention-focus-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3);
149+
141150
--theme-refinput-divider: rgba(255, 255, 255, .07);
142151
--theme-refinput-border: rgba(255, 255, 255, .1);
143152

@@ -449,6 +458,15 @@
449458

450459
--theme-button-container-color: #F1F1F1;
451460

461+
--theme-button-attention-gradient: linear-gradient(135deg, #EC4899, #F97316);
462+
--theme-button-attention-border: #F97316;
463+
--theme-button-attention-hover-gradient: linear-gradient(135deg, #F97316, #EC4899);
464+
--theme-button-attention-hover-border: #EC4899;
465+
--theme-button-attention-active-gradient: linear-gradient(135deg, #DC2626, #F97316);
466+
--theme-button-attention-hover-shadow: 0 8px 24px rgba(236, 72, 153, 0.3);
467+
--theme-button-attention-active-shadow: 0 4px 12px rgba(236, 72, 153, 0.5);
468+
--theme-button-attention-focus-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2);
469+
452470
--theme-refinput-divider: rgba(0, 0, 0, .07);
453471
--theme-refinput-border: rgba(0, 0, 0, .1);
454472

‎packages/theme/styles/button.scss‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,65 @@
169169
}
170170
}
171171

172+
&.attention {
173+
position: relative;
174+
overflow: hidden;
175+
font-weight: 600;
176+
border: 2px solid var(--theme-button-attention-border);
177+
background: var(--theme-button-attention-gradient);
178+
animation: attention-pulse 2s ease-in-out infinite;
179+
180+
.icon { color: var(--button-accent-IconColor); }
181+
span { color: var(--button-accent-LabelColor); }
182+
183+
&::before {
184+
content: '';
185+
position: absolute;
186+
top: 0;
187+
left: -100%;
188+
width: 100%;
189+
height: 100%;
190+
background: var(--theme-button-attention-shine);
191+
transition: left 0.6s ease;
192+
}
193+
194+
&:not(.disabled, :disabled):hover {
195+
background: var(--theme-button-attention-hover-gradient);
196+
border-color: var(--theme-button-attention-hover-border);
197+
transform: translateY(-2px);
198+
box-shadow: var(--theme-button-attention-hover-shadow);
199+
200+
&::before { left: 100%; }
201+
}
202+
203+
&:not(.disabled, :disabled):active,
204+
&.pressed:not(.disabled, :disabled) {
205+
transform: translateY(0) scale(0.98);
206+
box-shadow: var(--theme-button-attention-active-shadow);
207+
}
208+
209+
&:not(.no-focus):focus {
210+
box-shadow: var(--theme-button-attention-focus-shadow);
211+
}
212+
213+
&:disabled:not(.loading),
214+
&.disabled:not(.loading) {
215+
background: var(--button-disabled-BackgroundColor);
216+
border-color: var(--button-disabled-BackgroundColor);
217+
animation: none;
218+
transform: none;
219+
box-shadow: none;
220+
221+
&::before { display: none; }
222+
}
223+
224+
&.loading {
225+
background: var(--theme-button-attention-active-gradient);
226+
227+
span { color: var(--button-accent-LabelColor); }
228+
}
229+
}
230+
172231
& > * { pointer-events: none; }
173232
}
174233

@@ -532,6 +591,63 @@
532591
background-color: var(--negative-button-disabled);
533592
}
534593
}
594+
&.attention {
595+
position: relative;
596+
overflow: hidden;
597+
font-weight: 600;
598+
color: var(--primary-button-color);
599+
background: var(--theme-button-attention-gradient);
600+
border: 2px solid var(--theme-button-attention-border);
601+
animation: attention-pulse 2s ease-in-out infinite;
602+
603+
.btn-icon,
604+
.btn-right-icon { color: var(--primary-button-color); }
605+
606+
&::before {
607+
content: '';
608+
position: absolute;
609+
top: 0;
610+
left: -100%;
611+
width: 100%;
612+
height: 100%;
613+
background: var(--theme-button-attention-shine);
614+
transition: left 0.6s ease;
615+
}
616+
617+
&:hover {
618+
background: var(--theme-button-attention-hover-gradient);
619+
border-color: var(--theme-button-attention-hover-border);
620+
transform: translateY(-2px);
621+
box-shadow: var(--theme-button-attention-hover-shadow);
622+
623+
&::before { left: 100%; }
624+
}
625+
626+
&:active,
627+
&.pressed,
628+
&.pressed:hover {
629+
transform: translateY(0) scale(0.98);
630+
box-shadow: var(--theme-button-attention-active-shadow);
631+
}
632+
633+
&:not(.no-focus):focus {
634+
box-shadow: var(--theme-button-attention-focus-shadow);
635+
}
636+
637+
&:disabled {
638+
color: var(--primary-button-disabled-color);
639+
background: var(--primary-button-disabled);
640+
border-color: var(--primary-button-disabled);
641+
animation: none;
642+
transform: none;
643+
box-shadow: none;
644+
645+
&::before { display: none; }
646+
647+
.btn-icon,
648+
.btn-right-icon { color: var(--primary-button-disabled-color); }
649+
}
650+
}
535651
&.contrast {
536652
padding: .75rem 1rem;
537653
font-weight: 500;
@@ -902,4 +1018,15 @@
9021018
content: none;
9031019
}
9041020
}
1021+
1022+
@keyframes attention-pulse {
1023+
0%, 100% {
1024+
box-shadow: var(--theme-button-attention-active-shadow), 0 0 0 0 var(--theme-button-attention-border);
1025+
transform: scale(1);
1026+
}
1027+
50% {
1028+
box-shadow: var(--theme-button-attention-hover-shadow), 0 0 0 4px rgba(124, 58, 237, 0.1);
1029+
transform: scale(1.02);
1030+
}
1031+
}
9051032
}

‎packages/ui/src/components/Button.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
label === undefined &&
8080
$$slots.content === undefined &&
8181
(icon !== undefined || iconRight !== undefined || $$slots.icon || $$slots.iconRight)
82-
$: primary = ['primary', 'secondary', 'positive', 'negative'].some((p) => p === kind)
82+
$: primary = ['primary', 'secondary', 'positive', 'negative', 'attention'].some((p) => p === kind)
8383
8484
$: devSize = $deviceInfo.size
8585
$: adaptive = adaptiveShrink !== null ? checkAdaptiveMatching(devSize, adaptiveShrink) : false

‎packages/ui/src/components/ModernDialog.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,10 @@
174174
max-height: unset;
175175
border-radius: 0;
176176
}
177+
178+
&.extendedHeight {
179+
max-height: 90vh;
180+
}
177181
}
178182
179183
.shadow {

‎packages/ui/src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@ export type ButtonKind =
174174
| 'list-header'
175175
| 'contrast'
176176
| 'stepper'
177+
| 'attention'
177178
export type ButtonSize = 'inline' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
178179
export type ButtonShape =
179180
| 'rectangle'

‎plugins/billing-assets/lang/cs.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@
5353
"StorageUsage": "Úložiště",
5454
"TrafficUsage": "Video/audio provoz",
5555
"Usage": "Využití",
56-
"Of": "z"
56+
"Of": "z",
57+
"UpgradePlan": "Upgradovat plán",
58+
"LimitReached": "Dosažen limit pracovního prostoru, některé funkce mohou být zakázány. Upgradujte pro obnovení plného přístupu.",
59+
"AskBillingAdmin": "Kontaktujte prosím svého správce fakturace pro upgrade plánu."
5760
}
5861
}

‎plugins/billing-assets/lang/de.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@
5353
"StorageUsage": "Speicher",
5454
"TrafficUsage": "Video/Audio-Traffic",
5555
"Usage": "Nutzung",
56-
"Of": "von"
56+
"Of": "von",
57+
"UpgradePlan": "Plan upgraden",
58+
"LimitReached": "Arbeitsbereich-Limit erreicht, einige Funktionen könnten deaktiviert sein. Upgraden Sie für vollen Zugriff.",
59+
"AskBillingAdmin": "Bitte kontaktieren Sie Ihren Abrechnungsadministrator, um den Plan zu upgraden."
5760
}
5861
}

0 commit comments

Comments
 (0)