mirror of
https://github.com/zadam/trilium.git
synced 2025-06-05 17:38:47 +02:00
initial experiments with tabs
This commit is contained in:
zadam
parent
6d2eb7b187
commit
3ccf553fda
175
libraries/chrome-tabs/chrome-tabs.css
Normal file
175
libraries/chrome-tabs/chrome-tabs.css
Normal file
@ -0,0 +1,175 @@
|
||||
.chrome-tabs {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 33px;
|
||||
background: var(--main-background-color);
|
||||
border-radius: 5px 5px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chrome-tabs * {
|
||||
box-sizing: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
.chrome-tabs .chrome-tabs-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chrome-tabs .chrome-tab {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 36px;
|
||||
width: 240px;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.chrome-tabs .chrome-tab[active] {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.chrome-tabs .chrome-tab,
|
||||
.chrome-tabs .chrome-tab * {
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.chrome-tabs .chrome-tab.chrome-tab-was-just-added {
|
||||
top: 10px;
|
||||
animation: chrome-tab-was-just-added 120ms forwards ease-in-out;
|
||||
}
|
||||
.chrome-tabs .chrome-tab .chrome-tab-content {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: var(--tab-content-margin);
|
||||
right: var(--tab-content-margin);
|
||||
padding: 5px 8px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
overflow: hidden;
|
||||
pointer-events: all;
|
||||
background-color: var(--accented-background-color);
|
||||
}
|
||||
|
||||
.chrome-tabs .chrome-tab[active] .chrome-tab-content {
|
||||
background-color: var(--more-accented-background-color);
|
||||
}
|
||||
|
||||
.chrome-tabs .chrome-tab[is-mini] .chrome-tab-content {
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
.chrome-tabs .chrome-tab .chrome-tab-title {
|
||||
flex: 1;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: var(--muted-text-color);
|
||||
}
|
||||
.chrome-tabs .chrome-tab[is-small] .chrome-tab-title {
|
||||
margin-left: 0;
|
||||
}
|
||||
.chrome-tabs .chrome-tab[active] .chrome-tab-title {
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
.chrome-tabs .chrome-tab .chrome-tab-drag-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
.chrome-tabs .chrome-tab .chrome-tab-close {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path stroke='rgba(0, 0, 0, .65)' stroke-linecap='square' stroke-width='1.5' d='M0 0 L8 8 M8 0 L0 8'></path></svg>");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.chrome-tabs .chrome-tab .chrome-tab-close:hover {
|
||||
background-color: var(--more-accented-background-color);
|
||||
}
|
||||
.chrome-tabs .chrome-tab .chrome-tab-close:hover:active {
|
||||
background-color: var(--more-accented-background-color);
|
||||
}
|
||||
}
|
||||
@media not all and (hover: hover) {
|
||||
.chrome-tabs .chrome-tab .chrome-tab-close:active {
|
||||
background-color: #dadce0;
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.chrome-tabs .chrome-tab:not([active]) .chrome-tab-close:not(:hover):not(:active) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.chrome-tabs .chrome-tab[is-smaller] .chrome-tab-close {
|
||||
margin-left: auto;
|
||||
}
|
||||
.chrome-tabs .chrome-tab[is-mini]:not([active]) .chrome-tab-close {
|
||||
display: none;
|
||||
}
|
||||
.chrome-tabs .chrome-tab[is-mini][active] .chrome-tab-close {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@-moz-keyframes chrome-tab-was-just-added {
|
||||
to {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes chrome-tab-was-just-added {
|
||||
to {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
@-o-keyframes chrome-tab-was-just-added {
|
||||
to {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
@keyframes chrome-tab-was-just-added {
|
||||
to {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.chrome-tabs.chrome-tabs-is-sorting .chrome-tab:not(.chrome-tab-is-dragging),
|
||||
.chrome-tabs:not(.chrome-tabs-is-sorting) .chrome-tab.chrome-tab-was-just-dragged {
|
||||
transition: transform 120ms ease-in-out;
|
||||
}
|
||||
.chrome-tabs .chrome-tabs-bottom-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
.chrome-tabs-optional-shadow-below-bottom-bar {
|
||||
position: relative;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1' viewBox='0 0 1 1'><rect x='0' y='0' width='1' height='1' fill='rgba(0, 0, 0, .17)'></rect></svg>");
|
||||
background-size: 1px 1px;
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
.chrome-tabs-optional-shadow-below-bottom-bar {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'><rect x='0' y='0' width='2' height='1' fill='rgba(0, 0, 0, .27)'></rect></svg>");
|
||||
}
|
||||
}
|
||||
369
libraries/chrome-tabs/chrome-tabs.js
Normal file
369
libraries/chrome-tabs/chrome-tabs.js
Normal file
File diff suppressed because one or more lines are too long
@ -156,4 +156,14 @@ noteTypeService.init();
|
||||
|
||||
linkService.init();
|
||||
|
||||
noteAutocompleteService.init();
|
||||
noteAutocompleteService.init();
|
||||
|
||||
$(document).ready(() => {
|
||||
const el = $('.chrome-tabs')[0];
|
||||
const chromeTabs = new ChromeTabs();
|
||||
chromeTabs.init(el);
|
||||
|
||||
el.addEventListener('activeTabChange', ({detail}) => console.log('Active tab changed', detail.tabEl));
|
||||
el.addEventListener('tabAdd', ({detail}) => console.log('Tab added', detail.tabEl));
|
||||
el.addEventListener('tabRemove', ({detail}) => console.log('Tab removed', detail.tabEl));
|
||||
});
|
||||
@ -8,10 +8,12 @@ body {
|
||||
|
||||
display: grid;
|
||||
grid-template-areas: "header header"
|
||||
"left-pane tabs"
|
||||
"left-pane title"
|
||||
"left-pane note-detail";
|
||||
grid-template-rows: auto
|
||||
auto
|
||||
auto
|
||||
1fr;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
@ -231,6 +231,10 @@ button.close {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
#tabs-container {
|
||||
grid-area: tabs;
|
||||
}
|
||||
|
||||
#note-title {
|
||||
margin-left: 15px;
|
||||
margin-right: 10px;
|
||||
|
||||
@ -150,6 +150,41 @@
|
||||
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="tabs-container">
|
||||
<div class="chrome-tabs">
|
||||
<div class="chrome-tabs-content">
|
||||
<div class="chrome-tab">
|
||||
<div class="chrome-tab-content">
|
||||
<div class="chrome-tab-title">Google</div>
|
||||
<div class="chrome-tab-drag-handle"></div>
|
||||
<div class="chrome-tab-close"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chrome-tab" active>
|
||||
<div class="chrome-tab-content">
|
||||
<div class="chrome-tab-title">Facebook</div>
|
||||
<div class="chrome-tab-drag-handle"></div>
|
||||
<div class="chrome-tab-close"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Styles to prevent flash after JS initialization -->
|
||||
<style>
|
||||
.chrome-tabs .chrome-tab {
|
||||
width: 258px
|
||||
}
|
||||
|
||||
.chrome-tabs .chrome-tab:nth-child(1) {
|
||||
transform: translate3d(0px, 0, 0)
|
||||
}
|
||||
|
||||
.chrome-tabs .chrome-tab:nth-child(2) {
|
||||
transform: translate3d(239px, 0, 0)
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title-container">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div class="dropdown hide-toggle">
|
||||
@ -290,6 +325,9 @@
|
||||
|
||||
<script src="libraries/dayjs.min.js"></script>
|
||||
|
||||
<script src="libraries/chrome-tabs/chrome-tabs.js"></script>
|
||||
<link href="libraries/chrome-tabs/chrome-tabs.css" rel="stylesheet">
|
||||
|
||||
<link href="stylesheets/style.css" rel="stylesheet">
|
||||
<link href="stylesheets/desktop.css" rel="stylesheet">
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user