discourse/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-06 03:09:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

UX: Onboarding edits (#18581)

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

37
app/assets/stylesheets/common/base/d-onboarding.scss Normal file
View 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
View File

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

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

@ -570,25 +570,6 @@ table {
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 {
opacity: 0;
transition: opacity 0.15s linear;