mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
changes in grid for tabs
This commit is contained in:
zadam
parent
e7c053d273
commit
bc2d1f1ef9
@ -9,11 +9,9 @@ body {
|
||||
display: grid;
|
||||
grid-template-areas: "header header"
|
||||
"left-pane tabs"
|
||||
"left-pane title"
|
||||
"left-pane note-detail";
|
||||
"left-pane tab-container";
|
||||
grid-template-rows: auto
|
||||
auto
|
||||
auto
|
||||
1fr;
|
||||
|
||||
justify-content: center;
|
||||
@ -30,6 +28,12 @@ body {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
#tabs-container {
|
||||
grid-area: tab-container;
|
||||
min-height: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
@ -131,6 +135,7 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
|
||||
}
|
||||
|
||||
#note-detail-wrapper {
|
||||
font-family: var(--detail-font-family);
|
||||
font-size: var(--detail-font-size);
|
||||
}
|
||||
|
||||
|
||||
@ -48,14 +48,6 @@ button.close {
|
||||
color: var(--main-text-color) !important;
|
||||
}
|
||||
|
||||
#title-container {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
#tabs-container {
|
||||
grid-area: tabs;
|
||||
}
|
||||
|
||||
#note-title {
|
||||
margin-left: 15px;
|
||||
margin-right: 10px;
|
||||
@ -112,14 +104,9 @@ ul.fancytree-container {
|
||||
}
|
||||
|
||||
#note-detail-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
grid-area: note-detail;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--detail-font-family);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#note-detail-component-wrapper {
|
||||
@ -150,6 +137,7 @@ ul.fancytree-container {
|
||||
box-shadow: none !important;
|
||||
/* This is because with empty content height of editor is 0 and it's impossible to click into it */
|
||||
min-height: 200px;
|
||||
padding-top: 10px;
|
||||
overflow: auto;
|
||||
font-family: var(--detail-text-font-family);
|
||||
}
|
||||
@ -723,9 +711,6 @@ div[data-notify="container"] {
|
||||
}
|
||||
|
||||
#saved-indicator {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: -7px;
|
||||
font-size: 150%;
|
||||
color: var(--main-text-color);
|
||||
z-index: 100;
|
||||
|
||||
@ -150,122 +150,7 @@
|
||||
<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">
|
||||
<button id="note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
|
||||
<span id="note-path-count">1 path</span>
|
||||
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul id="note-path-list" class="dropdown-menu" aria-labelledby="note-path-list-button">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<input autocomplete="off" value="" id="note-title" tabindex="1">
|
||||
|
||||
<div class="hide-toggle" style="display: flex; align-items: center;">
|
||||
<button class="btn btn-sm icon-button jam jam-play"
|
||||
style="display: none; margin-right: 10px;"
|
||||
title="Render"
|
||||
id="render-button"></button>
|
||||
|
||||
<button class="btn btn-sm icon-button jam jam-play"
|
||||
style="display: none; margin-right: 10px;"
|
||||
title="Execute (Ctrl+Enter)"
|
||||
id="execute-script-button"></button>
|
||||
|
||||
<div class="btn-group btn-group-xs">
|
||||
<button type="button"
|
||||
class="btn btn-sm icon-button jam jam-shield-check"
|
||||
id="protect-button"
|
||||
title="Protected note can be viewed and edited only after entering password">
|
||||
</button>
|
||||
|
||||
<button type="button"
|
||||
class="btn btn-sm icon-button jam jam-shield-close"
|
||||
id="unprotect-button"
|
||||
title="Not protected note can be viewed without entering password">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="note-type-wrapper" style="display: flex;">
|
||||
<div class="dropdown" id="note-type">
|
||||
<button data-bind="disable: isDisabled()" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
|
||||
Type: <span data-bind="text: typeString()"></span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div id="note-type-dropdown" class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">✓</span> <strong>Text</strong></a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" data-bind="click: selectRelationMap, css: { selected: type() == 'relation-map' && mime() == '' }"><span class="check">✓</span> <strong>Relation Map</strong></a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" data-bind="click: selectRender, css: { selected: type() == 'render' && mime() == '' }"><span class="check">✓</span> <strong>Render HTML note</strong></a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" data-bind="click: selectCode, css: { selected: type() == 'code' && mime() == '' }"><span class="check">✓</span> <strong>Code</strong></a>
|
||||
<!-- ko foreach: codeMimeTypes -->
|
||||
<a class="dropdown-item" data-bind="click: $parent.selectCodeMime, css: { selected: $parent.type() == 'code' && $parent.mime() == mime }"><span class="check">✓</span> <span data-bind="text: title"></span></a>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown" id="note-actions">
|
||||
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
|
||||
Note actions
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" id="show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
|
||||
<a class="dropdown-item show-attributes-button"><kbd>Alt+A</kbd> Attributes</a>
|
||||
<a class="dropdown-item" id="show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">Note source</a>
|
||||
<a class="dropdown-item" id="import-files-button">Import files</a>
|
||||
<a class="dropdown-item" id="export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
|
||||
<a class="dropdown-item" id="show-note-info-button">Note info</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% include details/detail.ejs %>
|
||||
<% include tabs.ejs %>
|
||||
|
||||
<% include dialogs/about.ejs %>
|
||||
<% include dialogs/add_link.ejs %>
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
<div id="note-detail-wrapper">
|
||||
<span id="saved-indicator" title="All changes have been saved" class="jam jam-check"></span>
|
||||
|
||||
<div id="note-detail-script-area"></div>
|
||||
|
||||
<table id="note-detail-promoted-attributes"></table>
|
||||
|
||||
<div id="note-detail-component-wrapper">
|
||||
<div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
|
||||
|
||||
<div id="note-detail-code" class="note-detail-component"></div>
|
||||
|
||||
<% include search.ejs %>
|
||||
|
||||
<% include render.ejs %>
|
||||
|
||||
<% include file.ejs %>
|
||||
|
||||
<% include image.ejs %>
|
||||
|
||||
<% include relation_map.ejs %>
|
||||
|
||||
<% include protected_session_password.ejs %>
|
||||
|
||||
<div id="children-overview"></div>
|
||||
</div>
|
||||
|
||||
<div id="attribute-list">
|
||||
<button class="btn btn-sm show-attributes-button">Attributes:</button>
|
||||
|
||||
<span id="attribute-list-inner"></span>
|
||||
</div>
|
||||
</div>
|
||||
68
src/views/tabs.ejs
Normal file
68
src/views/tabs.ejs
Normal file
@ -0,0 +1,68 @@
|
||||
<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 id="tabs-container">
|
||||
<div id="note-detail-wrapper">
|
||||
<% include title.ejs %>
|
||||
|
||||
<div id="note-detail-script-area"></div>
|
||||
|
||||
<table id="note-detail-promoted-attributes"></table>
|
||||
|
||||
<div id="note-detail-component-wrapper">
|
||||
<div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
|
||||
|
||||
<div id="note-detail-code" class="note-detail-component"></div>
|
||||
|
||||
<% include details/search.ejs %>
|
||||
|
||||
<% include details/render.ejs %>
|
||||
|
||||
<% include details/file.ejs %>
|
||||
|
||||
<% include details/image.ejs %>
|
||||
|
||||
<% include details/relation_map.ejs %>
|
||||
|
||||
<% include details/protected_session_password.ejs %>
|
||||
|
||||
<div id="children-overview"></div>
|
||||
</div>
|
||||
|
||||
<div id="attribute-list">
|
||||
<button class="btn btn-sm show-attributes-button">Attributes:</button>
|
||||
|
||||
<span id="attribute-list-inner"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
81
src/views/title.ejs
Normal file
81
src/views/title.ejs
Normal file
@ -0,0 +1,81 @@
|
||||
<div id="title-container" style="flex-grow: 0; flex-shrink: 0;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div class="dropdown hide-toggle">
|
||||
<button id="note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
|
||||
<span id="note-path-count">1 path</span>
|
||||
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul id="note-path-list" class="dropdown-menu" aria-labelledby="note-path-list-button">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<input autocomplete="off" value="" id="note-title" tabindex="1">
|
||||
|
||||
<span id="saved-indicator" title="All changes have been saved" class="jam jam-check"></span>
|
||||
|
||||
<div class="hide-toggle" style="display: flex; align-items: center;">
|
||||
<button class="btn btn-sm icon-button jam jam-play"
|
||||
style="display: none; margin-right: 10px;"
|
||||
title="Render"
|
||||
id="render-button"></button>
|
||||
|
||||
<button class="btn btn-sm icon-button jam jam-play"
|
||||
style="display: none; margin-right: 10px;"
|
||||
title="Execute (Ctrl+Enter)"
|
||||
id="execute-script-button"></button>
|
||||
|
||||
<div class="btn-group btn-group-xs">
|
||||
<button type="button"
|
||||
class="btn btn-sm icon-button jam jam-shield-check"
|
||||
id="protect-button"
|
||||
title="Protected note can be viewed and edited only after entering password">
|
||||
</button>
|
||||
|
||||
<button type="button"
|
||||
class="btn btn-sm icon-button jam jam-shield-close"
|
||||
id="unprotect-button"
|
||||
title="Not protected note can be viewed without entering password">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="note-type-wrapper" style="display: flex;">
|
||||
<div class="dropdown" id="note-type">
|
||||
<button data-bind="disable: isDisabled()" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
|
||||
Type: <span data-bind="text: typeString()"></span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div id="note-type-dropdown" class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">✓</span> <strong>Text</strong></a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" data-bind="click: selectRelationMap, css: { selected: type() == 'relation-map' && mime() == '' }"><span class="check">✓</span> <strong>Relation Map</strong></a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" data-bind="click: selectRender, css: { selected: type() == 'render' && mime() == '' }"><span class="check">✓</span> <strong>Render HTML note</strong></a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" data-bind="click: selectCode, css: { selected: type() == 'code' && mime() == '' }"><span class="check">✓</span> <strong>Code</strong></a>
|
||||
<!-- ko foreach: codeMimeTypes -->
|
||||
<a class="dropdown-item" data-bind="click: $parent.selectCodeMime, css: { selected: $parent.type() == 'code' && $parent.mime() == mime }"><span class="check">✓</span> <span data-bind="text: title"></span></a>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown" id="note-actions">
|
||||
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
|
||||
Note actions
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" id="show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
|
||||
<a class="dropdown-item show-attributes-button"><kbd>Alt+A</kbd> Attributes</a>
|
||||
<a class="dropdown-item" id="show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">Note source</a>
|
||||
<a class="dropdown-item" id="import-files-button">Import files</a>
|
||||
<a class="dropdown-item" id="export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
|
||||
<a class="dropdown-item" id="show-note-info-button">Note info</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user