Edex-ui: Alignment issue + Feature Reqeust/Ideas

[Xeddius]

Using version:

• [ ] master (running from GitHub-published source code)
• [x] latest (latest release, currently v2.0.1)
• [ ] vX.X.X (specify other version)

Running on:

• [x] Linux
• [ ] Windows
• [ ] macOS

How comfortable you are with your system and/or IT in general:

• [ ] I'm kind of lost, honestly
• [ ] I know what's up, I could help you run some commands or checks
• [x] My machine is fully under my control, tell me what you need
• [ ] I attended Defcon last year

---

I've noticed an issue with the terminal having a decently large gap underneath and some gaps on the sides, it would be nice to have everything more uniform/aligned. The terminal text sits against the edge of the window which can sometimes cause legibility issues and looks odd/out of place. The red indicates the problem spots.

I've also included an example of a feature request/customization. It would be nice to have slanted edges as an option on things like tabs or windows as it helps add to the futuristic/scifi feel.
I would also love the ability to add custom images or svg files in a module. Something that would let you set the background of the terminal or have a small video displaying/playing.
It'd also be nice to set the color of the background dots as they always seem to stay blue.

A lock module would be awesome. It can include an animated background with a message/password prompt and when the password is entered wrong more than a specified number of times it could change color or play an alert/alarm. https://github.com/VincentGarreau/particles.js/ can be used for adding a dynamic particle background which looks appealing and is both customizable and interactive.

Another improvement would be adding a theme editor to allow moving modules and re-organizing the screen or even creating dynamic themes that change based on interactions/buttons/etc.

In perhaps a far future request the ability to set custom .svg files for specific borders would be amazing and would allow expansive theming without adding heavy bloat. For example you could set the borders to customize the and add more aesthetic qualities/features. (it could also allow for future LCARS theming by the users.)

Gap issue:

Slanted/Styled Tabs:

[GitSquared]

I can't reproduce the bottom-border issue you're having with the terminal, looks fine on my system (both in latest release and latest source versions):

Could you tell me what your screen resolution is?

[GitSquared]

The slanted edges on terminal tabs are definitely sexy, thanks for suggesting that. I'll look into making something like it.

---

Regarding the ability to customize, move, and create modules, this is all on roadmap, see #334

---

And finally, regarding custom image borders, you can actually already do it using the injectCSS property of themes, CSS border images and data URIs to embed the images in your theme file. :wink:

[Xeddius]

My screen resolution is 1600x900, and awesome! I'll look into that!

[GitSquared]

@Xeddius How did you make those awesome slanted tabs? I tried some stuff with CSS transforms, backgrounds, and border hacks but couldn't get anything good lol.

[Xeddius]

I made the slanted tabs in gimp actually. I'll experiment and see if I can create it with css.
the css feature transform: skewX(25deg); looks promising.

I haven't made much progress with this as I've been too busy to make/finish anything useful.

[Xeddius]

I managed to make a slanted tab with css. It's not exactly beautiful, but it does seem to work, tweaking the edge width brings some nice results.

CSS:

body {
  background-color: #000000;
  color: #7000FF;
}
.div {
  border-style: solid;
  align-content;
  width: 75%;
  height: 12%;
  text-align: center;
  padding: 20% 0;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background-color: #202020;
}
.tab {
 transform: skewX(45deg) translate(150%, 150%);
 color: #FF0000;
 padding: 2px 0px;
 border-style: solid;
 border-left: 5px solid;
 border-right: 5px solid;
 background-color: #4000FF;
 width: 250px;
}
.text {
  transform: skewX(-45deg);
  color: #000000;
}

HTML:

<div class="div"><div class="tab"><div class="text">Tab1</div></div></div>

[GitSquared]

@Xeddius that's really cool, thanks. I was wishing we could go without adding DOM nodes but I guess that's not possible. I'll play around with this a bit.

[GitSquared]

:sunglasses:

[GitSquared]

(fixed that little bug on the 2nd tab)

[Xeddius]

It's glorious! :D I can't wait to test it out!