github.com/shoshinnikita/budget-manager@v0.7.1-0.20220131195411-8c46ff1c6778/templates/components/footer.html (about)

     1  {{ define "components/footer.html" }}
     2  <style>
     3  	#footer {
     4  		position: relative;
     5  	}
     6  
     7  	#footer__app-info {
     8  		column-gap: 5px;
     9  		display: flex;
    10  		justify-content: center;
    11  	}
    12  
    13  	#footer__theme-switcher {
    14  		border: 1px solid var(--border-color);
    15  		border-radius: 20px;
    16  		column-gap: 5px;
    17  		display: grid;
    18  		grid-template-columns: repeat(3, 1fr);
    19  		padding: 3px 5px;
    20  		position: absolute;
    21  		right: 0;
    22  		top: 50%;
    23  		transform: translateY(-50%);
    24  	}
    25  
    26  	#footer__theme-switcher>button.feather-icon {
    27  		padding: 0;
    28  	}
    29  
    30  	#footer__theme-switcher>button.feather-icon>svg {
    31  		/* Remove extra space */
    32  		display: block;
    33  		height: 20px;
    34  		width: 20px;
    35  	}
    36  
    37  	#footer__theme-switcher>button.feather-icon.chosen>svg {
    38  		opacity: 1;
    39  		stroke: var(--icon-color--hover);
    40  	}
    41  </style>
    42  
    43  <div id="footer">
    44  	<div id="footer__app-info">
    45  		<div title="Commit {{ .GitHash }}">Budget Manager {{ .Version }}</div>
    46  		<div class="noselect">|</div>
    47  		<div>
    48  			<a href="https://github.com/ShoshinNikita/budget-manager" class="feather-icon" target="_blank" title="GitHub repo">
    49  				{{ template "components/icon" "github" }}
    50  			</a>
    51  		</div>
    52  	</div>
    53  
    54  	<div id="footer__theme-switcher">
    55  		<button id="light-theme-btn" class="feather-icon" title="Light Theme" onclick="switchTheme(lightTheme)">
    56  			{{ template "components/icon" "sun" }}
    57  		</button>
    58  
    59  		<button id="system-theme-btn" class="feather-icon" title="System Theme" onclick="switchTheme(systemTheme)">
    60  			{{ template "components/icon" "disc" }}
    61  		</button>
    62  
    63  		<button id="dark-theme-btn" class="feather-icon" title="Dark Theme" onclick="switchTheme(darkTheme)">
    64  			{{ template "components/icon" "moon" }}
    65  		</button>
    66  	</div>
    67  </div>
    68  
    69  <script>
    70  	window.addEventListener("load", updateThemeButtons);
    71  	window.addEventListener(themeChangeEventName, updateThemeButtons);
    72  
    73  	const lightThemeBtn = document.getElementById("light-theme-btn");
    74  	const systemThemeBtn = document.getElementById("system-theme-btn");
    75  	const darkThemeBtn = document.getElementById("dark-theme-btn");
    76  
    77  	function updateThemeButtons() {
    78  		let highlight = null, reset = [];
    79  
    80  		switch (getLocalStorageTheme()) {
    81  			case lightTheme:
    82  				highlight = lightThemeBtn;
    83  				reset = [systemThemeBtn, darkThemeBtn];
    84  				break;
    85  
    86  			case systemTheme:
    87  				highlight = systemThemeBtn;
    88  				reset = [lightThemeBtn, darkThemeBtn];
    89  				break;
    90  
    91  			case darkTheme:
    92  				highlight = darkThemeBtn;
    93  				reset = [lightThemeBtn, systemThemeBtn,];
    94  				break;
    95  		}
    96  
    97  		const className = "chosen";
    98  
    99  		highlight.classList.add(className);
   100  		for (let i = 0; i < reset.length; i++) {
   101  			reset[i].classList.remove(className)
   102  		}
   103  	}
   104  </script>
   105  {{ end }}