Move buttons off of video

EnCiv / undebate

Not debates, but recorded online video Q&A with candidates so voters can quickly can get to know them, for every candidate, for every election, across the US.

Other

20 stars 14 forks source link

Move buttons off of video #177

Open ddfridley opened 4 years ago

ddfridley commented 4 years ago

move the button bar, and the recorder button bar, to the bottom of the display - off the video window, and use these rectangular buttons with words in them.

Rectangle Buttons.zip

The buttons should be at the bottom of the screen, below the speaker window.

The other parts of the screen should move up accordingly.

MrNanosh commented 4 years ago

[ ] buttons need to be converted to a button instead of being a div for screen readers and accessibility
[ ] buttons need to have aria labels

ddfridley commented 4 years ago

figma file for original design ideas: https://www.figma.com/file/jtIoqpnhGfBEAHSVLAIVf4/undebate_UI?node-id=582%3A425

figma file of Tracy's layout: https://xd.adobe.com/view/628227f4-05fd-46f1-548c-83a661b5e7e3-14b3/

ddfridley commented 4 years ago

@tianchili11 @Jack-Pham @adelinepetty see links above

adelinepetty commented 4 years ago

See link for updated designs on buttons.

Made the text sentence case for legibility and space
Made the icons on buttons consistent (monoline style)

poornaraob commented 4 years ago

07/15: Thong is working on this task along with Tracy and Adeline:

Next step on clicking the Donate button @ddfridley
Share button to be moved out of the video @Jack-Pham
The Figma file for the different icons for video button bar (link above) - @adelinepetty
UI team to create svg file to help development team on integrating to the react - @adelinepetty
Change camera button option to be reviewed by UI team. Create a separate ticket for this button UI creation. @poornaraob

ddfridley commented 4 years ago

@Jack-Pham At build time, .svg files that are in assets/svg are converted into react components and placed into app/svgr as .js file. So when you get svg files from @adelinepetty you can put them in assets. Note that you can't make changes to the .js files manually - they will get over written. So, If you want to make changes to the colors or something - you to do it with styles or classes. app/components/begin-button shows a way to useStyles to alter what's in the svg - without changing the component.

adelinepetty commented 4 years ago

@ddfridley Do you need the icon and text as 1 component or just the button for the screen reader?

Also, can we do this as a hover state? Please hover over the play button.

ddfridley commented 4 years ago

My preference would be for one .svg file with the icon and the text. This way, if we want to change it, we just need to change the svg file.

For the hover state, I think you are changing the radius of the circle. I think that we can use CSS classes to change the radius of the circle on hover. I'm sure we can change the overall size of the whole button by a small amount, on hover and it would have a similar visual effect.

On 7/16/2020 10:56 AM, adelinepetty wrote:

@ddfridley https://github.com/ddfridley Do you need the icon and text as 1 component or just the button for the screen reader?

Also, can we do this as a hover state? Please hover over the play button https://www.figma.com/proto/NEK5hGsc3R5PU64yTeCGZ8/undebate?node-id=23%3A371&viewport=3798%2C-688%2C0.7334265112876892&scaling=contain.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/EnCiv/undebate/issues/177#issuecomment-659573946, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAZJ53ZB4M2D7DLKINSJGKDR345L3ANCNFSM4NAMCTXQ.

adelinepetty commented 4 years ago

here you go
updated buttons.zip

thong-pham commented 4 years ago

@ddfridley @adelinepetty I don't see any change when I hover the buttons. So, I just propose to change the color of the buttons.

adelinepetty commented 4 years ago

Sorry about that @Jack-Pham, the buttons were disconnected. Hover over play here. Per @ddfridley comment, instead of changing the button, we can get a similar effect by increasing the overall button size. In the prototype I increased it by 8px. Thanks!

poornaraob commented 4 years ago

07/22: Work in progress. New design will be shared by @adelinepetty & @tianchili11 for @Jack-Pham to work on.

adelinepetty commented 4 years ago

@Jack-Pham updated hover state button HEX #565656. I added a border but up to you/team if you want to include. I checked with the color blink simulation and contrast, so we should be good there. Thanks!

ddfridley commented 4 years ago

@tianchili11 we need a Stop button, Redo, and Finished speaking button - image with text underneath.

ddfridley commented 3 years ago

@tianchili11 or @kawill can either of you help with this? The problem is that that there is an inherent offset on the left and top of the button. (top looks like 8). So if you render the svg file, there is a white space between the top of the black circle, and the top of the viewBox it is in. In the undebate code, I am setting the space between the button and what's above it - but having the added space inside the button makes it a difficult calculation. The figma files mentioned above are where the svg files came from.

ddfridley commented 3 years ago

Which button layout looks better. Large or Small

Large:

Small: