clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-05-03 10:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance: Left sidebar (#9880)

Browse Source 
* wip: right sidebar

* fix: graph height

* re-enable scrolling on list

* style: indentation

* fix: always expand block when added to sidebar

* fix: show close button on mobile

* wip: right sidebar

* support default and custom icons

* fix whiteboard icon

* fix: header overflow

* remove unneeded dependency

* fix graph icon

* add middle click action and context menu

* add more context menu actions

* add reordering support

* fix dropdown visibility

* dnd fixes and initial state

* varous fixes

* fix event propagation

* enhance accesibility

* area expanded fix

* add translations

* refactoring

* enhance performance

* enhance text overflow

* fix page link

* drag enter fix

* add rounded corners and transition

* add keyboard shortcuts icon

* revert left sidebar change

* left sidebar bg and border

* various left sidebar enhancements

* alignment fixes

* split favorites and recents scrolling

* handle unavailable icon

* handle overflow edge case

* fix and refactor menu shortcuts

* handle zero items

* display nan shortcuts on mouse over

* min height fix

* min height fix

* simplify chevron icon

* minor fixes

* add flashcards shortcut

* revert initial sidebar state changes

* cloud icon fix

* fix border radius

* add missing go-home shortcut

* add clear recent button

* fix typo

* hide scrollbars

* remove transition

* fix: favorites

* fix: border and rounded corners

* fix: dnd delay

* Revert "add clear recent button"

This reverts commit d8c52c35f0.

* fix: keyboard shortcuts

* fix: shortcuts

* remove unused require
This commit is contained in:
Konstantinos
2023-08-16 18:39:29 +03:00
committed by GitHub
parent 5cd3bec911
commit caf1d9d1e3
12 changed files with 275 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/main/frontend/components/container.css
View File

@@ -83,6 +83,7 @@
overflow-y: auto;
overflow-x: hidden;
background-color: var(--ls-primary-background-color);
border-right: 1px solid var(--ls-tertiary-background-color);
transition: transform .3s;
transform: translate3d(-100%, 0, 0);
z-index: 3;
@@ -116,14 +117,26 @@
}
}
.nav-header a {
.keyboard-shortcut {
@apply w-0 opacity-0;
transition: opacity 0.3s;
}
&:hover {
.keyboard-shortcut {
width: auto;
opacity: 1;
}
}
}
.page-icon {
@apply flex items-center mr-1 align-baseline;
@apply flex items-center text-center mr-1 align-baseline;
width: 20px;
flex-shrink: 0;
height: 18px;
text-align: center;
display: inline-block;
line-height: 1em;
}
@@ -134,28 +147,33 @@
transition: background-color .3s;
.ui__icon {
@apply flex justify-center;
width: 20px;
text-align: center;
font-size: 16px;
margin-right: 8px;
opacity: .9;
opacity: .7;
position: relative;
}
&:hover {
background-color: var(--ls-tertiary-background-color);
.ui__icon {
opacity: .9;
}
}
&.active, &:active {
background-color: var(--ls-quaternary-background-color);
.ui__icon {
opacity: .9;
}
}
}
.nav-contents-container {
@apply h-full flex-grow-0 flex-grow-0
overflow-x-hidden overflow-y-auto;
padding-bottom: 60px;
@apply h-full flex-grow-0 overflow-x-hidden overflow-y-auto;
&.is-scrolled {
border-top: 1px solid var(--ls-tertiary-border-color);
@@ -163,8 +181,18 @@
}
.nav-content-item {
&-inner {
border-radius: 8px;
@apply overflow-hidden;
&:not(:hover) {
::-webkit-scrollbar-thumb,
::-webkit-scrollbar,
::-webkit-scrollbar-thumb:active {
background-color: transparent;
}
}
.nav-content-item-inner {
@apply flex flex-col h-full overflow-hidden;
}
.header {
@@ -175,18 +203,18 @@
user-select: none;
cursor: pointer;
> span {
> a {
padding-left: 12px;
display: none;
transition: none;
.ui__icon {
@apply flex justify-center;
width: 20px;
}
&:last-child {
transform: translateY(-6px) translateX(2px) rotate(90deg);
transform-origin: center center;
transition: .15s transform;
}
}
a {
opacity: .7;
}
.more {
display: none;
transition: .15s transform;
}
&:hover {
@@ -196,15 +224,10 @@
opacity: 1 !important;
}
> span {
> a {
display: block;
.more {
&:last-child {
display: block;
opacity: .6;
}
}
display: block;
opacity: .6;
}
}
@@ -217,7 +240,10 @@
}
.bd {
@apply py-1 overflow-y-auto;
display: none;
min-height: 40px;
ul {
list-style: none;
@@ -231,7 +257,8 @@
a {
width: 100%;
padding: 4px 24px;
transition: background-color .3s;
opacity: .8;
transition: background-color .3s, opacity .3s;
.page-title {
white-space: nowrap;
@@ -246,6 +273,7 @@
}
&:hover {
opacity: 1;
background-color: var(--ls-quaternary-background-color);
}
}
@@ -253,12 +281,9 @@
}
&.is-expand {
.header > span > a {
&:last-child {
transform: translateY(2px) translateX(-3px);
}
.header .more {
transform: rotate(-90deg);
}
.bd {
display: block;
}
@@ -266,18 +291,11 @@
}
.create {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 14px;
background-image: linear-gradient(transparent, var(--ls-primary-background-color));
user-select: none;
@screen sm {
background-image: linear-gradient(transparent, var(--ls-secondary-background-color));
}
&-link {
background-color: var(--ls-primary-background-color);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
@@ -304,16 +322,7 @@
&:hover,
&:focus {
border-color: var(--ls-border-color);
background-color: var(--ls-primary-background-color) !important;
}
@screen sm {
background-color: var(--ls-primary-background-color) !important;
&:hover,
&:focus {
background-color: var(--ls-secondary-background-color) !important;
}
background-color: var(--ls-tertiary-background-color) !important;
}
}
}
@@ -321,7 +330,6 @@
@screen sm {
padding-top: 0;
width: var(--ls-left-sidebar-width);
background-color: var(--ls-secondary-background-color);
> .wrap {
margin-top: 52px;