How about instead of pointing out faults from tests that anybody can do, but actually do not match any real workflow, to come up with a some design mockups that work?
Is quite easy to trash the design of a pininfarina car by taking it on a stone quarry road, you know.
1 Like
Unfortunately seems to be happening far too much theses days. People donât realise the team are doing this in thier spare time and giving them a fully fledged operating system for free. Yet instead of trying to contribute they just complain
Iâm just an average Manjaro user and stated sincerely my true point of view, because I believe different opinions are always the way to come with something good and correct some decisions, and I always believed Manjaro are the most comfortable community to discuss and argue, you even accept and pay attention to feedback from newbies like myself.
I donât hate Manjaro and I donât have any bad intentions, in fact I was using Ubuntu for 6years, and after trying Manjaro KDE Iâm happy with its release model and stability.
The team decided to take up the task to provide something useful and functional. Contributing is not easy because each has a set of mind, a background and more or less experience in programming + a different taste in visuals.
The decisions need to be taken in steps and start with those situations where things are important, not stretched to examples that go to an extreme usage, but a real workflow. This also influences the decisions taken.
You are no longer a newbie 
The feedback here is most welcome, and is fine to agree to disagree in some cases.
Is also true that once i established how i want all the applications to be, where to open, what size, on what activity and display, more or less in an arrangement that fits my particular taste, i find difficult to justify why someone would use a software like Pamac in full screen mode, or even tiled (i use tiling but not for Pamac nor Telegram for example).
Is almost the same situation as with desktop layout, themes, icons and color-schemes. Probably we could never agree to use the same and we all could make a good case for why âthat oneâ and not the other.
Pamac will reach a point soon, when all will be in the right place, iâm sure about that.
1 Like
So, would it be usefull to provide visuals or is GTK+ version frozen as is?
Visuals always help. Alt least they give the proper context of âhow is used and worksâ instead of âis not working when used like thatâ.
From what i know and we discussed as team, there are ways in GTK3 adn GTK4 to have adaptive widgets. Mostly things would start like this
And then have something like
You know, you have a point. I had always ran pamac maximized for no particular reason. So, I started running it half screen and that is way better. Now that I think about it, previous versions have always been a space waster, as well. Should have been running unmaximized all along. 
Suggestions for the new Pamac layout, based on v.10.0.2-1.
No Iâm not suggesting the color #yellow ^^
Layout
The idea is to:
- have a unique responsive layout for desktop/mobile
- keep a consistent layout (no disappearing nav bar)
- keep a consistent left alignment within the package section
- keep a consistent placement of buttons:
- navigation buttons into the navigation bar
- action buttons to the right of the Package section (in desktop view)
For each screen that needed retouching youâll find:
- a screenshot comparing side by side a mobile (vertical) view and a desktop (hozirontal) view
- the sourcecode (to be saved as a standalone
*.htmlfile and opened in a browser for testing).
It contains HTML, CSS and javascript for the Filters bar toggle function, no external file is called. I donât know how to develop UI for GTK. Only tested on Firefox, other browsers might display inconsistencies in sizes, margin, padding etc.
The main (browse) screen and the Installed screen
Sourcecode (save as a *.html file):
<!DOCTYPE html>
<html lang="en">
<head>
<title>pamac v10 - Browse / Installed</title>
<style>
body {
background-color: black;
color: yellow;
}
h1, h2, hr, p, label, table, tr, td {
font-family: sans-serif;
color: yellow;
}
h1 {
text-align: center;
}
h2 {
text-align: left;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
hr {
border: 1px dashed yellow;
margin: 10px 0;
}
a {
color: #31b396;
}
p {
font-size: 120%;
}
label {
font-size: 120%;
}
select {
margin: 5px 5px 5px 0;
}
table, tr, td {
margin: 0;
padding: 0;
}
td {
padding: 5px;
font-size: 120%;
height: 2em;
vertical-align: top;
border: 0 solid white;
}
.bold {
font-weight: bold;
}
.titlebar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #141a1b;
}
.nav-bar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #1b2224;
}
.nav {
text-align: center;
width: 100%;
}
#filters-container {
display: none;
background-color: #222b2e;
}
.filter-wrapper {
padding: 5px 10px;
display: inline-block;
}
.pkg-section {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #222b2e;
}
.pkg-icon {
float:left;
}
.pkg-infos {
float: left;
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.pkg-details {
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.pkg-image {
float: right;
width: 400px;
height: 400px;
border: 1px dashed yellow;
}
.refresh {
float: right;
}
.btn-container {
float: right;
border: 0 solid white;
}
.btn-filter-wrapper {
float: left;
border: 0 solid white;
}
.btn {
padding: 5px 10px;
margin: 5px;
display: inline-block;
cursor: pointer;
border: none;
border-radius: 5px;
}
.btn-nav-active {
background-color: #31b396;
color: white;
font-weight: bold;
}
.btn-pkg-active {
background-color: #48cc80;
color: white;
font-weight: bold;
}
.btn-pkg-red {
background-color: #dc5c5c;
color: white;
font-weight: bold;
}
.btn-inactive,
.btn-pkg-inactive,
.btn-nav-inactive {
background-color: #111a1b;
color: white;
font-weight: bold;
}
.clear {
clear: both;
}
.footer {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
text-align: right;
background-color: #1b2224;
}
</style>
</head>
<body>
<div class="titlebar">
<h2>Title bar</h2>
</div>
<div class="nav-bar">
<div class="btn-filter-wrapper">
<button class="btn btn-pkg-active" onclick="ToggleFilters();">Y</button>
</div>
<div class="nav">
<button class="btn btn-nav-active">Browse</button><button class="btn btn-nav-inactive">Installed</button><button class="btn btn-nav-inactive">Updates</button>
</div>
<div id="filters-container">
<div class="filter-wrapper">
<label for="BrowseBy">Browse by...</label><br />
<select id="BrowseBy">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
<div class="filter-wrapper">
<label for="View">View...</label><br />
<select id="View">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
<div class="filter-wrapper">
<label for="SortBy">Sort by...</label><br />
<select id="SortBy">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
</div>
</div>
<div class="pkg-section">
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
</div>
<div class="footer">
<button class="btn btn-inactive">Cancel</button>
<button class="btn btn-inactive">Apply</button>
<button class="btn btn-inactive">></button>
</div>
<script>
function ToggleFilters() {
var x = document.getElementById("filters-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
The title bar doesnât contain nav buttons anymore. They have been moved to the nav bar. I think itâs just weird to have nav buttons in a title bar.
The navigation bar contains two elements:
- to the left, a button to toggle the display of the Filters bar
- in the middle, navigation buttons.
About the toggable Filters bar
- With Pamac v9, the filters options were directly visible. A single click allowed to select an option. Cost a big chunk of screen space.
- With Pamac v10, the filters options are not directly visible anymore. We need two clicks to select an option (first click to open the drop-down menu, second click to select the option). Lower usability, but also lower screen space cost.
- With a toggable Filters bar, we now need three clicks to select an option (first to toggle the Filters bar visibility, second to open the drop-down menu, third to select the option).
I thought about using a radio buttons list rather than a drop down menu, to save one click, but this would take quite a bit of screen space.
So even though the usability is worse, the idea is that we donât use the filters often enough to justify their permanent display. The screen space cost is mininal.
Updates screen (up to date)
Sourcecode (save as *.html file):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pamac v10 - Updates (up to date)</title>
<style>
body {
background-color: black;
color: yellow;
}
h1, h2, hr, p, label, table, tr, td {
font-family: sans-serif;
color: yellow;
}
h1 {
text-align: center;
margin: 300px 0;
}
h2 {
text-align: left;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
hr {
border: 1px dashed yellow;
margin: 10px 0;
}
p {
font-size: 120%;
}
label {
font-size: 120%;
}
select {
margin: 5px 5px 5px 0;
}
table, tr, td {
margin: 0;
padding: 0;
}
td {
padding: 5px;
}
.titlebar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #141a1b;
}
.nav-bar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #1b2224;
}
.nav {
text-align: center;
width: 100%;
}
#filters-container {
display: none;
background-color: #222b2e;
}
.pkg-section {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #222b2e;
}
.pkg-icon {
float:left;
}
.pkg-infos {
float: left;
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.refresh {
float: right;
}
.btn-container {
float: right;
border: 0 solid white;
}
.btn-filter-wrapper {
float: left;
border: 0 solid white;
}
.btn {
padding: 5px 10px;
margin: 5px;
display: inline-block;
cursor: pointer;
border: none;
border-radius: 5px;
}
.btn-nav-active {
background-color: #31b396;
color: white;
font-weight: bold;
}
.btn-pkg-active {
background-color: #48cc80;
color: white;
font-weight: bold;
}
.btn-pkg-red {
background-color: #dc5c5c;
color: white;
font-weight: bold;
}
.btn-inactive {
background-color: #111a1b;
color: white;
font-weight: bold;
}
.clear {
clear: both;
}
.footer {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
text-align: right;
background-color: #1b2224;
}
</style>
</head>
<body>
<div class="titlebar">
<h2>Title bar</h2>
</div>
<div class="nav-bar">
<div class="btn-filter-wrapper">
<button class="btn btn-inactive">Y</button>
</div>
<div class="nav">
<button class="btn btn-inactive">Browse</button><button class="btn btn-inactive">Installed</button><button class="btn btn-nav-active">Updates</button>
</div>
</div>
<div class="pkg-section">
<div class="refresh">Last refresh: 12:34 <button class="btn btn-pkg-active">Refresh</button></div>
<h1>Your system is up to date</h1>
</div>
<div class="footer">
<button class="btn btn-inactive">Cancel</button>
<button class="btn btn-inactive">Apply</button>
<button class="btn btn-inactive">></button>
</div>
<script>
function ToggleFilters() {
var x = document.getElementById("filters-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
- The Filters bar toggle button is disabled here (because there is no data to filter) but still visible, on purpose.
- The âRefreshâ stuff moves to top right of the Package section.
- The âRefreshâ button background-color becomes âactiveâ (trying to keep a consistent color-code, grey/black means âinactiveâ).
Package Details screen
Sourcecode (save as a *.html file):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pamac v10 - Package details</title>
<style>
body {
background-color: black;
color: yellow;
}
h1, h2, hr, p, label, table, tr, td {
font-family: sans-serif;
color: yellow;
}
h1 {
text-align: center;
}
h2 {
text-align: left;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
hr {
border: 1px dashed yellow;
margin: 10px 0;
}
a {
color: #31b396;
}
p {
font-size: 120%;
}
label {
font-size: 120%;
}
select {
margin: 5px 5px 5px 0;
}
table, tr, td {
margin: 0;
padding: 0;
}
td {
padding: 5px;
}
.bold {
font-weight: bold;
}
.titlebar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #141a1b;
}
.nav-bar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #1b2224;
}
.nav {
text-align: center;
width: 100%;
}
#filters-container {
display: none;
background-color: #222b2e;
}
.pkg-section {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #222b2e;
}
.pkg-icon {
float:left;
}
.pkg-infos {
float: left;
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.pkg-details {
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.pkg-image {
float: right;
width: 400px;
height: 400px;
border: 1px dashed yellow;
}
.refresh {
float: right;
}
.btn-container {
float: right;
border: 0 solid white;
}
.btn-filter-wrapper {
float: left;
border: 0 solid white;
}
.btn {
padding: 5px 10px;
margin: 5px;
display: inline-block;
cursor: pointer;
border: none;
border-radius: 5px;
}
.btn-nav-active {
background-color: #31b396;
color: white;
font-weight: bold;
}
.btn-pkg-active {
background-color: #48cc80;
color: white;
font-weight: bold;
}
.btn-pkg-red {
background-color: #dc5c5c;
color: white;
font-weight: bold;
}
.btn-inactive,
.btn-pkg-inactive,
.btn-nav-inactive {
background-color: #111a1b;
color: white;
font-weight: bold;
}
.clear {
clear: both;
}
.footer {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
text-align: right;
background-color: #1b2224;
}
</style>
</head>
<body>
<div class="titlebar">
<h2>Title bar</h2>
</div>
<div class="nav-bar">
<div class="btn-filter-wrapper">
<button class="btn btn-inactive">Y</button>
</div>
<div class="nav">
<button class="btn btn-pkg-active">Details</button><button class="btn btn-pkg-inactive">Dependencies</button><button class="btn btn-pkg-inactive">Files</button>
</div>
</div>
<div class="pkg-section">
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-details">
<div class="pkg-image">
<h1>Package<br />image</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="#">https://manjaro.org</a></p>
<p><span class="bold">Licenses:</span> Lorem ipsum</p>
<p><span class="bold">Repository:</span> Lorem ipsum</p>
<p><span class="bold">Packager:</span> Lorem ipsum</p>
<p><span class="bold">Build date:</span> Lorem ipsum</p>
<p><span class="bold">Install date:</span> Lorem ipsum</p>
<p><span class="bold">Install reason:</span> Lorem ipsum</p>
<p><span class="bold">Signature:</span> Lorem ipsum</p>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<button class="btn btn-inactive">Cancel</button>
<button class="btn btn-inactive">Apply</button>
<button class="btn btn-inactive">></button>
</div>
<script>
function ToggleFilters() {
var x = document.getElementById("filters-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
- Changed alignments
- Moved buttons
Package Dependencies screen
Sourcecode (save as a *.html file):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pamac v10 - Package Dependencies</title>
<style>
body {
background-color: black;
color: yellow;
}
h1, h2, hr, p, label, table, tr, td {
font-family: sans-serif;
color: yellow;
}
h1 {
text-align: center;
}
h2 {
text-align: left;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
hr {
border: 1px dashed yellow;
margin: 10px 0;
}
a {
color: #31b396;
}
p {
font-size: 120%;
}
label {
font-size: 120%;
}
select {
margin: 5px 5px 5px 0;
}
table, tr, td {
margin: 0;
padding: 0;
}
td {
padding: 5px;
font-size: 120%;
height: 2em;
vertical-align: top;
border: 0 solid white;
}
.bold {
font-weight: bold;
}
.titlebar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #141a1b;
}
.nav-bar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #1b2224;
}
.nav {
text-align: center;
width: 100%;
}
#filters-container {
display: none;
background-color: #222b2e;
}
.pkg-section {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #222b2e;
}
.pkg-icon {
float:left;
}
.pkg-infos {
float: left;
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.pkg-details {
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.pkg-image {
float: right;
width: 400px;
height: 400px;
border: 1px dashed yellow;
}
.refresh {
float: right;
}
.btn-container {
float: right;
border: 0 solid white;
}
.btn-filter-wrapper {
float: left;
border: 0 solid white;
}
.btn {
padding: 5px 10px;
margin: 5px;
display: inline-block;
cursor: pointer;
border: none;
border-radius: 5px;
}
.btn-nav-active {
background-color: #31b396;
color: white;
font-weight: bold;
}
.btn-pkg-active {
background-color: #48cc80;
color: white;
font-weight: bold;
}
.btn-pkg-red {
background-color: #dc5c5c;
color: white;
font-weight: bold;
}
.btn-inactive,
.btn-pkg-inactive,
.btn-nav-inactive {
background-color: #111a1b;
color: white;
font-weight: bold;
}
.clear {
clear: both;
}
.footer {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
text-align: right;
background-color: #1b2224;
}
</style>
</head>
<body>
<div class="titlebar">
<h2>Title bar</h2>
</div>
<div class="nav-bar">
<div class="btn-filter-wrapper">
<button class="btn btn-inactive">Y</button>
</div>
<div class="nav">
<button class="btn btn-pkg-inactive">Details</button><button class="btn btn-pkg-active">Dependencies</button><button class="btn btn-pkg-inactive">Files</button>
</div>
</div>
<div class="pkg-section">
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-details">
<table>
<tbody>
<tr>
<td class="bold" rowspan="4">Depends on:</td>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td class="bold" rowspan="4">Optional Dependencies:</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><button class="btn btn-pkg-active">Install</button></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><button class="btn btn-pkg-active">Install</button></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><button class="btn btn-pkg-active">Install</button></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><button class="btn btn-pkg-active">Install</button></td>
</tr>
<tr>
<td class="bold" rowspan="4">Make Dependencies:</td>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td class="bold" rowspan="4">Required By:</td>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<button class="btn btn-inactive">Cancel</button>
<button class="btn btn-inactive">Apply</button>
<button class="btn btn-inactive">></button>
</div>
<script>
function ToggleFilters() {
var x = document.getElementById("filters-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
- Changed alignments
- Moved buttons
- Changed the Optional dependencies Install button background color to âactiveâ.
Package Files screen
Sourcecode (save as a *.html file):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pamac v10 - Package Files</title>
<style>
body {
background-color: black;
color: yellow;
}
h1, h2, hr, p, label, table, tr, td {
font-family: sans-serif;
color: yellow;
}
h1 {
text-align: center;
}
h2 {
text-align: left;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
hr {
border: 1px dashed yellow;
margin: 10px 0;
}
a {
color: #31b396;
}
p {
font-size: 120%;
}
label {
font-size: 120%;
}
select {
margin: 5px 5px 5px 0;
}
table, tr, td {
margin: 0;
padding: 0;
}
td {
padding: 5px;
font-size: 120%;
height: 2em;
vertical-align: top;
border: 0 solid white;
}
.bold {
font-weight: bold;
}
.titlebar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #141a1b;
}
.nav-bar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #1b2224;
}
.nav {
text-align: center;
width: 100%;
}
#filters-container {
display: none;
background-color: #222b2e;
}
.pkg-section {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #222b2e;
}
.pkg-icon {
float:left;
}
.pkg-infos {
float: left;
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.pkg-details {
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.pkg-image {
float: right;
width: 400px;
height: 400px;
border: 1px dashed yellow;
}
.refresh {
float: right;
}
.btn-container {
float: right;
border: 0 solid white;
}
.btn-filter-wrapper {
float: left;
border: 0 solid white;
}
.btn {
padding: 5px 10px;
margin: 5px;
display: inline-block;
cursor: pointer;
border: none;
border-radius: 5px;
}
.btn-nav-active {
background-color: #31b396;
color: white;
font-weight: bold;
}
.btn-pkg-active {
background-color: #48cc80;
color: white;
font-weight: bold;
}
.btn-pkg-red {
background-color: #dc5c5c;
color: white;
font-weight: bold;
}
.btn-inactive,
.btn-pkg-inactive,
.btn-nav-inactive {
background-color: #111a1b;
color: white;
font-weight: bold;
}
.clear {
clear: both;
}
.footer {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
text-align: right;
background-color: #1b2224;
}
</style>
</head>
<body>
<div class="titlebar">
<h2>Title bar</h2>
</div>
<div class="nav-bar">
<div class="btn-filter-wrapper">
<button class="btn btn-inactive">Y</button>
</div>
<div class="nav">
<button class="btn btn-pkg-inactive">Details</button><button class="btn btn-pkg-inactive">Dependencies</button><button class="btn btn-pkg-active">Files</button>
</div>
</div>
<div class="pkg-section">
<!-- pkg row starts -->
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-details">
<p>/usr/bin/firefox</p>
<p>/usr/lib/firefox/Throbber-small.gif</p>
<p>/usr/lib/firefox/browser/chrome/icons/default/default128.png</p>
<p>/usr/lib/firefox/browser/chrome/icons/default/default16.png</p>
<p>/usr/lib/firefox/browser/chrome/icons/default/default32.png</p>
<p>/usr/lib/firefox/browser/chrome/icons/default/default48.png</p>
<p>/usr/lib/firefox/browser/chrome/icons/default/default64.png</p>
<p>/usr/lib/firefox/browser/crashreporter-override.ini</p>
<p>/usr/lib/firefox/browser/defaults/preferences/vendor.js</p>
<p>/usr/lib/firefox/browser/features/doh-rollout@mozilla.org.xpi</p>
<p>/usr/lib/firefox/browser/features/formautofill@mozilla.org.xpi</p>
<p>/usr/lib/firefox/browser/features/screenshots@mozilla.org.xpi</p>
<p>/usr/lib/firefox/browser/features/webcompat-reporter@mozilla.org.xpi</p>
<p>/usr/lib/firefox/browser/features/webcompat@mozilla.org.xpi</p>
<p>/usr/lib/firefox/browser/omni.ja</p>
<p>/usr/lib/firefox/crashreporter</p>
<p>/usr/lib/firefox/crashreporter.ini</p>
<p>/usr/lib/firefox/defaults/pref/channel-prefs.js</p>
<p>/usr/lib/firefox/dependentlibs.list</p>
<p>/usr/lib/firefox/distribution/distribution.ini</p>
<p>/usr/lib/firefox/firefox</p>
<p>/usr/lib/firefox/firefox-bin</p>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<button class="btn btn-inactive">Cancel</button>
<button class="btn btn-inactive">Apply</button>
<button class="btn btn-inactive">></button>
</div>
<script>
function ToggleFilters() {
var x = document.getElementById("filters-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
- Changed alignments
- Moved buttons
Feedback welcome.
10 Likes
Thank you very much for the contribution. There are some good ideas.
On pamac 10.0.3-1 I notice another layout issue:
When looking at the section âBuild filesâ of an AUR package, such section is capped with scrollbars:
If is not a known issue, Iâll report it on Gitlab.
Known issue
1 Like
Yeah, I agree:
Suggestion of a Collapsible Filters Sidebar for pamac, based on v.10.0.3-4.
I previously suggested a toggable horizontal filters bar, but this is better 
.
I saw this on Manjaro Gitlab, look at that neat collapsible menu sidebar Applications / pamac-qt ¡ GitLab
It has three states, auto-toggling based on screen width (from left to right on the screenshot):
- Collapsed (displaying a trigram)
- Iconified
- Extended
For Pamac, two states would probably be enough.
Having all filters options directly visible (not âhiddenâ in a drop-down menu) provides a better experience for desktop users (comparable to pamac v.9) and is compatible with mobile users (here the sidebar is about 250px width).
Iâm wary of the automatic toggle though, might be preferable to allow users to set a preference to override.
To test the HTML/CSS/javascript mockup, save this to a *.html file and open in a web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>pamac v10.0.3-4 - Collapsible Filters Sidebar</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
color: yellow;
padding: 10px;
}
h1, h2, hr, p, fieldset, legend, table, tr, td {
font-family: sans-serif;
color: yellow;
}
h1 {
text-align: center;
}
h2 {
text-align: left;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
hr {
border: 1px dashed yellow;
margin: 10px 0;
}
a {
color: #31b396;
font-size: 120%;
}
p {
font-size: 120%;
}
fieldset {
border: 1px dashed yellow;
padding: 5px 10px 5px 10px;
background-color: #222b2e;
}
legend {
font-size: 120%;
padding: 0 10px;
white-space: nowrap;
}
table, tr, td {
margin: 0;
padding: 0;
}
td {
padding: 5px;
font-size: 120%;
height: 2em;
vertical-align: top;
border: 0 solid white;
}
.bold {
font-weight: bold;
}
.titlebar {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #141a1b;
}
.nav {
text-align: center;
width: 100%;
}
.filter-wrapper {
padding: 5px 10px;
display: block;
}
.pkg-section {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
background-color: #222b2e;
}
.pkg-icon {
float:left;
}
.pkg-infos {
float: left;
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.pkg-details {
border: 0 solid white;
padding: 5px 10px 5px 10px;
}
.pkg-image {
float: right;
width: 400px;
height: 400px;
border: 1px dashed yellow;
}
.refresh {
float: right;
}
.btn-container {
float: right;
border: 0 solid white;
}
.btn-filter-wrapper {
float: left;
border: 0 solid white;
}
.btn {
padding: 5px 10px;
margin: 5px;
display: inline-block;
cursor: pointer;
border: none;
border-radius: 5px;
}
.btn-nav-active {
background-color: #31b396;
color: white;
font-weight: bold;
}
.btn-pkg-active {
background-color: #48cc80;
color: white;
font-weight: bold;
}
.btn-pkg-red {
background-color: #dc5c5c;
color: white;
font-weight: bold;
}
.btn-inactive,
.btn-pkg-inactive,
.btn-nav-inactive {
background-color: #111a1b;
color: white;
font-weight: bold;
}
.clear {
clear: both;
}
.footer {
border: 1px solid yellow;
padding: 5px 10px 5px 10px;
text-align: right;
background-color: #1b2224;
}
/* Sidebar */
.sidebar {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - controlled with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 10px;
left: 10px;
background-color: #1b2224;
overflow-x: hidden; /* Disable horizontal scroll */
border: 1px solid yellow;
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
/* Sidebar links */
.sidebar a {
padding: 10px;
text-decoration: none;
display: block;
transition: 0.3s;
}
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 5px;
white-space: nowrap;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#right-wrapper {
transition: margin-left .5s;
background-color: red;
}
</style>
</head>
<body>
<div id="Sidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><< Collapse sidebar</a>
<div class="filter-wrapper">
<fieldset>
<legend>Browse by...</legend>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
</fieldset>
</div>
<div class="filter-wrapper">
<fieldset>
<legend>View...</legend>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
</fieldset>
</div>
<div class="filter-wrapper">
<fieldset>
<legend>Sort by...</legend>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
</fieldset>
</div>
</div>
<div id="right-wrapper">
<div class="titlebar">
<div class="btn-filter-wrapper">
<button class="btn btn-pkg-active" onclick="openNav()">Y</button>
</div>
<div class="nav">
<button class="btn btn-nav-active">Browse</button><button class="btn btn-nav-inactive">Installed</button><button class="btn btn-nav-inactive">Updates</button>
</div>
</div>
<div class="pkg-section">
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-pkg-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-pkg-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-pkg-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-pkg-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-pkg-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
<div class="pkg-icon">
<svg height="80" width="80">
<circle cx="40" cy="40" r="25" stroke="yellow" stroke-width="1" fill="yellow" />
</svg>
</div>
<div class="pkg-infos">
<h2>Package Title</h2>
<p>Package short description</p>
<p>Repository</p>
</div>
<div class="btn-container">
<button class="btn btn-pkg-active">Install</button>
<button class="btn btn-pkg-red">Remove</button>
<button class="btn btn-pkg-inactive">Reinstall</button>
</div>
<div class="clear"></div>
<hr />
</div>
<div class="footer">
<button class="btn btn-pkg-inactive">Cancel</button>
<button class="btn btn-pkg-inactive">Apply</button>
<button class="btn btn-nav-inactive">></button>
</div>
</div>
<script>
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("Sidebar").style.width = "250px";
document.getElementById("right-wrapper").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("Sidebar").style.width = "0";
document.getElementById("right-wrapper").style.marginLeft = "0";
}
</script>
</body>
</html>
Tested on Firefox only. Other browsers might display inconsistencies.
3 Likes
Fixed in v10.0.4.
Already working on it.
Thanks, already working on a collapsible side bar using libhandy
4 Likes
Thanks for the illustration, this is what I was trying to suggest earlier!
Thanks thatâs great , I really love Pamac and use it everyday, itâs our only savior on Manjaro from the hell of pacman with its infinite commands that we should remember.