stefan-niedermann / nextcloud-deck

📋 Android client for nextcloud deck app
https://play.google.com/store/apps/details?id=it.niedermann.nextcloud.deck.play
GNU General Public License v3.0
499 stars 53 forks source link

Implement free color chooser for board creation #70

Closed stefan-niedermann closed 4 years ago

stefan-niedermann commented 5 years ago

Currently there is a hard coded set of colors which can be chosen when one creates a new board.

This issue is about implementing a "last" color, which displays a pipette to choose a arbitrary color when the given colors are not enough.

If someone wants to work on this issue, please start a discussion and offer some scribble of how it could look like - let's talk about it first and then start implementing it and providing a PR. It would be a pitty if work would not be accepted due to different design ideas :rocket:

randy-jr-olive commented 4 years ago

I've had a look at how the web UI does color picking. They use a set of default colors and a last option with a color picker that launches the color wheel to choose a custom color.

Screenshot from 2019-12-24 11-03-49

I think, for simplicity, keeping a similar UI pattern would work in the app for Android as well. It could look like this:

color picker

As far as what the color wheel looks like after that, I've found a few libraries online that have implemented a custom color choose. This one seems nice:

https://github.com/skydoves/ColorPickerPreference

I'm not sure how you feel about using other peoples libraries, but I tend towards finding stuff like this to use when I can, and adapting if need be. Let me know if that works for this issue.

stefan-niedermann commented 4 years ago

I agree in all points and had myself already a look at this lib, too :)

randy-jr-olive commented 4 years ago

I've added the code to create a custom color picker icon. The code also exists to detect if the selected color is custom and to color the icon accordingly. Next is to implement the actual color picker activity to choose a custom color.

Here's what it looks like so far:

Screenshot from 2019-12-25 14-56-39

When there is a custom color:

Screenshot from 2019-12-25 14-55-58

When there is no custom color:

Screenshot from 2019-12-25 14-56-27

desperateCoder commented 4 years ago

Looks neat! Thanks! I'm a terrible UI designer, but wouldn't it be even nicer if the custom color is displayed at first position, checked, and the color picker displayed just normal? Just a suggestion, can't really tell if this is what a user would want 😅

stefan-niedermann commented 4 years ago

No @desperateCoder, we should better provide some basic colors to choose from (as it is now). Most people will not use the picker at all, it's an edgecase.

Better provide a simple solution for most people instead od the most configurable solution which would be oversized for majority of the users.

randy-jr-olive commented 4 years ago

My plan was to just try and match what the Deck web UI does, to reduce the differences between the 2 apps as much as possible. Helps keep things sorted in my head.

desperateCoder commented 4 years ago

Feel free I'm absolutely happy with your solution! Good job!

randy-jr-olive commented 4 years ago

A quick prototype of the custom color picker. Still a few things to tweak on it (Like having it remember the last color and set the color wheel position back to that when re-opened).

I've made sure that the custom colors are also saved and changed in the web UI correctly.

customColors01

stefan-niedermann commented 4 years ago

looks great so far :) maybe already open a draft PR so i can have a look at the code?

desperateCoder commented 4 years ago

Nice! Thanks!