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;
|
display: grid;
|
||||||
grid-template-areas: "header header"
|
grid-template-areas: "header header"
|
||||||
"left-pane tabs"
|
"left-pane tabs"
|
||||||
"left-pane title"
|
"left-pane tab-container";
|
||||||
"left-pane note-detail";
|
|
||||||
grid-template-rows: auto
|
grid-template-rows: auto
|
||||||
auto
|
auto
|
||||||
auto
|
|
||||||
1fr;
|
1fr;
|
||||||
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -30,6 +28,12 @@ body {
|
|||||||
grid-template-columns: 1fr !important;
|
grid-template-columns: 1fr !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#tabs-container {
|
||||||
|
grid-area: tab-container;
|
||||||
|
min-height: 0;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
#search-box {
|
#search-box {
|
||||||
display: none;
|
display: none;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -131,6 +135,7 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#note-detail-wrapper {
|
#note-detail-wrapper {
|
||||||
|
font-family: var(--detail-font-family);
|
||||||
font-size: var(--detail-font-size);
|
font-size: var(--detail-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -48,14 +48,6 @@ button.close {
|
|||||||
color: var(--main-text-color) !important;
|
color: var(--main-text-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#title-container {
|
|
||||||
grid-area: title;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabs-container {
|
|
||||||
grid-area: tabs;
|
|
||||||
}
|
|
||||||
|
|
||||||
#note-title {
|
#note-title {
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
@ -112,14 +104,9 @@ ul.fancytree-container {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#note-detail-wrapper {
|
#note-detail-wrapper {
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
grid-area: note-detail;
|
|
||||||
padding-left: 10px;
|
|
||||||
padding-top: 10px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
font-family: var(--detail-font-family);
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#note-detail-component-wrapper {
|
#note-detail-component-wrapper {
|
||||||
@ -150,6 +137,7 @@ ul.fancytree-container {
|
|||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
/* This is because with empty content height of editor is 0 and it's impossible to click into it */
|
/* This is because with empty content height of editor is 0 and it's impossible to click into it */
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
|
padding-top: 10px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
font-family: var(--detail-text-font-family);
|
font-family: var(--detail-text-font-family);
|
||||||
}
|
}
|
||||||
@ -723,9 +711,6 @@ div[data-notify="container"] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#saved-indicator {
|
#saved-indicator {
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: -7px;
|
|
||||||
font-size: 150%;
|
font-size: 150%;
|
||||||
color: var(--main-text-color);
|
color: var(--main-text-color);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|||||||
@ -150,122 +150,7 @@
|
|||||||
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
|
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="tabs-container">
|
<% include tabs.ejs %>
|
||||||
<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 dialogs/about.ejs %>
|
<% include dialogs/about.ejs %>
|
||||||
<% include dialogs/add_link.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