Browse Source

Adds tabs for calendar, graph and backlinks in right sidebar

master
Peter Stuifzand 10 months ago
parent
commit
8da06bc939
  1. 16
      editor/src/index.js
  2. 38
      editor/src/styles.scss
  3. 48
      templates/sidebar-right.html

16
editor/src/index.js

@ -95,3 +95,19 @@ $(document).on('click', '.calendar-update', function (event) { @@ -95,3 +95,19 @@ $(document).on('click', '.calendar-update', function (event) {
})
return false
})
function activateTab(tab) {
console.log(tab)
$('.tabs .tab-page').toggleClass('tab-active', false);
$($(tab).data('target')).toggleClass('tab-active', true);
$('.tab-bar .tab').toggleClass('tab-active', false)
$(tab).toggleClass('tab-active', true)
}
$(document).on('click', '.tab', function () {
activateTab(this)
});
$(function () {
activateTab($('.tab-bar .tab-active')[0]);
});

38
editor/src/styles.scss

@ -569,3 +569,41 @@ input.input-line, input.input-line:active { @@ -569,3 +569,41 @@ input.input-line, input.input-line:active {
text-decoration-skip: leading-spaces;
color: #999;
}
.tabs {
width: 100%;
}
.tab-bar {
display: flex;
border-bottom: 1px solid black;
}
.tab-bar .tab {
padding: 8px 16px;
cursor: pointer;
border-bottom: 3px solid white;
}
.tab-bar .tab:first-child {
margin-left: 24px;
}
.tab-bar .tab.tab-active {
border-bottom: 3px solid black;
}
.tab-bar .tab + .tab {
margin-left: 24px;
}
.tab-page {
display: none;
}
.tab.tab-active {
}
.tab-page.tab-active {
display: block;
}

48
templates/sidebar-right.html

@ -1,12 +1,48 @@ @@ -1,12 +1,48 @@
{{ define "sidebar-right" }}
<div class="sidebar-right">
{{block "calendar" .}}
{{end}}
<div class="tab-bar">
<div class="tab tab-active" data-target="#tab-calendar">
<span>Calendar</span>
</div>
<div class="tab" data-target="#tab-graph">
<span>Graph</span>
</div>
<div class="tab" data-target="#tab-linked-refs">
<span>Backlinks</span>
</div>
</div>
<div class="tabs">
<div class="tab-page" id="tab-calendar">
{{block "calendar" .}}
{{end}}
</div>
<div class="tab-page" id="tab-graph">
<div class="graph-view">
{{ if .ShowGraph }}
<div class="graph-network" data-name="{{ .Name }}" style="height:80vh; top:0; position: sticky"></div>
{{ end }}
</div>
</div>
<div class="graph-view">
{{ if .ShowGraph }}
<div class="graph-network" data-name="{{ .Name }}" style="height:80vh; top:0; position: sticky"></div>
{{ end }}
<div class="tab-page" id="tab-linked-refs">
{{ if .Backrefs }}
<div class="backrefs content">
<h3>Linked references</h3>
<ul>
{{ range $name, $refs := .Backrefs }}
<li><a href="/edit/{{ $name }}">{{ (index $refs 0).Title }}</a>
<ul>
{{ range $ref := $refs }}
<li>{{ $ref.LineEditHTML }}</li>
{{ end }}
</ul>
</li>
{{ end }}
</ul>
</div>
{{ end }}
</div>
</div>
</div>
{{ end }}

Loading…
Cancel
Save