Redesign groundwork, homepage, search #870

neb-b · 2017-12-14T06:46:39Z

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 · 2017-12-14T06:51:15Z

Looking great!!

neb-b · 2018-01-04T05:37:34Z

src/renderer/component/fileCard/view.jsx

        </div>
-        {obscureNsfw && this.state.hovered && <NsfwOverlay />}
+        {obscureNsfw && <NsfwOverlay />}


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

neb-b · 2018-01-04T05:38:09Z

src/renderer/component/fileTile/view.jsx

@@ -1,11 +1,12 @@
+/* eslint-disable */


Ignore this file

I'll come back to it on a different page

neb-b · 2018-01-04T05:45:39Z

src/renderer/component/wunderbar/view.jsx

-      this._input.value = this.state.address; // this causes cursor to go to end of input
+    // if they choose the "search for {value}" in the suggestions
+    // it will contain the {query}?search
+    const choseDoSuggestedSearch = value.endsWith('?search');


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 · 2018-01-04T05:46:40Z

src/renderer/page/channel/view.jsx

@@ -1,10 +1,12 @@
+/* eslint-disable */


neb-b · 2018-01-04T05:47:34Z

src/renderer/page/file/view.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable */


neb-b · 2018-01-04T05:47:49Z

src/renderer/page/search/view.jsx

@@ -1,15 +1,21 @@
+// @flow


neb-b · 2018-01-04T05:47:58Z

src/renderer/page/show/view.jsx

@@ -1,17 +1,24 @@
+/* eslint-disable */


neb-b · 2018-01-04T05:52:04Z

src/renderer/scss/_gui.scss

+  src: url('../../../static/font/metropolis/Metropolis-SemiBold.woff2') format('woff2');
+}
+
+// @font-face {


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

Ignore for now

neb-b · 2018-01-04T05:55:26Z

src/renderer/scss/_vars.scss

@@ -6,6 +6,8 @@ $width-page-constrained: 800px;
 $text-color: #000;


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

neb-b · 2018-01-04T05:57:59Z

src/renderer/scss/component/_card.scss

@@ -2,321 +2,257 @@
  margin-left: auto;


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

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

kauffj · 2018-01-04T22:39:40Z

src/renderer/component/app/view.jsx

  constructor() {
    super();
    this.mainContent = undefined;
+    (this: any).scrollListener = this.scrollListener.bind(this);


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

Without it there are flow issues. Got the fix from here facebook/flow#1517

kauffj · 2018-01-04T22:42:55Z

src/renderer/component/common.js

@@ -1,25 +1,11 @@
+// just disabling the linter because this file shouldn't even exist
+// will continue to move components over to /components/common/{comp} - sean
+/* eslint-disable */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { formatCredits, formatFullPrice } from 'util/formatCredits';
 import lbry from '../lbry.js';



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

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

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.

kauffj · 2018-01-04T22:46:03Z

src/renderer/redux/actions/search.js

-          const uris = [];
-          const actions = [];
+  dispatch({
+    type: ACTIONS.SEARCH_STARTED,


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

Yep, I'll add that

kauffj · 2018-01-04T22:46:37Z

src/renderer/constants/action_types.js

@@ -91,6 +91,10 @@ export const FILE_DELETE = 'FILE_DELETE';
 export const SEARCH_STARTED = 'SEARCH_STARTED';
 export const SEARCH_COMPLETED = 'SEARCH_COMPLETED';
 export const SEARCH_CANCELLED = 'SEARCH_CANCELLED';
+export const UPDATE_SEARCH_QUERY = 'UPDATE_SEARCH_QUERY';
+export const GET_SEARCH_SUGGESTIONS_START = 'GET_SEARCH_SUGGESTIONS_START';


IMO no need for GET_ in this name.

kauffj · 2018-01-04T22:47:35Z

src/renderer/scss/component/_header.scss

-  color: var(--color-primary);
+.header__wunderbar {
+  flex: 1;
+  max-width: 325px;


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.

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

kauffj · 2018-01-04T22:49:20Z

src/renderer/scss/_gui.scss

+  font-weight: normal;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  src: url('../../../static/font/metropolis/Metropolis-Medium.woff2') format('woff2');


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

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.

kauffj · 2018-01-04T22:50:33Z

src/renderer/scss/_gui.scss

-html {
-  height: 100%;
-  font-size: var(--font-size);
+// The actual fonts used will change ex: medium vs regular


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.

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 · 2018-01-09T01:14:51Z

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.

neb-b force-pushed the redesign-wip branch from 99b375c to e0002f2 Compare December 14, 2017 06:48

lyoshenka assigned neb-b Dec 15, 2017

neb-b force-pushed the redesign-wip branch 5 times, most recently from 613473d to a9fba6e Compare December 20, 2017 22:38

neb-b force-pushed the redesign-wip branch 4 times, most recently from 835641d to 46d4081 Compare December 28, 2017 06:00

neb-b changed the title ~~[WIP] Redesign groundwork~~ [WIP] Redesign groundwork, homepage, search Dec 28, 2017

neb-b force-pushed the redesign-wip branch 6 times, most recently from 47a8525 to a771273 Compare January 4, 2018 05:06