Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Progress bar percentage color dark theme? #21

Open
nexus2001 opened this issue Dec 30, 2020 · 15 comments
Open

Progress bar percentage color dark theme? #21

nexus2001 opened this issue Dec 30, 2020 · 15 comments
Labels
enhancement New feature or request

Comments

@nexus2001
Copy link

nexus2001 commented Dec 30, 2020

Can you change progress bar percentage color in next update? Yellow perhaps?
This is how it looks now on dark theme:

progress

Also checkbox should have ✓ as a check mark, looks better.
And icons far above should have a bit brighter color:
icons

@maboroshin
Copy link
Owner

maboroshin commented Dec 30, 2020

@nexus2001
The progress bar can be changed. Took a while to identify. I finished.

Icon change is under investigation.

Which checkbox? RIght click menu is can't change.

@nexus2001
Copy link
Author

Checkbox in "content" part. Where you download something and you can select what will be downloaded and what not.

@GREYWOLF1013
Copy link

@nexus2001
The progress bar can be changed. Took a while to identify. I finished.
(#3 (comment)).
What setting was changed for the color of the progress bar? I don't like the current color and would like to change it for myself

@maboroshin
Copy link
Owner

maboroshin commented Jan 2, 2021

@GREYWOLF1013
Color changes require compilation. Please read README.md .

If you understand CSS, you can change it below.

src/stylesheet.qss: QProgressBar

However, the current Rev9 inherits the default settings. So even if you change here, the shape will be broken.

I am currently parsing so that it can be set from the value of QProgressBar. This has been successful.

Please wait for Rev10.

@maboroshin
Copy link
Owner

@GREYWOLF1013 : What color do you want? Light, dark, blue, red. I apply a color theme. Sometimes it's hard to see the text due to a color.

@GREYWOLF1013
Copy link

@maboroshin I was just going to switch it back to the light blue that was present before 4.3.0

@nexus2001 nexus2001 reopened this Jan 2, 2021
@maboroshin
Copy link
Owner

@nexus2001 : I've adjusted the icons.
I don't know how to change the checkbox. Also, I think the current checkbox is good.

@GREYWOLF1013 : Rev10 has been released.

I think it's a good idea to improve the bar.
But I don't know how to revert to former bar. Also, I can't build a former bar.
If someone makes a great bar, I want to use it.

@jagannatharjun
Copy link

But I don't know how to revert to former bar. Also, I can't build a former bar.

remove QProgressBar changes from stylesheet

@maboroshin
Copy link
Owner

maboroshin commented Jan 4, 2021

@jagannatharjun

If I use the same file as qBittorrent ver4.2.3 with the light blue bar, it get dark bar in ver4.3.0.

Even if I delete the QProgressBar, the dark is still inherited. So I want to specify a new QProgressBar, but I don't know how. probably get something similar by specifying qlineargradient.

@jagannatharjun
Copy link

@jagannatharjun

If I use the same file as qBittorrent ver4.2.3 with the light blue bar, it get dark bar in ver4.3.0.

Even if I delete the QProgressBar, the dark is still inherited. So I want to specify a new QProgressBar, but I don't know how. probably get something similar by specifying qlineargradient.

https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qprogressbar

to specify gradient

/* linear gradient from white to green */
QTextEdit {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
                stop:0 white, stop: 0.4 gray, stop:1 green)
}

/* linear gradient from white to green */
QTextEdit {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
                stop:0 white, stop: 0.4 rgba(10, 20, 30, 40),
                stop:1 rgb(0, 200, 230, 200))
}

