Главная Обзор Помощь
Вход
LBP
/
OliveTin
зеркало из https://github.com/OliveTin/OliveTin.git
4
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

Sidebar (#88)

* feature: allow configurable title

* feature: sidebar prototype

* Spelling fix - Thanks @jonny7read

Spelling fix - Thanks @jonny7read

Co-authored-by: Jonny Read <jonny7read@gmail.com>

* feature: sidebar support

* bugfix: pagetitle

* fmt: hide sidebar under feature toggle

* fmt: Codestyle in style.css and main.js

Co-authored-by: Matthew Strasiotto <39424834+matthewstrasiotto@users.noreply.github.com>
Co-authored-by: Jonny Read <jonny7read@gmail.com>
James Read 3 лет назад
Родитель
eca3145b1a
Сommit
244404afbc
5 измененных файлов с 106 добавлено и 1 удалено
Единый вид Показать статистику Diff
  1. 2 0
      internal/config/config.go
  2. 3 0
      internal/httpservers/webuiServer.go
  3. 17 0
      webui/index.html
  4. 6 0
      webui/main.js
  5. 78 1
      webui/style.css

+ 2 - 0
internal/config/config.go
Просмотреть файл 

@@ -66,6 +66,7 @@ type Config struct {
 
 	Actions                         []Action `mapstructure:"actions"`
 
 	Actions                         []Action `mapstructure:"actions"`
 
 	Entities                        []Entity `mapstructure:"entities"`
 
 	Entities                        []Entity `mapstructure:"entities"`
 
 	CheckForUpdates                 bool
 
 	CheckForUpdates                 bool
 
+	PageTitle                       string
 
 	ShowFooter                      bool
 
 	ShowFooter                      bool
 
 	ShowNavigation                  bool
 
 	ShowNavigation                  bool
 
 	ShowNewVersions                 bool
 
 	ShowNewVersions                 bool
 
@@ -79,6 +80,7 @@ type Config struct {
 
 func DefaultConfig() *Config {
 
 func DefaultConfig() *Config {
 
 	config := Config{}
 
 	config := Config{}
 
 	config.UseSingleHTTPFrontend = true
 
 	config.UseSingleHTTPFrontend = true
 
+	config.PageTitle = "OliveTin"
 
 	config.ShowFooter = true
 
 	config.ShowFooter = true
 
 	config.ShowNavigation = true
 
 	config.ShowNavigation = true
 
 	config.ShowNewVersions = true
 
 	config.ShowNewVersions = true

+ 3 - 0
internal/httpservers/webuiServer.go
Просмотреть файл 

@@ -19,6 +19,8 @@ type webUISettings struct {
 
 	ShowNewVersions  bool
 
 	ShowNewVersions  bool
 
 	AvailableVersion string
 
 	AvailableVersion string
 
 	CurrentVersion   string
 
 	CurrentVersion   string
 
+	PageTitle		 string
 
+
 
 }
 
 }
 
 
 
 func findWebuiDir() string {
 
 func findWebuiDir() string {
 
@@ -52,6 +54,7 @@ func generateWebUISettings(w http.ResponseWriter, r *http.Request) {
 
 		ShowNewVersions:  cfg.ShowNewVersions,
 
 		ShowNewVersions:  cfg.ShowNewVersions,
 
 		AvailableVersion: updatecheck.AvailableVersion,
 
 		AvailableVersion: updatecheck.AvailableVersion,
 
 		CurrentVersion:   updatecheck.CurrentVersion,
 
 		CurrentVersion:   updatecheck.CurrentVersion,
 
+		PageTitle:        cfg.PageTitle,
 
 	})
 
 	})
 
 
 
 	_, err := w.Write([]byte(jsonRet))
 
 	_, err := w.Write([]byte(jsonRet))

+ 17 - 0
webui/index.html
Просмотреть файл 

@@ -16,6 +16,23 @@
 
 
 
 	<body>
 
 	<body>
 
 		<main title = "main content">
 
 		<main title = "main content">
 
+			<div id = "perma-widget" hidden>
 
+				<div id = "sidebar-toggle-wrapper">
 
+					<label for = "sidebar-toggler" id = "sidebar-toggler-button" title = "Toggle sidebar" tabindex = "0">&#9776;</label>
 
+				</div>
 
+				<h1 id = "page-title">OliveTin</h1>
 
+			</div>
 
+
 
+
 
+			<div id = "content-sidebar">
 
+				<input type = "checkbox" id = "sidebar-toggler" hidden checked />
 
+				<aside>
 
+					<ul>
 
+						<li>Foo</li>
 
+						<li>Bar</li>
 
+					</ul>
 
+				</aside>
 
+			</div>
 
 			<fieldset id = "section-switcher" title = "Sections">
 
 			<fieldset id = "section-switcher" title = "Sections">
 
 				<button id = "showActions">Actions</button>
 
 				<button id = "showActions">Actions</button>
 
 				<button id = "showLogs">Logs</button>
 
 				<button id = "showLogs">Logs</button>

+ 6 - 0
webui/main.js
Просмотреть файл 

@@ -64,6 +64,12 @@ function processWebuiSettingsJson (settings) {
 
 
 
   document.querySelector('#section-switcher').hidden = !settings.ShowNavigation
 
   document.querySelector('#section-switcher').hidden = !settings.ShowNavigation
 
   document.querySelector('footer[title="footer"]').hidden = !settings.ShowFooter
 
   document.querySelector('footer[title="footer"]').hidden = !settings.ShowFooter
 
+
 
+  if (settings.PageTitle) {
 
+    document.title = settings.PageTitle
 
+    const titleElem = document.querySelector('#page-title')
 
+    if (titleElem) titleElem.innerText = settings.PageTitle
 
+  }
 
 }
 
 }
 
 
 
 function main () {
 
 function main () {

+ 78 - 1
webui/style.css
Просмотреть файл 

@@ -20,11 +20,79 @@ fieldset#root-group {
 
   border: 0;
 
   border: 0;
 
 }
 
 }
 
 
 
+#sidebar-toggle-wrapper {
 
+  display: inline;
 
+}
 
+
 
+h1 {
 
+  display: inline;
 
+  padding-left: 1em;
 
+  font-size: small;
 
+}
 
+
 
+label#sidebar-toggler-button {
 
+  top: 1em;
 
+  left: 0.5em;
 
+  height: 2em;
 
+  width: 2em;
 
+  border-radius: 50%;
 
+  background-color: white;
 
+  text-align: center;
 
+  display: inline-grid;
 
+  place-items: center;
 
+  padding: 0;
 
+  box-shadow: 0 0 5px 0 #444;
 
+  color: #666;
 
+}
 
+
 
+label#sidebar-toggler-button:hover,
 
+label#sidebar-toggler-button:focus {
 
+  color: black;
 
+  cursor: pointer;
 
+}
 
+
 
+aside {
 
+  position: absolute;
 
+  width: 180px;
 
+  height: 100%;
 
+  left: 0;
 
+  top: 0;
 
+  padding-top: 4em;
 
+  transition: 0.5s ease;
 
+  background-color: white;
 
+  border: 0 0 10px 0;
 
+  box-shadow: 0 0 10px 0 #444;
 
+}
 
+
 
+input:checked ~ aside {
 
+  left: -250px;
 
+}
 
+
 
+aside ul {
 
+  padding: 0;
 
+  margin: 0;
 
+}
 
+
 
+aside ul li {
 
+  list-style: none;
 
+  text-align: left;
 
+  padding-left: 1em;
 
+  padding-top: 0.5em;
 
+  padding-bottom: 0.5em;
 
+  border-bottom: 1px inset black;
 
+}
 
+
 
+aside ul li:hover {
 
+  color: black;
 
+  background-color: #efefef;
 
+  cursor: pointer;
 
+}
 
+
 
 table {
 
 table {
 
   background-color: white;
 
   background-color: white;
 
   border-collapse: collapse;
 
   border-collapse: collapse;
 
   width: 100%;
 
   width: 100%;
 
-  box-shadow: 0 0 10px 0 #444;
 
+  box-shadow: 0 0 5px 0 #444;
 
 }
 
 }
 
 
 
 th,
 
 th,
 
@@ -257,6 +325,15 @@ label {
 
   padding-right: 1em;
 
   padding-right: 1em;
 
 }
 
 }
 
 
 
+#perma-widget {
 
+  position: absolute;
 
+  z-index: 2;
 
+}
 
+
 
+#perma-widget label {
 
+  display: inline;
 
+}
 
+
 
 input {
 
 input {
 
   padding: 0.6em;
 
   padding: 0.6em;
 
 }
 
 }