LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Redesign groundwork, homepage, search #870

Merged
neb-b merged 4 commits from redesign-wip into master 2018-01-09 02:15:03 +01:00
Conversation 2 Commits 4 Files changed 66 +2089 -1452
neb-b commented 2017-12-14 07:46:39 +01:00 (Migrated from github.com)
Copy link

Redesign

This is mostly basic groundwork (clean up) + header/home changes. Ignore the incomplete stuff for now, I don't want the PR to be 5k changes. I will continue to move a lot around and discuss anything before something is decided.

There is a lot going on in this PR. Future PR's should be smaller/more concise feature sets

Component improvement goals

Avoid internal state
Avoid unnecessary HTML markup (<React.Fragment> ftw)
Props driven styling for components over adding classes (see src/renderer/component/link)

Style improvement goals

BEM styling used across the app
Add basic style guide with colors, padding sizes, headers, buttons, philosophy (ex. Always prefer {margin,padding} {top,left} over {bottom,right})

Flow

I've (partially) added flow in a lot of places, I think I would like to come back at the end and spend some time just cleaning it up/ensuring everything looks good. Right now I'm mostly just getting the flow checker to pass in components I add it to. Ex: Adding a claim type as claim: { uri: string } if that is the only value used, instead of creating a global claim type. That might end up being more work than just spending a good amount of time on Types before I continue to do anything else. I'll think about it.

Main things to look at

src/renderer/component/wunderbar
src/renderer/redux/*/search
src/renderer/component/header
src/renderer/page/discover
src/renderer/component/link (still need to change link to button)
src/renderer/component/common/category-list (lots of changes to this)
src/renderer/component/fileCard
src/renderer/scss/gui.scss

What to ignore (for now)

Colors
Any src/renderer/page/* files that aren't src/page/discover I'll get to these next
src/renderer/scss/_vars.scss

# Redesign This is mostly basic groundwork (clean up) + header/home changes. Ignore the incomplete stuff for now, I don't want the PR to be 5k changes. I will continue to move a lot around and discuss anything before something is decided. There is a lot going on in this PR. Future PR's should be smaller/more concise feature sets ## Component improvement goals Avoid internal state Avoid unnecessary HTML markup (<React.Fragment> ftw) Props driven styling for components over adding classes (see `src/renderer/component/link`) ## Style improvement goals BEM styling used across the app Add basic style guide with colors, padding sizes, headers, buttons, philosophy (ex. Always prefer {margin,padding} {top,left} over {bottom,right}) ## Flow I've (partially) added flow in a lot of places, I think I would like to come back at the end and spend some time just cleaning it up/ensuring everything looks good. Right now I'm mostly just getting the flow checker to pass in components I add it to. Ex: Adding a `claim` type as `claim: { uri: string }` if that is the only value used, instead of creating a global `claim` type. That might end up being more work than just spending a good amount of time on Types before I continue to do anything else. I'll think about it. ## Main things to look at `src/renderer/component/wunderbar` `src/renderer/redux/*/search` `src/renderer/component/header` `src/renderer/page/discover` `src/renderer/component/link` (still need to change `link` to `button`) `src/renderer/component/common/category-list` (lots of changes to this) ` src/renderer/component/fileCard` `src/renderer/scss/gui.scss` ## What to ignore (for now) Colors Any `src/renderer/page/*` files that aren't `src/page/discover` I'll get to these next `src/renderer/scss/_vars.scss`
liamcardenas (Migrated from github.com) reviewed 2017-12-14 07:46:39 +01:00
liamcardenas commented 2017-12-14 07:51:15 +01:00 (Migrated from github.com)
Copy link

Looking great!!

Looking great!!
neb-b (Migrated from github.com) reviewed 2018-01-04 06:37:34 +01:00
src/renderer/component/fileCard/view.jsx
neb-b (Migrated from github.com) commented 2018-01-04 06:37:34 +01:00
Copy link

still need to figure this out. will get it when we determine proper colors/how this will look. ignore for now

still need to figure this out. will get it when we determine proper colors/how this will look. ignore for now
neb-b (Migrated from github.com) reviewed 2018-01-04 06:38:09 +01:00
src/renderer/component/fileTile/view.jsx
@ -1,3 +1,4 @@
/* eslint-disable */
neb-b (Migrated from github.com) commented 2018-01-04 06:38:09 +01:00
Copy link

