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

Changing the theme of the calculator #5

Open
Arsenic-ATG opened this issue Aug 15, 2020 · 45 comments
Open

Changing the theme of the calculator #5

Arsenic-ATG opened this issue Aug 15, 2020 · 45 comments
Labels
enhancement New feature or request Front End Requires knowledge of front end development good first issue Good for newcomers

Comments

@Arsenic-ATG
Copy link
Owner

current theme of calculator is pretty basic, it would be amazing to have different themes of the same.

if anyone have any ideas regarding the same then they can discuss it here.

ideas may include changes in :-

  1. layout
  2. colour pallet
  3. overall design
@Arsenic-ATG Arsenic-ATG added enhancement New feature or request good first issue Good for newcomers Front End Requires knowledge of front end development labels Aug 15, 2020
@IshuSingh1
Copy link

The buttons are too edgy, round edges would be nicer.

@Arsenic-ATG
Copy link
Owner Author

Arsenic-ATG commented Sep 23, 2020

@IshuSingh1 thanks for the suggestion 😃

here is how calculator will look after the corners would be rounded👇

rounded corner theme

@vivek80801
Copy link
Contributor

Add some margin between buttons if possible.
Add some margin between border of calculator and buttons
Buttons looks to big. reduce padding on buttons.

I did not this issue first so I had opened another issue.

@Arsenic-ATG
Copy link
Owner Author

Thanks @vivek80801 for the suggestion 😃

I would be working on it, or if you want to work on it then do let me know.

@Arsenic-ATG
Copy link
Owner Author

Arsenic-ATG commented Oct 18, 2020

@ahmedellord56 changing the front end requires pure CSS skills : -

  1. Set up the Qt creator and get the project configured on as instructed in README.md file

  2. Go to mainwindow.ui inside the foler Forms

Screenshot 2020-10-18 at 6 50 52 AM

  1. Select the area you want to alter ( for example let say you want to change the colour of a button, so click on the required button) and then search for its stylesheets and alter them accordingly.

Screenshot 2020-10-18 at 6 57 50 AM

  1. Commit your changes to your fork and then open a pull request here.

If still something is left unclear regarding the project or Qt Creator then feel free to ask it here or open a new issue regarding the same.

⚠️ ScreenShots used here are taken on a system running macOS operating system, results may vary depending on the operating system you are running in your device

@vivek80801
Copy link
Contributor

@ahmedellord56

there is design button on left sidebar in qt creator. you can also use that.

@SakshiZ9
Copy link

Can I contribute to the project by changing the sequence of the numbers and also adding some more buttons?

@Arsenic-ATG
Copy link
Owner Author

@SakshiZ9 why not, go for it.🙂
I would be waiting for your contribution

@vivek80801
Copy link
Contributor

@SakshiZ9 we will love to see your contributions. If you have some questions feel free to ask. We will try to give answers as soon as possible.

@SakshiZ9
Copy link

I have made few changes and requested a pull request. Kindly let know to add any changes in the project.

@Arsenic-ATG
Copy link
Owner Author

@SakshiZ9 I can't see any pull request on this repository or on your fork, are you sure you pushed the commits to your remote repository after doing all the changes in your local repository. or either you have not committed those changes.

@SakshiZ9
Copy link

Okay. I tried it again, is there any pull request from my side?

@eraviral34
Copy link

eraviral34 commented Dec 3, 2020

Hi guys, i would like to contribute to this project
is there anything where I can contribute
@Arsenic-ATG
@vivek80801

@Arsenic-ATG
Copy link
Owner Author

Arsenic-ATG commented Dec 3, 2020

Hi guys, i would like to contribute to this project
is there anything where I can contribute
@Arsenic-ATG
@vivek80801

@eraviral34 thanks for choosing this repository to contribute, we love contributions 🙂

right now there are 3 places where you can contribute : -

  1. changing the front end of the calculator
  2. working on backend or adding more functionality to the calculator (like discussed in this issue ) if you want to add any other functionality then just open a new issue regarding the same.
  3. contributing on documentation :- if you find any fault/typo in documentation ( readme.md, contributing.md etc) or you think there is something this you could have explained better or something then feel free to change it and send a PR for us to review and merge

@eraviral34
Copy link

I would like to work more on a backend

@Arsenic-ATG
Copy link
Owner Author

@eraviral34 good, then you can either work on the scientific calculator issue or open a new one regarding any functionality you wish to add

