forked from extern/the-glorious-startpage
dashboard add theme engine settings ui
This commit is contained in:
Gerome Matilla
parent
ba13a67f75
commit
0b3a7212e8
@ -12,6 +12,7 @@
|
||||
@import url('dashboard.css');
|
||||
@import url('greeter-date-message.css');
|
||||
@import url('search-engine-settings.css');
|
||||
@import url('theme-engine.css');
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
|
||||
160
css/theme-engine.css
Normal file
160
css/theme-engine.css
Normal file
@ -0,0 +1,160 @@
|
||||
.themeEngine {
|
||||
font-family: roboto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;;
|
||||
border-radius: 6px;
|
||||
color: var(--base-color);
|
||||
background: var(--base-container);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#themeEnginePadding {
|
||||
padding: 5px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#themeEngineHeader {
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
#themeEngineHeaderIcon {
|
||||
background: url('../assets/ui-icons/theme.svg');
|
||||
background-size: cover;
|
||||
margin-right: 10px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
#themeEngineHeaderLabel {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
font-size: 14pt;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
#themeEngineContainer {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#themeEngineSelect {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background: var(--base-container);
|
||||
color: var(--base-color);
|
||||
font-weight: normal;
|
||||
font-style: 14pt;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
#themeEngineSelect:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#themeEngineSelect option {
|
||||
color: initial;
|
||||
border: none;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#themeEngineReset,
|
||||
#themeEngineAsDefault {
|
||||
background: var(--base-container);
|
||||
color: var(--base-color);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
margin-top: 5px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
|
||||
/*Center vertically*/
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#themeEngineReset:hover,
|
||||
#themeEngineAsDefault:hover {
|
||||
background: var(--base-hover-bg);
|
||||
}
|
||||
|
||||
#themeEngineReset:active,
|
||||
#themeEngineAsDefault:active {
|
||||
background: var(--base-active-bg);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 580px) {
|
||||
.themeEngine {
|
||||
width: 96vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.themeEngineGroups {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.backgroundColorSetter,
|
||||
.foregroundColorSetter,
|
||||
.blurSetter {
|
||||
/*Align div inside horizontally*/
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
|
||||
margin-top: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#backgroundSet,
|
||||
#foregroundSet {
|
||||
margin-right: 2.5px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
color: var(--base-color);
|
||||
background: var(--panel-bg);
|
||||
}
|
||||
|
||||
#backgroundOpacitySet,
|
||||
#foregroundOpacitySet {
|
||||
margin-left: 2.5px;
|
||||
height: 32px;
|
||||
width: 25%;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
color: var(--base-color);
|
||||
background: var(--panel-bg);
|
||||
}
|
||||
|
||||
#blurSet {
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
color: var(--base-color);
|
||||
background: var(--panel-bg);
|
||||
}
|
||||
43
index.html
43
index.html
@ -80,9 +80,49 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Theme engine -->
|
||||
<div class="themeEngine">
|
||||
<div id="themeEnginePadding">
|
||||
<div class="header" id="themeEngineHeader">
|
||||
<div class="headerIcon" id="themeEngineHeaderIcon"></div>
|
||||
<div class="headerLabel" id="themeEngineHeaderLabel">Theme Engine</div>
|
||||
</div>
|
||||
<div id="themeEngineContainer">
|
||||
<div class="themeEngineGroups">
|
||||
<div class="themeEngineLabels">
|
||||
Background Color and Opacity
|
||||
</div>
|
||||
<div class="backgroundColorSetter">
|
||||
<input type="text" maxlength="7" class="themeEngineInputs" id="backgroundSet" autocomplete="off" placeholder="000000"/>
|
||||
<input type="text" maxlength="2" class="themeEngineInputs" id="backgroundOpacitySet" autocomplete="off" placeholder="FF"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="themeEngineGroups">
|
||||
<div class="themeEngineLabels">
|
||||
Foreground Color and Opacity
|
||||
</div>
|
||||
<div class="foregroundColorSetter">
|
||||
<input type="text" maxlength="7" class="themeEngineInputs" id="foregroundSet" autocomplete="off" placeholder="000000"/>
|
||||
<input type="text" maxlength="2" class="themeEngineInputs" id="foregroundOpacitySet" autocomplete="off" placeholder="FF"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="themeEngineGroups">
|
||||
<div class="themeEngineLabels">
|
||||
Blur Strength in Pixels
|
||||
</div>
|
||||
<div class="blurSetter">
|
||||
<input type="text" class="themeEngineInputs" id="blurSet" autocomplete="off" placeholder="10"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="themeEngineReset">Reset</div>
|
||||
<div id="themeEngineAsDefault">Apply</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboardOverlay" id="dashboardOverlay"></div>
|
||||
@ -97,5 +137,6 @@
|
||||
<script src="js/animate-dashboard.js"></script>
|
||||
<script src="js/greeter-date-message.js"></script>
|
||||
<script src="js/search-engine-settings.js"></script>
|
||||
<script src="js/search-query-send.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -52,7 +52,6 @@ selectEngine.onchange = () => {
|
||||
var selectedEngine = selectEngine.options[selectEngine.selectedIndex].value;
|
||||
defaultEngine = selectedEngine;
|
||||
selectTheEngine()
|
||||
|
||||
}
|
||||
|
||||
searchEngineAsDefault.onmouseup = () => {
|
||||
|
||||
31
js/search-query-send.js
Normal file
31
js/search-query-send.js
Normal file
@ -0,0 +1,31 @@
|
||||
// Search box
|
||||
var searchBox = document.getElementById("searchBox");
|
||||
|
||||
// Web Search
|
||||
const webSearch = () => {
|
||||
// Search
|
||||
window.location.href = encodeURI(searchQueryPrefix + searchBox.value);
|
||||
};
|
||||
|
||||
// Key release event
|
||||
searchBox.addEventListener(
|
||||
"keyup",
|
||||
(event) => {
|
||||
|
||||
// Number 13 is the "Enter" key on the keyboard
|
||||
if (event.key === 'Enter') {
|
||||
|
||||
// Don't accept empty strings
|
||||
if (searchBox.value < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Cancel the default action, if needed
|
||||
event.preventDefault();
|
||||
|
||||
// Search the web
|
||||
webSearch()
|
||||
};
|
||||
|
||||
}
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user