Ignore this file

I'll come back to it on a different page

Ignore this file I'll come back to it on a different page
neb-b (Migrated from github.com) reviewed 2018-01-04 06:45:39 +01:00
src/renderer/component/wunderbar/view.jsx
neb-b (Migrated from github.com) commented 2018-01-04 06:45:39 +01:00
Copy link

I'm not sure I like this, we need to choose to onSearch based on some flag for the Search for "{query}" suggestion

I'm not sure I like this, we need to choose to `onSearch` based on some flag for the `Search for "{query}"` suggestion
neb-b (Migrated from github.com) reviewed 2018-01-04 06:46:40 +01:00
src/renderer/page/channel/view.jsx
@ -1,3 +1,4 @@
/* eslint-disable */
neb-b (Migrated from github.com) commented 2018-01-04 06:46:40 +01:00
Copy link

ignore

ignore
neb-b (Migrated from github.com) reviewed 2018-01-04 06:47:34 +01:00
src/renderer/page/file/view.jsx
@ -1,3 +1,4 @@
/* eslint-disable */
neb-b (Migrated from github.com) commented 2018-01-04 06:47:34 +01:00
Copy link

ignore

ignore
neb-b (Migrated from github.com) reviewed 2018-01-04 06:47:49 +01:00
src/renderer/page/search/view.jsx
@ -1,15 +1,21 @@
// @flow
neb-b (Migrated from github.com) commented 2018-01-04 06:47:49 +01:00
Copy link

ignore

ignore
neb-b (Migrated from github.com) reviewed 2018-01-04 06:47:58 +01:00
src/renderer/page/show/view.jsx
@ -1,17 +1,24 @@
/* eslint-disable */
neb-b (Migrated from github.com) commented 2018-01-04 06:47:58 +01:00
Copy link

ignore

ignore
neb-b (Migrated from github.com) reviewed 2018-01-04 06:52:04 +01:00
src/renderer/scss/_gui.scss
neb-b (Migrated from github.com) commented 2018-01-04 06:52:04 +01:00
Copy link

Still figuring out what font-weights we should use across the app.

Ignore for now

Still figuring out what font-weights we should use across the app. Ignore for now
neb-b (Migrated from github.com) reviewed 2018-01-04 06:55:26 +01:00
src/renderer/scss/_vars.scss
@ -6,6 +6,8 @@ $width-page-constrained: 800px;
$text-color: #000;
neb-b (Migrated from github.com) commented 2018-01-04 06:55:26 +01:00
Copy link

ignore the weird stuff going on here. still need to determine proper colors to use

ignore the weird stuff going on here. still need to determine proper colors to use
neb-b (Migrated from github.com) reviewed 2018-01-04 06:57:59 +01:00
src/renderer/scss/component/_card.scss
@ -2,194 +2,19 @@
margin-left: auto;
neb-b (Migrated from github.com) commented 2018-01-04 06:57:59 +01:00
Copy link

ignore this for now, it will change a lot

I've commented out a lot to see what we actually need. Will be better suited for a review after I work on the file page

ignore this for now, it will change a lot I've commented out a lot to see what we actually need. Will be better suited for a review after I work on the file page
kauffj (Migrated from github.com) reviewed 2018-01-04 23:51:10 +01:00
kauffj (Migrated from github.com) left a comment
Copy link

Definitely a lot to work on but looks like a promising start! Some initial feedback.

Definitely a lot to work on but looks like a promising start! Some initial feedback.
src/renderer/component/app/view.jsx
@ -16,3 +26,3 @@
const { alertError } = this.props;
document.addEventListener('unhandledError', event => {
// TODO: create type for this object
kauffj (Migrated from github.com) commented 2018-01-04 23:39:40 +01:00
Copy link

What is (this: any) doing here? I noticed this in several places.

What is `(this: any)` doing here? I noticed this in several places.
src/renderer/component/common.js
kauffj (Migrated from github.com) commented 2018-01-04 23:42:55 +01:00
Copy link

Great call to refactor this file and eliminate this "common" bullshit :)

Any reason not to just make these normal / typical first-class components?

Great call to refactor this file and eliminate this "common" bullshit :) Any reason not to just make these normal / typical first-class components?
src/renderer/constants/action_types.js
@ -88,9 +88,13 @@ export const FETCH_AVAILABILITY_COMPLETED = 'FETCH_AVAILABILITY_COMPLETED';
export const FILE_DELETE = 'FILE_DELETE';
// Search
kauffj (Migrated from github.com) commented 2018-01-04 23:46:37 +01:00
Copy link