@iPraveenParihar
Copy link

@Arsenic-ATG About the theme, we can try vibrant colors for operator buttons.
For example, I designed this simple CSS to show
image

@Arsenic-ATG
Copy link
Owner Author

Arsenic-ATG commented Jan 18, 2021

@iPraveenParihar that looks amazing. I would look forward to adding those soon.

Or

Are you interested in doing it yourself ?

@iPraveenParihar
Copy link

@Arsenic-ATG, Not now currently working on another project. And also am not familiar with QT

@vivek80801
Copy link
Contributor

@iPraveenParihar Thanks for redesigning the app. QT has GUI to do to design the app. all the code will generated by that QT itself.

@Arsenic-ATG Can I try to implement new design ?

@Arsenic-ATG
Copy link
Owner Author

Arsenic-ATG commented Jan 19, 2021

sure @vivek80801 , go for it.

btw, you can also override the CSS manually of the calculator according to you.

@sheharyaar
Copy link

sheharyaar commented Feb 12, 2021

@Arsenic-ATG Can we add a dark mode to the calculator?? I am suggesting for dark mode for buttons also.

@Arsenic-ATG
Copy link
Owner Author

@sheharyaar sure, go ahead. If you want any help from me about the project of Qt in general then feel free to ask.

@Paiz0
Copy link
Contributor

Paiz0 commented Sep 27, 2021

@Arsenic-ATG Hey, can I contribute to this and make a "matrix" (think green on black) styled theme?

@Arsenic-ATG
Copy link
Owner Author

@Arsenic-ATG Hey, can I contribute to this and make a "matrix" (think green on black) styled theme?

Sure go for it.

@Codebat-man
Copy link

<script language="javascript"></script>
  • {
    padding: 0;
    margin: 5px;
    text-align: center;
    }
    body {
    background-color:blue;
    }
    .calculator {
    width: 350px;
    height: 320px;
    background-color: #c0c0c0;
    box-shadow: 0px 0px 0px 10px #666;
    border: 5px solid black;
    border-radius: 10px;
    }
    #display {
    width: 320px;
    height: 40px;
    text-align: right;
    background-color: black;
    border: 3px solid white;
    font-size: 18px;
    left: 2px;
    top: 2px;
    color: #7fff00;
    }
    .btnTop{
    color: white;
    background-color: #6f6f6f;
    font-size: 14px;
    margin: auto;
    width: 50px;
    height: 25px;
    }
    .btnNum {
    color: white;
    background-color: black;
    font-size: 14px;
    margin: auto;
    width: 50px;
    height: 25px;
    }
    .btnMath {
    color: white;
    background-color: #ff4561;
    font-size: 14px;
    margin: auto;
    width: 50px;
    height: 25px;
    }
    .btnOpps {
    color: white;
    background-color: #ff9933;
    font-size: 14px;
    margin: auto;
    width: 50px;
    height: 25px;
    }
    function addChar(input, character) {
    if(input.value == null || input.value == "0")
    input.value = character
    else
    input.value += character
    }

function cos(form) {
form.display.value = Math.cos(form.display.value);
}

function sin(form) {
form.display.value = Math.sin(form.display.value);
}

function tan(form) {
form.display.value = Math.tan(form.display.value);
}

function sqrt(form) {
form.display.value = Math.sqrt(form.display.value);
}

function ln(form) {
form.display.value = Math.log(form.display.value);
}

function exp(form) {
form.display.value = Math.exp(form.display.value);
}

function deleteChar(input) {
input.value = input.value.substring(0, input.value.length - 1)
}
var val = 0.0;
function percent(input) {
val = input.value;
input.value = input.value + "%";
}

function changeSign(input) {
if(input.value.substring(0, 1) == "-")
input.value = input.value.substring(1, input.value.length)
else
input.value = "-" + input.value
}

function compute(form) {
//if (val !== 0.0) {
// var percent = form.display.value;
// percent = pcent.substring(percent.indexOf("%")+1);
// form.display.value = parseFloat(percent)/100 * val;
//val = 0.0;
// } else
form.display.value = eval(form.display.value);
}

function square(form) {
form.display.value = eval(form.display.value) * eval(form.display.value)
}

function checkNum(str) {
for (var i = 0; i < str.length; i++) {
var ch = str.charAt(i);
if (ch < "0" || ch > "9") {
if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
&& ch != "(" && ch!= ")" && ch != "%") {
alert("invalid entry!")
return false
}
}
}
return true
}

