Add CSS via SCSS to the frontend build pipeline
This commit is contained in:
parent
1e67c0090d
commit
f3c818a48f
12 changed files with 924 additions and 94 deletions
|
|
@ -12,72 +12,6 @@
|
|||
{{ block "extraheader" . }}{{ end }}
|
||||
<script>
|
||||
const USER = {{ .User.AsJSON|json }};
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
SSEManager.subscribe("*", function (e) {
|
||||
if (e.type != "heartbeat") {
|
||||
updateUserState();
|
||||
}
|
||||
});
|
||||
});
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.store("user", USER);
|
||||
})
|
||||
function restoreLocalStorage() {
|
||||
const expanded = localStorage.getItem("sidebar.expanded");
|
||||
if (expanded == "false") {
|
||||
document.getElementById("sidebar").classList.add("collapsed");
|
||||
document.getElementById("content").classList.add("expanded");
|
||||
} else {
|
||||
document.getElementById("sidebar").classList.remove("collapsed");
|
||||
document.getElementById("content").classList.remove("expanded");
|
||||
localStorage.setItem("sidebar.expanded", "true");
|
||||
}
|
||||
}
|
||||
function setTooltipsForSidebar() {
|
||||
const sidebarTooltips = document.querySelectorAll(
|
||||
'#sidebar [data-bs-toggle="tooltip"]',
|
||||
);
|
||||
const isExpanded = document
|
||||
.getElementById("content")
|
||||
.classList.contains("expanded");
|
||||
sidebarTooltips.forEach((t) => {
|
||||
const tooltip = bootstrap.Tooltip.getOrCreateInstance(t);
|
||||
if (isExpanded) {
|
||||
tooltip.enable();
|
||||
} else {
|
||||
tooltip.disable();
|
||||
}
|
||||
});
|
||||
}
|
||||
async function updateUserState() {
|
||||
const response = await fetch("/api/user/self");
|
||||
const data = await response.json();
|
||||
// Update properties instead of replacing the whole store which leverages Alpine's reactivity
|
||||
const store_user = Alpine.store("user");
|
||||
Object.keys(data).forEach(key => {
|
||||
store_user[key] = data[key];
|
||||
});
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var popoverTriggerList = [].slice.call(
|
||||
document.querySelectorAll('[data-bs-toggle="popover"]'),
|
||||
);
|
||||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl);
|
||||
});
|
||||
console.log("Initialized ", popoverTriggerList.length, " popovers");
|
||||
|
||||
var tooltipTriggerList = [].slice.call(
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]'),
|
||||
);
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
let t = new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
return t;
|
||||
});
|
||||
console.log("Initialized ", tooltipTriggerList.length, " tooltips");
|
||||
restoreLocalStorage();
|
||||
setTooltipsForSidebar();
|
||||
});
|
||||
</script> {{ if not .Config.IsProductionEnvironment }}
|
||||
<script src="/.flogo/injector.js"></script>
|
||||
{{ end }}
|
||||
|
|
@ -94,17 +28,5 @@
|
|||
{{ template "content" . }}
|
||||
</div>
|
||||
<div id="flogo"></div>
|
||||
<script>
|
||||
document.getElementById("sidebarToggle").addEventListener("click", () => {
|
||||
const sidebar = document.getElementById("sidebar");
|
||||
sidebar.classList.toggle("collapsed");
|
||||
document.getElementById("content").classList.toggle("expanded");
|
||||
setTooltipsForSidebar();
|
||||
localStorage.setItem(
|
||||
"sidebar.expanded",
|
||||
(!sidebar.classList.contains("collapsed")).toString(),
|
||||
);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue