mirror of
https://github.com/zadam/trilium.git
synced 2025-11-12 16:25:51 +01:00
changes in grid for tabs
This commit is contained in:
zadam
@@ -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>
|
||||
Reference in New Issue
Block a user