IMO no need for GET_ in this name.

IMO no need for `GET_` in this name.
src/renderer/redux/actions/search.js
kauffj (Migrated from github.com) commented 2018-01-04 23:46:03 +01:00
Copy link

Can you refactor these to the proper names while working on this?

Can you refactor these to the proper names while working on this?
src/renderer/scss/_gui.scss
@ -2,0 +5,4 @@
@font-face {
font-family: 'Metropolis';
font-weight: normal;
font-style: normal;
kauffj (Migrated from github.com) commented 2018-01-04 23:50:33 +01:00
Copy link

This started as the equivalent of an "everything" CSS file and likely contains some of the worst CSS in the project. Please do your best to refactor as you work on this.

This started as the equivalent of an "everything" CSS file and likely contains some of the worst CSS in the project. Please do your best to refactor as you work on this.
src/renderer/scss/_gui.scss
@ -2,0 +11,4 @@
}
@font-face {
font-family: 'Metropolis';
kauffj (Migrated from github.com) commented 2018-01-04 23:49:20 +01:00
Copy link

I think we are packaging some Metropolis font files we don't actually use. Intentional?

I think we are packaging some Metropolis font files we don't actually use. Intentional?
src/renderer/scss/component/_header.scss
@ -64,1 +50,4 @@
}
.wunderbar__suggestion {
padding: 5px;
kauffj (Migrated from github.com) commented 2018-01-04 23:47:35 +01:00
Copy link

Have you tried this larger? Or just using all available space? Already, some results get cut-off, and this seems unnecessary when there is plenty of real estate.

Have you tried this larger? Or just using all available space? Already, some results get cut-off, and this seems unnecessary when there is plenty of real estate.
neb-b (Migrated from github.com) reviewed 2018-01-05 07:46:00 +01:00
src/renderer/scss/_gui.scss
@ -2,0 +5,4 @@
@font-face {
font-family: 'Metropolis';
font-weight: normal;
font-style: normal;
neb-b (Migrated from github.com) commented 2018-01-05 07:46:00 +01:00
Copy link

I plan to get rid of or move all of the specific styling. Then keep this is the global html/app-wide styling

I plan to get rid of or move all of the specific styling. Then keep this is the global html/app-wide styling
neb-b (Migrated from github.com) reviewed 2018-01-05 07:49:14 +01:00
src/renderer/scss/_gui.scss
@ -2,0 +11,4 @@
}
@font-face {
font-family: 'Metropolis';
neb-b (Migrated from github.com) commented 2018-01-05 07:49:14 +01:00
Copy link

I figured would just keep them all in for now so I didn't have to copy them in as I test them. We won't end using a lot of these.

I figured would just keep them all in for now so I didn't have to copy them in as I test them. We won't end using a lot of these.
neb-b (Migrated from github.com) reviewed 2018-01-05 07:53:12 +01:00
src/renderer/redux/actions/search.js
neb-b (Migrated from github.com) commented 2018-01-05 07:53:12 +01:00
Copy link

Yep, I'll add that

Yep, I'll add that
neb-b (Migrated from github.com) reviewed 2018-01-05 07:56:41 +01:00
src/renderer/component/common.js
neb-b (Migrated from github.com) commented 2018-01-05 07:56:41 +01:00
Copy link

I have been thinking of /common/* simple utility components. Then we can avoid the all of the connect(null, null)(Component) index.js files which a few components have.

I have been thinking of `/common/*` simple utility components. Then we can avoid the all of the `connect(null, null)(Component)` index.js files which a few components have.
neb-b (Migrated from github.com) reviewed 2018-01-05 08:29:21 +01:00
src/renderer/scss/component/_header.scss
@ -64,1 +50,4 @@
}
.wunderbar__suggestion {
padding: 5px;
neb-b (Migrated from github.com) commented 2018-01-05 08:29:21 +01:00
Copy link

Yeah I think we will have it stretch to fill the space

Yeah I think we will have it stretch to fill the space
neb-b (Migrated from github.com) reviewed 2018-01-05 08:32:50 +01:00
src/renderer/component/app/view.jsx
@ -16,3 +26,3 @@
const { alertError } = this.props;
document.addEventListener('unhandledError', event => {
// TODO: create type for this object
neb-b (Migrated from github.com) commented 2018-01-05 08:32:50 +01:00
Copy link

Without it there are flow issues. Got the fix from here https://github.com/facebook/flow/issues/1517

Without it there are flow issues. Got the fix from here https://github.com/facebook/flow/issues/1517
neb-b commented 2018-01-09 02:14:51 +01:00 (Migrated from github.com)
Copy link

Just going to merge this since I have a few new commits locally. The next PR will be mostly touching the same files so any issues can be brought up on that.

Just going to merge this since I have a few new commits locally. The next PR will be mostly touching the same files so any issues can be brought up on that.
Sign in to join this conversation.
Reviewers
No reviewers
liamcardenas
Labels
Clear labels   
accessibility

   
app-parity

   
area: creator

   
area: daemon

   
area: design

   
area: devops

   
area: discovery

   
area: docs

   
area: installer

   
area: internal

   
area: livestream

   
area: performance

   
area: proposal

Work is part of a proposal

  
area: reposts

   
area: rewards

   
area: search

   
area: security

   
area: subscriptions

   
area: sync

   
area: ux

   
area: viewer

   
area: wallet

   
BEAMER

Beamer is waiting on you!

  
channel

   
comments

   
community PR

   
consider soon

Discuss this issue at the next planning meeting, then remove this label

  
core team

   
css

   
dependencies

   
electron

   
Epic

   
feature request

   
first-timers-only

   
good first issue

   
hacktoberfest

Welcome to Hacktoberfest

  
help wanted

   
hub-dependent

   
icebox

Long-term storage

  
Invalid

   
level: 0

   
level: 1

No knowledge of the existing code required

  
level: 2

Some knowledge of the existing code is recommended

  
level: 3

Significant knowledge of the existing code is recommended

  
level: 4

Intimate knowledge of the existing code is recommended

  
merge when green

   
needs: exploration

Solution unclear, needs research

  
needs: grooming

Issue needs to be groomed before work can start

  
needs: priority

Priority level needs to be defined

  
needs: repro

Issue needs step-by-step instructions on how to reproduce in latest code

  
needs: tech design

Needs technical design signoff before implementation can begin

  
notifications

   
odysee

   
on hold

Temporarily paused

  
playlists

   
priority: blocker

Issue is blocking release, do ASAP

  
priority: high

Work needs to be moved into sprint ASAP

  
priority: low

Work should be done but can stay in the backlog for now

  
priority: medium

Work needs to be done within 2-3 sprints

  
protocol dependent

   
recsys

   
redesign

general redesign not prioritize for anyone release

  
regression

   
resilience

   
sdk dependent

Requires work on lbry-sdk repo

  
Tom's Wishlist

   
trending

   
type: bug

Existing functionality is wrong or broken

  
type: discussion

A conversation. No specific changes requested

  
type: improvement

Existing (or partially existing) functionality needs to be changed

  
type: new feature

New functionality that does not exist yet

  
type: refactor

Minimal user-visible changes, but significant internal work

  
type: task

Either work that's not related to the code, or a small chore that does not fit into other categories

  
type: testing

Solution needs additional user testing

  
unplanned

Work that was not planned into the spirnt, took priority over planned work

  
windows
No labels
accessibility
app-parity
area: creator
area: daemon
area: design
area: devops
area: discovery
area: docs
area: installer
area: internal
area: livestream
area: performance
area: proposal
area: reposts
area: rewards
area: search
area: security
area: subscriptions
area: sync
area: ux
area: viewer
area: wallet
BEAMER
channel
comments
community PR
consider soon
core team
css
dependencies
electron
Epic
feature request
first-timers-only
good first issue
hacktoberfest
help wanted
hub-dependent
icebox
Invalid
level: 0
level: 1
level: 2
level: 3
level: 4
merge when green
needs: exploration
needs: grooming
needs: priority
needs: repro
needs: tech design
notifications
odysee
on hold
playlists
priority: blocker
priority: high
priority: low
priority: medium
protocol dependent
recsys
redesign
regression
resilience
sdk dependent
Tom's Wishlist
trending
type: bug
type: discussion
type: improvement
type: new feature
type: refactor
type: task
type: testing
unplanned
windows
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: LBRYCommunity/lbry-desktop#870
No description provided.
Delete branch "redesign-wip"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?