/* conical gradient from white to green */
QTextEdit {
    background: qconicalgradient(cx:0.5, cy:0.5, angle:30,
                stop:0 white, stop:1 #00FF00)
}

/* radial gradient from white to green */
QTextEdit {
    background: qradialgradient(cx:0, cy:0, radius: 1,
                fx:0.5, fy:0.5, stop:0 white, stop:1 green)
}

@maboroshin
Copy link
Owner

maboroshin commented Jan 4, 2021

@jagannatharjun : Thank you.
I'll experiment. Making the exact same bar sees to be difficult. Or, I want to make it a little darker.

@maboroshin
Copy link
Owner

maboroshin commented Jan 4, 2021

Original
image

Rev10 (ICEBURG)
image

My work1
image

QProgressBar {
  background-color: #002B36;
  color: #dadada;
  border : none;
  text-align: center;
  font: bold;
}

QProgressBar::chunk {
  background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                      stop:0 #2179c3, stop:0.5 #1d86e9, stop:1 #2179c3);
  border : 1px solid #469be0;
  border-radius: 2px ;
  margin: 1px;
}

My work2
image

QProgressBar {
  background-color: #002B36;
  color: #839496;
  border : none;
  text-align: center;
  font: bold;
}

QProgressBar::chunk {
  background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                      stop:0 #0c0f1d, stop:0.5 #1f415c, stop:1 #0c0f1d);
  border : 1px solid #586E75 ;
  border-radius: 2px ;
  margin: 1px ;
}

@maboroshin
Copy link
Owner

maboroshin commented Jan 7, 2021

My work 3
image

QProgressBar {
  margin: 2px 0 0;
  background: qlineargradient(x1:0, y1:0, x2:0, y2:0,
                                      stop:0 #2c2c2c, stop:1 #363636);
  color: #dadada;
  border-top: 1px solid #191919 ;
  border-bottom: 1px solid #6c6c6c ;
  border-left: 1px solid #1d1e20 ;
  border-right: 1px solid #434343 ;
  border-radius: 7px ;

  text-align: center;
  font: bold;
}

QProgressBar::chunk {
  background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                      stop:0 #a3b1cf, stop:0.2 #557198, stop:1 #334760);
  border : 1px solid #111111;
  border-radius: 7px ;
}

My work4
image

QProgressBar {
  margin: 2px 0 0;
  background: qlineargradient(x1:0, y1:0, x2:0, y2:0,
                                      stop:0 #2c2c2c, stop:1 #363636);
  color: #dadada;
  border-top: 1px solid #191919 ;
  border-bottom: 1px solid #6c6c6c ;
  border-left: 1px solid #1d1e20 ;
  border-right: 1px solid #434343 ;
  border-radius: 2px ;

  text-align: center;
  font: bold;
}

QProgressBar::chunk {
  background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                      stop:0 #e3ec91, stop:0.1 #3c752c, stop: 0.9 #3c752c, stop:1 #779414);
  border : 1px solid #111111;
  border-radius: 2px ;
}

My work5
image

QProgressBar {
  margin: 2px 0 0;
  background: qlineargradient(x1:0, y1:0, x2:0, y2:0,
                                      stop:0 #2c2c2c, stop:1 #363636);
  color: #dadada;
  border-top: 1px solid #191919 ;
  border-bottom: 1px solid #6c6c6c ;
  border-left: 1px solid #1d1e20 ;
  border-right: 1px solid #434343 ;
  border-radius: 2px ; /* add */

  text-align: center;
  font: bold;
}

QProgressBar::chunk {
  background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                      stop:0 #3d9cc7, stop:0.1 #3a6dad, stop: 0.9 #3a6dad, stop:1 #101c3f);
  border : 1px solid #111111;
  border-radius: 2px ;
}

@maboroshin
Copy link
Owner

maboroshin commented Jan 7, 2021

My work6
image

QProgressBar {
  margin: 2px 0 0;
  background: #404040;
  color: #dadada;
  border-top: 1px solid #191919 ;
  border-bottom: 1px solid #3c3c3c ;
  border-left: 1px solid #1d1e20 ;
  border-right: 1px solid #434343 ;
  border-radius: 6px ;

  text-align: center;
  font: bold;
}

QProgressBar::chunk {
  background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                      stop:0 #3d9cc7, stop:0.1 #3a6dad, stop: 0.9 #3a6dad, stop:1 #101c3f);
  border : 1px solid #111111;
  border-radius: 6px ;
}

@maboroshin maboroshin added the enhancement New feature or request label Jan 7, 2021
@maboroshin maboroshin mentioned this issue Mar 28, 2021
@maboroshin
Copy link
Owner

Good bar: from "Theme for qBitTorrent" #17879
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants