clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-04-29 08:26:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feature/onboarding Quick tour (#5247)

Browse Source 
* enhance(ui): polish elements of left sidebar

* enhance(ui): active state of nav item from left sidebar

* enhance(ui): active state of nav item from left sidebar

* enhance(ui): WIP quick tour tips

* enhance(ui): WIP quick tour tips

* enhance(ui): WIP quick tour tips

* enhance(ux): add quick tour palette command

* enhance(ui): add step dots for quick tour tips

* enhance(ux): title hints for sidebar link items

* fix(ui): active state for journals from left sidebar

* enhance(ux): support quick tour command when initial app

* fix(ui): position of journal page quick tour tip box

* fix: cljs lint

* fix: remove unused method

* fix(e2e): e2e test for new left sidebar
This commit is contained in:
Charlie
2022-05-31 16:41:17 +08:00
committed by GitHub
parent ef0201358c
commit 55ccdd5dba
15 changed files with 1129 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/main/frontend/components/header.css
View File

@@ -31,9 +31,10 @@
}
/* To prevent header glitch on Safari */
> .l, > .r {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.it svg {
@@ -119,6 +120,18 @@
top: 1px;
}
}
&-left-menu {
&.button {
margin: 0;
padding: 0;
}
> .inner {
line-height: 0;
padding: 3px;
}
}
}
.is-electron.is-mac .cp__header {
@@ -189,6 +202,10 @@ a.button {
&:hover, &.active {
opacity: 1;
background: none;
@screen md {
background: var(--ls-tertiary-background-color);
}
}
&:active {
@@ -201,6 +218,7 @@ a.button {
}
html.is-ios.is-safari {
.cp__header {
background-color: var(--ls-primary-background-color);
}
@@ -214,130 +232,130 @@ html.is-native-iphone,
html.is-native-iphone-without-notch,
html.is-native-ipad {
#main-container {
padding-top: 0px;
display: flex;
flex-direction: column;
#main-container {
padding-top: 0px;
display: flex;
flex-direction: column;
}
#main-content-container {
padding-left: 22px;
padding-right: 14px;
padding-top: 0px;
height: calc(100vh - var(--ls-headbar-inner-top-padding) - var(--ls-headbar-height));
@screen sm {
padding-left: 2rem;
}
#main-content-container {
padding-left: 22px;
padding-right: 14px;
padding-top: 0px;
height: calc(100vh - var(--ls-headbar-inner-top-padding) - var(--ls-headbar-height));
.page {
margin-top: 24px;
}
}
@screen sm {
padding-left: 2rem;
}
.page {
margin-top: 24px;
}
.cp__header {
> .r {
display: flex;
}
.cp__header {
> .r {
display: flex;
}
a.button {
opacity: 1;
}
a.button {
opacity: 1;
}
}
}
html.is-native-ipad {
--ls-headbar-inner-top-padding: 0px;
--ls-headbar-height: 4rem;
--ls-headbar-inner-top-padding: 0px;
--ls-headbar-height: 4rem;
.cp__header {
background-color: transparent !important;
display: flex;
.cp__header {
background-color: transparent !important;
display: flex;
> .l {
/* background-color: var(--ls-primary-background-color); */
padding-top: 20px;
}
> .r {
flex: 1;
background-color: var(--ls-primary-background-color);
height: 100%;
padding-top: 20px;
justify-content: flex-end;
align-items: center;
}
> .l {
/* background-color: var(--ls-primary-background-color); */
padding-top: 20px;
}
.left-sidebar-inner {
> .wrap {
padding-top: 20px;
> .r {
flex: 1;
background-color: var(--ls-primary-background-color);
height: 100%;
padding-top: 20px;
justify-content: flex-end;
align-items: center;
}
}
.left-sidebar-inner {
> .wrap {
padding-top: 20px;
}
}
.cp__right-sidebar {
&-settings {
margin-top: -4px;
}
&-topbar {
padding-top: 37px;
}
&-inner {
.resizer {
top: 30vh;
width: 12px;
height: 40vh;
}
.resizer:hover {
background-color: var(--ls-guideline-color, #ddd);
}
}
.cp__right-sidebar {
&-settings {
margin-top: -4px;
}
&-topbar {
padding-top: 37px;
}
&-inner {
.resizer {
top: 30vh;
width: 12px;
height: 40vh;
}
.resizer:hover {
background-color: var(--ls-guideline-color, #ddd);
}
}
}
}
}
html.is-native-iphone {
--ls-headbar-inner-top-padding: 36px;
--ls-headbar-inner-top-padding: 36px;
.left-sidebar-inner {
> .wrap {
padding-top: 12px;
}
.new-page {
padding-bottom: 12px;
}
.left-sidebar-inner {
> .wrap {
padding-top: 12px;
}
.ui__notifications {
top: calc(var(--ls-headbar-height) + var(--ls-headbar-inner-top-padding) - 0.3rem);
.new-page {
padding-bottom: 12px;
}
}
@media (orientation: landscape) {
--ls-headbar-inner-top-padding: 8px;
--ls-headbar-height: 2.5rem;
}
.ui__notifications {
top: calc(var(--ls-headbar-height) + var(--ls-headbar-inner-top-padding) - 0.3rem);
}
@media (orientation: landscape) {
--ls-headbar-inner-top-padding: 8px;
--ls-headbar-height: 2.5rem;
}
}
html.is-native-iphone-without-notch {
--ls-headbar-inner-top-padding: 15px;
--ls-headbar-inner-top-padding: 15px;
--ls-headbar-height: 2.5rem;
@media (orientation: landscape) {
--ls-headbar-inner-top-padding: 0px;
--ls-headbar-height: 2.5rem;
@media (orientation: landscape) {
--ls-headbar-inner-top-padding: 0px;
--ls-headbar-height: 2.5rem;
}
}
}
html.is-zoomed-native-ios {
--ls-headbar-inner-top-padding: 30px;
--ls-headbar-inner-top-padding: 30px;
@media (orientation: landscape) {
--ls-headbar-inner-top-padding: 8px;
--ls-headbar-height: 2.5rem;
}
@media (orientation: landscape) {
--ls-headbar-inner-top-padding: 8px;
--ls-headbar-height: 2.5rem;
}
}