practical-startpage
practical-startpage copied to clipboard
PD75
Dark Theme/Custom Themes
This is pretty cool...im the guy that asked about the dark theme. Is this a place that you ask for help?? I know nothing about all this. The only geekiest thing im into is running gaming servers.
Okay...did my research on waffle.io ....pretty cool....so its basically a project manager that others can interact with you on.
@atheistics yes, waffle is a layout for Github which holds the code and backlog, just a lot easier to handle the backlog in waffle then Github directly. BTW, I did not know anything about Github until I put Practical Startpage here early this year.
@atheistics got a potential designer to help me with colors will meet to review this coming week.
Hi - I actually left a similar comment on the google web store page until I realized this was all open source on GitHub. I can get this going as well - I'm working on getting the package installed/running on my own machine so I can tinker. I am not really familiar with all the intracies of npm/gulp
What is the build process to take the source and tinker/test on my own?
@slapyak
That would be great, I am a bit swamped with other stuff at the moment and there is still a complicated bug I need to trash out..
To develop you don't really need gulp it is used just for release. You just load the appdev folder in chrome and code away. Gulp is just for release.
The colors of all menus etc can easily be changed if there was just an interface to do so. The color variables already load dynamically and are stored in the chrome storage. The background will be a bit more tricky but check out http://semantic-ui.com/. And last step will be to make final adjustments with custom CSS rules.
FYI. I am working on this and making pretty good progress. I have the interface set up and tied into a preview element. I expect to have it capable of applying a theme sometime next week.
Layout -- http://imgur.com/a/bqUiB -- ugly colors to simply show what's going on.
Hell yea...this is going to be awesome ...great work. Cant wait to candy up my practical start page!
Sure. You can pull it from my github. At this time only a few buttons are actually connected to the preview, and there's no way to skin the actual interface. I need to create new tags for a majority of the components - which is the step I'm working on now. Give it until Monday and you'll be able to apply a usable theme throughout the site.
@atheistics once you have the the local copy from github, Load the appdev folder from chrome extensions and you can test. You also down load a zip repository from github.
@slapyak I saw your good progress. It would be great when you are done if we could review the code together. This is my first major app so any thoughts on coding etc. would be appreciated
Sure thing. I'm actually working to keep it completely modular. So far I think I've only had to modify one file (in addition to adding references and calls where appropriate).
On Fri, Aug 26, 2016 at 2:59 PM, Paul [email protected] wrote:
@slapyak https://github.com/slapyak I saw your good progress. It would be great when you are done if we could review the code together. This is my first major app so any thoughts on coding etc. would be appreciated
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PD75/practical-startpage/issues/102#issuecomment-242822419, or mute the thread https://github.com/notifications/unsubscribe-auth/AUEaEdTd5v3nGfxuubsvMA6tjE-QGQ8wks5qjzeIgaJpZM4IlHh9 .
Well, my thoughts may not be worth much. I'm not a pro by any stretch. I write little apps to make my life easier at home and work. I like to approach things with a modular approach and try to make things as compartmentalized as possible. It looks like you've done a good job doing the same with this app. And while I don't have enough knowledge to know what is from the template and what is your original creation, the overall setup of the project dev and working directories seems to make sense.
As far as you reviewing what I've put together prior to inclusion, I've taken the theme generated by semantic and basically written some additional css to go over top. I'm sure it's not ideal coding procedure, but I'm basically overruling the semantic classes and redefining elements - including changing elements labeled as 'black' and turning that into the themed secondary'bar' color.
I can forward the markup i put together to identify what areas should be controlled together and walk you through what is happening in the code. The simple explanation is that there are css variables called out in the css file. The javascript picks up the selected colors and stores it in the appropriate variables, changing the colors on the fly. This trick luckily works in Firefox and Chrome, but IE has limited support from what I've read. The highlight and active colors for each user selected type is also generated in JS and stored back into the CSS variable.
As of right now, the color selection, preview, and application are all working. The only thing I have not tackled is how to store the changes and make them persistent for each user. Perhaps adding a few pre-defined themes would be a good idea as well. That's simple enough with a few tuples and a dropdown menu.
Dig it: http://imgur.com/a/gXdve https://github.com/slapyak/practical-startpage/tree/feature_theming
@slapyak Looked good last screen shots! How is it going? Have you figured out how to save or do you want tome guidance?
Thanks. I think it should be pretty compartmentalized. I had to tap into the layout JS file to get it loaded at startup. And there are a few spots where an !important flag was overriding my theming in another CSS file or two. But most of the actual work is in the options/appearance directory.
The function may be something to discuss - it loads the last applied theme on startup. When you go into the options page, you are shown the currently applied theme. From that point on, any changes you make are held in the options pane (in case you don't apply, you still won't have to redo any changes). I think another button to reset the preview might be good. I already have a function that does that, just need to apply it to a button.
Let me know what you think. I can squash the commits down and send over a pull request whenever you think it's ready to integrate.
@slapyak , finally got time to look at it, looks great. Do you have time to walk through the changes? We could use Skype and share screens, Would be great if you had the time. I am in Europe, so I guess morning would be best your time, saw your profile is EST.
Yeah. I can do that. I could do around 5pm EST any weekday, or sometime saturday morning.
On Wed, Sep 28, 2016 at 10:26 AM, Paul [email protected] wrote:
@slapyak https://github.com/slapyak , finally got time to look at it, looks great. Do you have time to walk through the changes? We could use Skype and share screens, Would be great if you had the time. I am in Europe, so I guess morning would be best your time, saw your profile is EST.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PD75/practical-startpage/issues/102#issuecomment-250182124, or mute the thread https://github.com/notifications/unsubscribe-auth/AUEaEdqHTGlKZ9EXK5PP3cQiJjzbvsdiks5qunj4gaJpZM4IlHh9 .
@slapyak,
I sent you a mail, lets aim for saturday if that works for you.
In the mean time here are some comments:
- All text needs to be translatable except examples
- Use directive ps-i18n the actual words you need to put in _locales/en/message.json,
- Reuse if there is already text, other wise one or two words alphabetically in the first section, longer code c_o_
- You need to update the extension to load the new text from _ locales
- Needs to register with storage options to allow synchronization.
- Need to work down the amount of DOM manipulation and find Angular alternatives, otherwise the code will be hard to maintain, and prone to breaking when changes are made to layout.
OK.
- This is easy enough. I had just put it off until after the functionality was complete.
- This was the part I had the most difficulty with - I'm not sure exactly where to add this registration. Could you point me to an example of another function which already does this properly?
- If you're referring to the CSS, there's not really a good way around this. The issue is that the semantic ui stuff is generated on the fly and there's no good way to plug into that system at runtime - which is obviously where you need to be to change an applied theme. If you mean the example 'page' in the settings dialogue, then I think that could be changed, though I basically hard-coded it to make sure that everything we needed to see was present. I didn't see an advantage of generating that dynamically. It still references the semantic infrastructure - so if you were to change the semantic layout style, the examples would change as well.
On Mon, Oct 3, 2016 at 4:46 AM, Paul [email protected] wrote:
@slapyak https://github.com/slapyak,
I sent you a mail, lets aim for saturday if that works for you.
In the mean time here are some comments:
- All text needs to be translatable except examples
- Use directive ps-i18n the actual words you need to put in _locales/en/message.json,
- Reuse if there is already text, other wise one or two words alphabetically in the first section, longer code c_o_
- You need to update the extension to load the new text from _ locales
- Needs to register with storage options to allow synchronization.
- Need to work down the amount of DOM manipulation and find Angular alternatives, otherwise the code will be hard to maintain, and prone to breaking when changes are made to layout.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PD75/practical-startpage/issues/102#issuecomment-251055585, or mute the thread https://github.com/notifications/unsubscribe-auth/AUEaEQv6HvW7MskRPjSF-shLYLH9lgq3ks5qwMD4gaJpZM4IlHh9 .
This is 2 legit!!! Exactly what i was looking for! By the way I am @atheistics , i created a new github for my gaming community so thats why my name has changed. Great work guys!!! Does anyone here mess with mysql by chance?
@atheistics , I do SQL, mostly T-SQL, but the dialects are not so different. But the actual installation I don't really have any experience, just ones or twice.
@atheistics looking for time to give @slapyak input, started freelance consulting so time is very limited.
Oh that's awesome PD75! Congrats on the consulting. I thought about getting into IT consulting myself. May pursue that one day. Any way. Love the work you all have done. Im new to all this github jazz but learning new things every day. So from what i understand.... i can basically Fork the themed version and make one of my own? I would like to mess around with it and add custom things to it to make it rediculous looking for myself. Also i enabled the google badge. how do i add more of them?
@x-cessive the badges are self-sufficient you need to create a angular directive add it to JSON in badges,constants.js if you want to save settings I need to add instruction for @slapyak as well, but it was some time since I did it so I will need to spend some time.
Hey @PD75 can i rewrite some things in this to use it as a collaboration tool for my gaming community staff? What i was thinking is that i could use the "whats new" area to post links and such to the tools we use while editing our servers and such. And the "home" button for our website shortcut. And the "Bug" area that links to our github. So basically when we get new staff we would have them download the private chrome extension to use as a guide of sorts. I would give full credit to you guys of course. Just thought it would make a great addon to our project we have going on. :)