From e9743cd00ca307652f336f49045a02ef042bc35a Mon Sep 17 00:00:00 2001 From: david Date: Wed, 6 Nov 2024 22:12:37 +0100 Subject: [PATCH] TreeView v1 --- app/assets/stylesheets/layout.scss | 152 +++++++++++++----- .../controllers/bs_scrollspy_controller.js | 13 ++ app/javascript/controllers/index.js | 3 + app/views/pages/_page.html.erb | 2 +- app/views/reports/_page_nav.html.slim | 24 +-- app/views/reports/show.html.slim | 4 +- 6 files changed, 148 insertions(+), 50 deletions(-) create mode 100644 app/javascript/controllers/bs_scrollspy_controller.js diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 4cf0b31..1a502ba 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -72,6 +72,14 @@ background-size: cover; } +@mixin toggle-off-icon($color) { + background: url('data:image/svg+xml;utf8,') +} + +@mixin toggle-on-icon($color) { + background: url('data:image/svg+xml;utf8, ') +} + .page_nav nav ul { padding-left: 0; list-style-type: none; @@ -83,56 +91,126 @@ } a:hover { - text-decoration: underline; + // text-decoration: underline; } ul { - // padding-left: 1.5rem; + padding-left: 0rem; } } +details.switch { + >summary { + display: flex; + } -summary, -summary a { - font-size: 1rem; - font-style: normal; + >summary::after { + @include toggle-off-icon(to-rgb(map-get($theme-colors, "dark"))); + width: 1rem; + height: 1rem; + float: inline-end; + transition: 0.4s; + content: ''; + margin-top: 0.25rem; + margin-right: 0; + margin-left: 0.5rem + } } -summary { - display: flex; - line-height: 2rem; -} - -summary::before { - @include details-icon(to-rgb(map-get($theme-colors, "dark"))); - content: ''; - float: inline-end; - width: 0.7rem; - height: 1rem; - margin-top: 0.5rem; - margin-right: 6px; - // background: url('chevron-right.svg'); - // background-size: cover; - margin-left: 0; - transition: 0.2s; +details.switch[open]>summary::after { + @include toggle-on-icon(to-rgb(map-get($theme-colors, "dark"))); } @include color-mode(dark) { - summary::before { - @include details-icon(to-rgb(map-get($theme-colors, "light"))); - // content: ''; - // float: inline-end; - // width: 0.7rem; - // height: 1rem; - // margin-top: 0.5rem; - // margin-right: 6px; - // // background: url('chevron-right.svg'); - // // background-size: cover; - // margin-left: 0; - // transition: 0.2s; + details.switch summary::after { + @include toggle-off-icon(to-rgb(map-get($theme-colors, "light"))); } } -details[open]>summary::before { +@include color-mode(dark) { + details.switch[open]>summary::after { + @include toggle-on-icon(to-rgb(map-get($theme-colors, "light"))); + } +} + +// details.tree[open]:has(summary.active) { +// border: solid 1px $primary; + +// } + +details.tree { + + >summary, + >summary a { + font-size: 1rem; + font-style: normal; + } + + >summary { + display: flex; + line-height: 2rem; + padding-left: 12px; + // padding-top: 8px; + // padding-bottom: 8px; + } + + >summary.active { + border-left: solid 8px $primary; + border-right: solid 8px $primary; + // border: solid 1px $primary; + // background-color: $gray-800; + padding-left: 8px; + // padding-top: 8px; + } + + >summary::before { + @include details-icon(to-rgb(map-get($theme-colors, "dark"))); + content: ''; + float: inline-end; + width: 0.7rem; + height: 1rem; + margin-top: 0.5rem; + margin-right: 6px; + // background: url('chevron-right.svg'); + // background-size: cover; + margin-left: 0px; + transition: 0.2s; + } + + ul { + // li:hover { + // border-left: solid 2px $white; + // padding-left: 36px; + // } + + li { + padding-left: 38px; + + a { + display: block; + } + } + + li:has(a.active) { + border-left: solid 2px $primary; + padding-left: 36px; + // background-color: $gray-900; + } + } +} + +@include color-mode(dark) { + details.tree summary::before { + @include details-icon(to-rgb(map-get($theme-colors, "light"))); + } +} + +details.tree[open]>summary::before { transform: rotate(90deg); -} \ No newline at end of file + padding-bottom: 0; +} + + +// summary.active::before { +// @include details-icon(to-rgb($primary)); +// } \ No newline at end of file diff --git a/app/javascript/controllers/bs_scrollspy_controller.js b/app/javascript/controllers/bs_scrollspy_controller.js new file mode 100644 index 0000000..53e2f0f --- /dev/null +++ b/app/javascript/controllers/bs_scrollspy_controller.js @@ -0,0 +1,13 @@ +import { Controller } from "@hotwired/stimulus" +import * as bootstrap from 'bootstrap' + +// Connects to data-controller="bs-scrollspy" +export default class extends Controller { + connect() { + // console.log(this.element) + const target = this.element.getAttribute("data-bs-scrollspy-target") + const scrollSpy = new bootstrap.ScrollSpy(this.element, { + target: target + }) + } +} diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 6414a8f..9c8e4f7 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -7,6 +7,9 @@ import { application } from "./application" import AutosubmitController from "./autosubmit_controller" application.register("autosubmit", AutosubmitController) +import BsScrollspyController from "./bs_scrollspy_controller" +application.register("bs-scrollspy", BsScrollspyController) + import CheckLinkController from "./check_link_controller" application.register("check-link", CheckLinkController) diff --git a/app/views/pages/_page.html.erb b/app/views/pages/_page.html.erb index a9e1bf1..e25a2f4 100644 --- a/app/views/pages/_page.html.erb +++ b/app/views/pages/_page.html.erb @@ -1,4 +1,4 @@ -
+

<%= page.position %> <%= page.path %>

diff --git a/app/views/reports/_page_nav.html.slim b/app/views/reports/_page_nav.html.slim index a0c8341..a2c946d 100644 --- a/app/views/reports/_page_nav.html.slim +++ b/app/views/reports/_page_nav.html.slim @@ -1,26 +1,30 @@ div id=dom_id(report, :page_nav) - if report.pages.any? - details open=true - summary Struktur + details.switch open=true + summary.justify-content-end + span Pfade nav ul - report.pages.each do |page| - is_current = current_page == page li - details open=current_page_displayed(page) class="" - summary - i.bi.me-1 class="bi-file-earmark-check#{is_current ? "-fill" : "" }" + details.tree open=current_page_displayed(page) class="" + summary class=(is_current ? "active" : nil) + i.bi.me-1 class="bi-file-earmark-check#{is_current ? "" : "" }" - if is_current - =< "#{page.position} #{page.path}" + =< "#{page.position} #{page.path}" - else - =< link_to("#{page.position} #{page.path}", report_path(report, page_id: page.id), class: "#{is_current ? " active text-decoration-underline" : nil }", data: { "turbo-frame": :_top }) + =< link_to("#{page.position} #{page.path}", report_path(report, page_id: page.id), data: { "turbo-frame": :_top }) ul id=dom_id(page, :page_nav_elements) - page.elements.each do |element| li - i.bi.bi-boxes.me-1 - if current_page == page - =< link_to("#{element.number} #{element.title}", "##{dom_id(element)}", data: { "turbo": false }) + =< link_to("##{dom_id(element)}", data: { "turbo": false }) do + i.bi.bi-boxes.me-1 + =< "#{element.number} #{element.title}" - else - =< link_to("#{element.number} #{element.title}", report_path(report, page_id: page.id, anchor: dom_id(element)), data: { "turbo": false }) + =< link_to(report_path(report, page_id: page.id, anchor: dom_id(element)), data: { "turbo": false }) do + i.bi.bi-boxes.me-1 + =< "#{element.number} #{element.title}" = turbo_frame_tag "new_page_frame" do = render partial: "reports/new_page_button", locals: { report: report } \ No newline at end of file diff --git a/app/views/reports/show.html.slim b/app/views/reports/show.html.slim index e312ee6..4b9c26c 100644 --- a/app/views/reports/show.html.slim +++ b/app/views/reports/show.html.slim @@ -11,13 +11,13 @@ h1 .smb-4.lead.mb-3 = @report.comment .row - .col-lg-3.col-md-6.col-sm-12 + .col-lg-4.col-md-6.col-sm-12 .page_nav.sticky-top = render partial: "reports/page_nav", locals: { report: @report, current_page: @current_page } - if @current_page = turbo_frame_tag(dom_id(@current_page, :notes)) do = render partial: "pages/notes", locals: { page: @current_page } - .col-lg-9.col-md-6.col-sm-12 + .col-lg-8.col-md-6.col-sm-12 - if @current_page = render @current_page - else