github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-03 05:39:41 +08:00
Code Issues Actions1 Packages Projects Releases Wiki Activity

UX: Onboarding edits ()

Browse Source 
* UX: Adjust size of svg arrow

* UX: Refactor & style edits
This commit is contained in:
Jordan Vidrine 2022-10-13 08:39:52 -05:00 committed by GitHub
parent 4b2cc2de1e
commit 45f93ae75d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 40 additions and 19 deletions
app/assets
javascripts/discourse/app/lib
popup.js
stylesheets/common/base
_index.scssd-onboarding.scssd-popover.scssdiscourse.scss

1
app/assets/javascripts/discourse/app/lib/popup.js

@ -23,6 +23,7 @@ export function showPopup(options) {
showOnCreate: true, showOnCreate: true,
hideOnClick: false, hideOnClick: false,
trigger: "manual", trigger: "manual",
theme: "d-onboarding",
// It must be interactive to make buttons work. // It must be interactive to make buttons work.
interactive: true, interactive: true,

1
app/assets/stylesheets/common/base/_index.scss

@ -12,6 +12,7 @@
@import "crawler_layout"; @import "crawler_layout";
@import "d-icon"; @import "d-icon";
@import "d-popover"; @import "d-popover";
@import "d-onboarding";
@import "dialog"; @import "dialog";
@import "directory"; @import "directory";
@import "discourse"; @import "discourse";

37
app/assets/stylesheets/common/base/d-onboarding.scss Normal file

@ -0,0 +1,37 @@
.onboarding-popup-container {
min-width: 300px;
padding: 0.5em;
text-align: left;
.onboarding-popup-title {
font-size: $font-up-2;
font-weight: bold;
}
.onboarding-popup-content {
margin-top: 0.25em;
}
.onboarding-popup-buttons {
margin-top: 1em;
}
}
.tippy-box[data-theme~="d-onboarding"][data-placement^="left"]
> .tippy-svg-arrow
> svg {
left: 11px;
}
.tippy-box[data-theme~="d-onboarding"][data-placement^="bottom"]
> .tippy-svg-arrow
> svg {
top: -13px;
left: -1px;
}
.tippy-box[data-theme~="d-onboarding"] > .tippy-svg-arrow:after,
.tippy-box[data-theme~="d-onboarding"] > .tippy-svg-arrow > svg {
width: 18px;
height: 18px;
}

1
app/assets/stylesheets/common/base/d-popover.scss

@ -14,6 +14,7 @@ $d-popover-border: var(--primary-low);
.tippy-box[data-placement^="bottom"] .tippy-svg-arrow > svg { .tippy-box[data-placement^="bottom"] .tippy-svg-arrow > svg {
top: -10px; top: -10px;
} }
.tippy-rounded-arrow { .tippy-rounded-arrow {
fill: $d-popover-background; fill: $d-popover-background;
.svg-arrow { .svg-arrow {

19
app/assets/stylesheets/common/base/discourse.scss

@ -570,25 +570,6 @@ table {
animation-name: ping; animation-name: ping;
} }
.onboarding-popup-container {
min-width: 300px;
padding: 0.5em;
text-align: left;
.onboarding-popup-title {
font-size: $font-up-2;
font-weight: bold;
}
.onboarding-popup-content {
margin-top: 0.25em;
}
.onboarding-popup-buttons {
margin-top: 1em;
}
}
.fade { .fade {
opacity: 0; opacity: 0;
transition: opacity 0.15s linear; transition: opacity 0.15s linear;