Screenshot (158)

@thegarvitrai
Copy link

What are the demands/requirements for themes that have to be met in this project?

I'm interested to contribute here

@Arsenic-ATG
Copy link
Owner Author

What are the demands/requirements for themes that have to be met in this project?

I'm interested to contribute here

There aren't any specific requirements for the theme apart from the fact that it should cover all the functional buttons on the calculator, feel free to take full creative freedom with the UI.

@QDaily117
Copy link

Hey @Arsenic-ATG I am new to open source issues, and was wondering if I could help with the front end of this calculator. Maybe add a Rainbow Theme or some other theme if that one has already been accomplished.

@Arsenic-ATG
Copy link
Owner Author

Hey @Arsenic-ATG I am new to open source issues, and was wondering if I could help with the front end of this calculator. Maybe add a Rainbow Theme or some other theme if that one has already been accomplished.

Hi @QDaily117 (sorry for late reply)
Could you please elaborate a bit about what exactly do you mean by rainbow theme ?
or better send in a PR with the changes and we can check/alter the theme during review process only. 👍

@Haricharan0310
Copy link

Hey! @Arsenic-ATG I'm new to open source and I was wondering If I could contribute on this Issue.
I was thinking maybe have no border between the buttons and change the font ,it makes them more clean in my opinion.

@Haricharan0310
Copy link

1664178901280
@Arsenic-ATG I was thinking more like this.

@Arsenic-ATG
Copy link
Owner Author

@Haricharan0310 sure, feel free to alter the theme.

plus I am planning to register this project in hacktober fest, so if you are also registering and planning to make this contribution count there also then do let me know.

@Haricharan0310
Copy link

@Arsenic-ATG Yes, I'm interested in registering to the hacktober fest, thank you for this Information.

@Arsenic-ATG
Copy link
Owner Author

@Arsenic-ATG Yes, I'm interested in registering to the hacktober fest, thank you for this Information.

nice to hear that, just make sure to open the PR after October 1st

@Haricharan0310
Copy link

Sure, thanks again! @Arsenic-ATG

@PJayakrishnan
Copy link
Contributor

PJayakrishnan commented Sep 27, 2022

Hi @Arsenic-ATG @everyone, I am interested in contributing to this project. Will that be cool if I change the MainWindow back ground color? If yes, do anyone have any suggestions with the color which go hand in hand with other button colors?

I did find a small bug in the back end as well. I cam up with a solution. Can we discuss it here itself or is there some other way?

@Arsenic-ATG
Copy link
Owner Author

Hi @Arsenic-ATG https://github.com/everyone, I am interested in contributing to this project. Will that be cool if I change the MainWindow back ground color? If yes, do anyone have any suggestions with the color which go hand in hand with other button colors?
@PJayakrishnan just make a PR regarding the same and we can see how it looks then.

I did find a small bug in the back end as well. I cam up with a solution. Can we discuss it here itself or is there some other way?

feel free to open a new issue regarding the same

@PJayakrishnan
Copy link
Contributor

@PJayakrishnan just make a PR regarding the same and we can see how it looks then.

Screenshot (99)
I tried this color for some contrast between buttons. I am not that artistic so other people's suggestions might be more good.

feel free to open a new issue regarding the same

I will do that.

@Kashish-gitt
Copy link

hii @Arsenic-ATG i am interested in contributing in this project is there anything in which i can contribute?

@Arsenic-ATG
Copy link
Owner Author

hii @Arsenic-ATG i am interested in contributing in this project is there anything in which i can contribute?

hi @Kashish-gitt , you can always update the current theme and update it too look much better, or if you want you can also expand the functionality of the calculator by adding more arithmetic functions to it ( like log or even brackets () to specify precedence ), the later would come under #3 but you can always open a new issue and add a small functionality on your own.

@Anteneh13
Copy link
Contributor

Im interested in contributing to this project if im still able too?

@tanmay-devv
Copy link

Hey @Arsenic-ATG are there any contributions that I can make to this?

@safe049
Copy link

safe049 commented Jul 22, 2024

@Arsenic-ATG Hello,i drew a lot and got some ideas on the colors, may i contributing to this project too?

@Manas-salian
Copy link

@Haricharan0310 hello, can i still contribute to this isssue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request Front End Requires knowledge of front end development good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests