GitSquared / edex-ui

A cross-platform, customizable science fiction terminal emulator with advanced monitoring & touchscreen support.
GNU General Public License v3.0
40.69k stars 2.57k forks source link

Alignment issue + Feature Reqeust/Ideas #464

Closed Xeddius closed 5 years ago

Xeddius commented 5 years ago

Using version:

Running on:

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


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: Gap issue Slanted/Styled Tabs: Slanted Tabs

GitSquared commented 5 years ago

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):

screenshot

Could you tell me what your screen resolution is?

GitSquared commented 5 years ago

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 commented 5 years ago

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

GitSquared commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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. Tab

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 commented 5 years ago

@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 commented 5 years ago

Peek 2019-04-18 18-46

:sunglasses:

GitSquared commented 5 years ago

(fixed that little bug on the 2nd tab)

Xeddius commented 5 years ago

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