Mabox
/
mabox-colorizer
1
0
Fork 0
Code Issues Pull Requests Projects Releases 108 Wiki Activity

update

master 0.4.4
Daniel Napora 2022-06-29 16:31:14 +02:00
parent 11b191511a
commit 3a7072c862
3 changed files with 320 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
bin/obtctl
View File

@ -149,8 +149,20 @@ clractivebg () {
sd "\.active.border.color:.*$" ".active.border.color: ${1}" ${THEMERC}
sd "^window.active.title.bg.colorTo:.*$" "window.active.title.bg.colorTo: ${colorTo}" ${THEMERC}
#menu (Openbox menu - not really used in Mabox)
sd "menu.title.bg.color:.*$" "menu.title.bg.color: ${1}" ${THEMERC}
sd "menu.title.bg.colorTo:.*$" "menu.title.bg.colorTo: ${colorTo}" ${THEMERC}
sd "menu.items.active.bg.color:.*$" "menu.items.active.bg.color: ${1}" ${THEMERC}
sd "menu.items.active.bg.colorTo:.*$" "menu.items.active.bg.colorTo: ${colorTo}" ${THEMERC}
openbox --reconfigure
# JGMENU based menus, sidepanels and tools
jgctl color_title_bg ${colorTo}
jgctl color_title_border ${1}
jgctl color_sel_bg ${1}
}
clrnormalbg () {
colorTo=$(pastel darken 0.1 "${1}"|pastel format hex)

30
share/mabox-colorizer/help/en.html
View File

@ -32,18 +32,23 @@ div.fixeddown {
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Wallpapers')">Wallpapers</button>
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Terminal')">Terminal theme</button>
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Save')">Save and Restore</button>
<a class="w3-button w3-round w3-tiny w3-lime w3-margin" href="run://colorizer -s">Launch Colorizer</a>
</div>
<div style="margin-left:160px;" class="w3-small">
<section id="Colorizer" class="w3-container tab" style="min-height:100vh;">
<div class="w3-container w3-display-middle w3-center">
<img src="/usr/share/mabox-colorizer/img/colorizer.png" />
<div class="w3-container">
<img src="/usr/share/mabox-colorizer/img/colorizer.png" class="w3-margin"/>
<h2>Mabox Colorizer</h2>
<i>development version</i>
<p>a tool to easily customize your Mabox Linux Desktop</p>
<p>a set of tools to easily customize your Mabox Linux Desktop</p>
<p>Easily change look and feel of:
<ul>
<li><strong>Openbox theme</strong> (windows decorations)</li>
<li><strong>Menu</strong>, <strong>Sidepanels</strong> and other <i>jgmenu-based</i> <strong>Mabox tools</strong></li>
<li><strong>Conkies</strong></li>
</ul></p>
<a class="w3-button w3-round w3-small w3-lime w3-margin" href="run://colorizer -s">Launch Colorizer</a>
</div>
<div class="fixeddown">
@ -96,10 +101,14 @@ div.fixeddown {
</p>
</div>
<em>Note!<br />
Changing the background color also sets the border to the same color. Also sets the computed BGCOLOR_TO color for a subtle gradient.
If you want, you can then set the border color and the second gradient color to your liking.
Changing the background color will also set:
<ul>
<li>border color to the same color</li>
<li>computed BGCOLOR_TO color for a subtle gradient</li>
<li>accent color in Menu, Sidepanels and other jgmenu-based Mabox tools</li>
</ul>
You can change all of them to you liking afterwards.
</em>
</p>
<hr />
<h4>Buttons</h4>
<p>Click icons below to change buttons</p>
@ -196,10 +205,13 @@ If you want, you can then set the border color and the second gradient color to
<p>Menu / Sidepanels module ...</p>
</section>
<section id="Terminal" class="w3-container tab" style="display:none;min-height:100vh">
<div class="fixed"><a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://terminator -x theme.sh -i2;bash">Launch Terminal theme seclector</a></div>
<div class="fixed">
<a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="termo://theme.sh -i2">Launch Terminal theme selector</a>
</div>
<h2>Terminal theme</h2>
<p>Mabox comes with many terminal themes available (~400)</p>
<p>The interactive selector will help you find a suitable theme</p>
<p>You can run terminal theme selector any time from cli by <strong>th</strong> alias</p>
<img src="img/theme.sh.png">
</section>
<section id="Tint2" class="w3-container tab" style="display:none;min-height:100vh;">

287
share/mabox-colorizer/help/pl.html 100644
View File

@ -0,0 +1,287 @@
<!DOCTYPE html>
<html>
<title>Mabox Colorizer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/w3.css">
<style>
body{
background-color:#222222;
color: #909090
}
div.fixed {
position: fixed;
top: 0;
right: 0;
width: 200px;
}
div.fixeddown {
position: fixed;
bottom:0;
right:0;
}
</style>
<body>
<div class="w3-sidebar w3-bar-block w3-dark-grey w3-card" style="width:160px">
<div class="w3-center w3-margin"><img src="./img/colorizer.png" onclick="openTab(event, 'Colorizer')"></div>
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Colorizer')">Colorizer</button>
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Openbox')">Motyw Openbox</button>
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Conky')">Conky</button>
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Jgmenu')">Menu/Panele Boczne</button>
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Tint2')">Panel Tint2</button>
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Wallpapers')">Tapety</button>
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Terminal')">Kolory Terminala</button>
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Save')">Zapisywanie</button>
<a class="w3-button w3-round w3-tiny w3-lime w3-margin" href="run://colorizer -s">Colorizer</a>
</div>
<div style="margin-left:160px;" class="w3-small">
<section id="Colorizer" class="w3-container tab" style="min-height:100vh;">
<div class="w3-container">
<img src="/usr/share/mabox-colorizer/img/colorizer.png" class="w3-margin"/>
<h2>Mabox Colorizer</h2>
<p>a tool to easily customize your Mabox Linux Desktop</p>
<p>Easily change look and feel of:
<ul>
<li><strong>Openbox theme</strong> (windows decorations)</li>
<li><strong>Menu</strong>, <strong>Sidepanels</strong> and other <i>jgmenu-based</i> <strong>Mabox tools</strong></li>
<li><strong>Conkies</strong></li>
</ul></p>
<a class="w3-button w3-round w3-small w3-lime w3-margin" href="run://colorizer -s">Launch Colorizer</a>
</div>
<div class="fixeddown">
<div class="w3-bar w3-tiny">
<div class="w3-bar-item">Mabox Linux Links: </div>
<a href="https://maboxlinux.org" class="w3-bar-item w3-hover-green">www</a>
<a href="https://forum.maboxlinux.org" class="w3-bar-item w3-hover-green">forum</a>
<a href="https://manual.maboxlinux.org/en" class="w3-bar-item w3-hover-green">manual</a>
<a href="https://ko-fi.com/maboxlinux" class="w3-bar-item w3-hover-green">donate</a>
</div>
</div>
</section>
<section id="Openbox" class="w3-container tab" style="display:none;min-height:100vh;">
<div class="fixed"><a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://colorizer-ob -s">Launch OBtheme module</a></div>
<h2>Openbox theme</h2>
<p>The Openbox module allows you to easily customize the appearance of window decorations.</p>
<p>It works with MBcolors theme - defaut one.</p>
<p>You can change some basic settings directly from this screen. For much more options, fine-tunning and colors choices launch OBtheme module.</p>
<h4>Active window titlebar color</h4>
<div class="w3-panel w3-border w3-dark-grey">
<p>You can change active window titlebar color by clicking circles below.</p>
<p class="w3-center w3-margin">
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#DDDDDD" href="run://obtctl clractivebg #DDDDDD">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#a4c400" href="run://obtctl clractivebg #a4c400">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#60a917" href="run://obtctl clractivebg #60a917">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#008a00" href="run://obtctl clractivebg #008a00">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#00aba9" href="run://obtctl clractivebg #00aba9">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#1ba1e2" href="run://obtctl clractivebg #1ba1e2">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#3e65ff" href="run://obtctl clractivebg #3e65ff">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#0050ef" href="run://obtctl clractivebg #0050ef">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#6a00ff" href="run://obtctl clractivebg #6a00ff">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#aa00ff" href="run://obtctl clractivebg #aa00ff">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#f472d0" href="run://obtctl clractivebg #f472d0">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#d80073" href="run://obtctl clractivebg #d80073">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#a20025" href="run://obtctl clractivebg #a20025">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#e51400" href="run://obtctl clractivebg #e51400">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#fa6800" href="run://obtctl clractivebg #fa6800">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#f0a30a" href="run://obtctl clractivebg #f0a30a">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#e3c800" href="run://obtctl clractivebg #e3c800">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#825a2c" href="run://obtctl clractivebg #825a2c">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#6d8764" href="run://obtctl clractivebg #6d8764">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#647687" href="run://obtctl clractivebg #647687">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#76608a" href="run://obtctl clractivebg #76608a">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#87794e" href="run://obtctl clractivebg #87794e">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#a0522d" href="run://obtctl clractivebg #a0522d">&nbsp;</a>
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#222222" href="run://obtctl clractivebg #222222">&nbsp;</a>
</p>
</div>
<em>Note!<br />
Changing the background color will also set:
<ul>
<li>border color to the same color</li>
<li>computed BGCOLOR_TO color for a subtle gradient</li>
<li>accent color in Menu, Sidepanels and other jgmenu-based Mabox tools</li>
</ul>
You can change all of them to you liking afterwards.
</em>
<hr />
<h4>Buttons</h4>
<p>Click icons below to change buttons</p>
<table class="w3-table w3-bordered w3-dark-grey w3-small w3-centered">
<tr class="w3-teal">
<th>Tiny</th>
<th>Normal</th>
<th>Bold</th>
<th>Dots</th>
</tr>
<tr>
<td><a href="run://obtctl buttons tiny"><img src="./img/tiny.png"></a></td>
<td><a href="run://obtctl buttons normal"><img src="./img/normal.png"></a></td>
<td><a href="run://obtctl buttons bold"><img src="./img/bold.png"></a></td>
<td><a href="run://obtctl buttons dots"><img src="./img/dots.png"></a></td>
</tr>
</table>
<hr />
<h4>Gradients</h4>
<p>Openbox title bar can use various types of gradients...</p>
<table class="w3-table w3-bordered w3-dark-grey w3-small">
<tr class="w3-teal">
<th>Gradient type</th>
<th>Image (click to apply)</th>
</tr>
<tr>
<td>Solid color (no gradient)</td>
<td><a href="run://obtctl gradient solid"><img src="./img/solid.png"></a></td>
</tr>
<tr>
<td>Vertical</td>
<td><a href="run://obtctl gradient vertical"><img src="./img/vertical.png"></a></td>
</tr>
<tr>
<td>Horizontal</td>
<td><a href="run://obtctl gradient horizontal"><img src="./img/horizontal.png"></a></td>
</tr>
<tr>
<td>MirrorHorizontal</td>
<td><a href="run://obtctl gradient mirrorhorizontal"><img src="./img/mirrorhorizontal.png"></a></td>
</tr>
<tr>
<td>SplitVertical</td>
<td><a href="run://obtctl gradient splitvertical"><img src="./img/splitvertical.png"></a></td>
</tr>
<tr>
<td>Diagonal</td>
<td><a href="run://obtctl gradient diagonal"><img src="./img/diagonal.png"></a></td>
</tr>
<tr>
<td>CrossDiagonal</td>
<td><a href="run://obtctl gradient crossdiagonal"><img src="./img/crossdiagonal.png"></a></td>
</tr>
<tr>
<td>Pyramid</td>
<td><a href="run://obtctl gradient pyramid"><img src="./img/pyramid.png"></a></td>
</tr>
<tr>
<th colspan="2" class="w3-teal">Raised or flat?</th>
</tr>
<tr>
<td>Raised</td>
<td><a href="run://obtctl raised 1"><img src="./img/raised.png"></a></td>
</tr>
<tr>
<td>Flat</td>
<td><a href="run://obtctl raised 0"><img src="./img/flat.png"></a></td>
</tr>
</table>
<hr />
</section>
<section id="Conky" class="w3-container tab" style="display:none;min-height:100vh;">
<div class="fixed"><a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://colorizer-conky -s">Launch Conky module</a></div>
<h2>Conky</h2>
<p>Mabox provides nine Conky configs that you can easily customize with the Colorizer Conky module.</p>
<p>You can easily set up:
<ul>
<li>background color or set a transparent background</li>
<li>text colors</li>
<li>border</li>
<li>screen position</li>
<li>shadow or outline effect</li>
</ul>
</p>
<p><strong>Global settings</strong> allow you to change all Conky at once.</p>
<p><strong> Individual settings</strong> allow you to tweak individual Conkies, which can be very convenient to fit some wallpapers.</p>
</section>
<section id="Jgmenu" class="w3-container tab" style="display:none;min-height:100vh">
<div class="fixed"><a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://colorizer-menus -s">Launch Menus module</a></div>
<h2>Menu / Sidepanels</h2>
<p>Menu / Sidepanels module ...</p>
</section>
<section id="Terminal" class="w3-container tab" style="display:none;min-height:100vh">
<div class="fixed">
<a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="termo://theme.sh -i2">Launch Terminal theme selector</a>
</div>
<h2>Terminal theme</h2>
<p>Mabox comes with many terminal themes available (~400)</p>
<p>The interactive selector will help you find a suitable theme</p>
<p>You can run terminal theme selector any time from cli by <strong>th</strong> alias</p>
<img src="img/theme.sh.png">
</section>
<section id="Tint2" class="w3-container tab" style="display:none;min-height:100vh;">
<h2>Tint2 panel</h2>
<p>Colorizer module for Tint2 panel is not available yet - but planned</p>
<p>Use quite powerfull Tint2 config menu for now.</p>
<p><a class="w3-button w3-inline w3-round w3-tiny w3-lime" href="run://jgtint2-pipe -s">Tint2 configuration menu</a></p>
<p><a class="w3-button w3-inline w3-round w3-tiny w3-lime" href="run://jgtint2launcher -s">Add/Remove Launchers to panel</a></p>
</section>
<section id="Wallpapers" class="w3-container tab" style="display:none;min-height:100vh;">
<div class="fixed"><a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://jgwallpaperchanger -c">Launch Wallpaper Menu</a></div>
<h2>Wallpapers</h2>
<p>Colorizer automatically generates a color palette from the currently set wallpaper.</p>
<p></p>
</section>
<section id="Save" class="w3-container tab" style="display:none;min-height:100vh;">
<div class="fixed"><a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://mb-obthemes">Launch Theme Manager</a></div>
<h2>Save and Restore</h2>
<p>If you are satisfied with your configuration, you can save it as a meta-theme so that you can restore it later.</p>
<p>Theme Manager will save:
<ul>
<li>Openbox Theme (window decoration)</li>
<li>GTK and Icon Theme</li>
<li>Wallpaper</li>
<li>Conkies</li>
<li>Terminal theme</li>
<li>Menu / Sidepanels colors</li>
<li>Tint2 panel</li>
</ul>
</p><a class="w3-button w3-round w3-tiny w3-lime w3-margin" href="run://mb-obthemes">Launch Theme Manager</a>
</section>
</div>
<script>
function openTab(evt, tabName) {
var i, x, tablinks;
x = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-gray", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " w3-gray";
}
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>