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

Minor redesign (css) #647

Merged
btzr-io merged 52 commits from css_patch into master 2017-10-10 15:19:46 +02:00
Conversation 10 Commits 52 Files changed 39 +347 -172
btzr-io commented 2017-10-02 17:28:44 +02:00 (Migrated from github.com)
Copy link

A user interface is like a joke. If you have to explain it, it’s not that good.

Changes

A bunch of minor CSS fixes and additional changes.

  • Update themes.
  • Tabs (redesign) #576
  • Custom styled scrollbar #574
  • Add more focus on search.

Fixes

Additional changes

  • Header redesign (css).
  • Search bar UX / UI enhancement (css).
  • Checkbox redesign (css).
  • Radio button redesign (css).
  • Minor update for tile component (css)
  • Minor update for report button. (icon)
  • Minor update for support button. (css)
  • Minor update for edit button. (css)
  • Minor update for file actions. (css)
  • File input (css).
  • Cleanup Wallet page (css).

Todo

  • Update changelog.
> ### A user interface is like a joke. If you have to explain it, it’s not that good. ### Changes A bunch of minor `CSS` fixes and additional changes. - [x] Update themes. - [x] Tabs (redesign) #576 - [x] Custom styled scrollbar #574 - [x] Add more focus on search. ### Fixes - [x] Fix: unresponsive header #613 - [x] Fix: Dark theme issues - [x] Minor Fix: https://github.com/lbryio/lbry-app/issues/620 - [x] Minor issue with card-row header. - [x] Minor css fixes. ### Additional changes - [x] Header redesign (css). - [x] Search bar UX / UI enhancement (css). - [ ] Checkbox redesign (css). - [ ] Radio button redesign (css). - [x] Minor update for tile component (css) - [x] Minor update for report button. (icon) - [x] Minor update for support button. (css) - [x] Minor update for edit button. (css) - [x] Minor update for file actions. (css) - [x] File input (css). - [x] Cleanup Wallet page (css). ### Todo - [ ] Update changelog.
btzr-io commented 2017-10-02 17:33:31 +02:00 (Migrated from github.com)
Copy link

@kauffj I re-open this because -> #639 would take a while to get merged,
You can merge this right now 🙃

@kauffj I re-open this because -> #639 would take a while to get merged, You can merge this right now :upside_down_face:
kauffj (Migrated from github.com) requested changes 2017-10-05 02:46:11 +02:00
kauffj (Migrated from github.com) left a comment
Copy link

This is a really great and deep change set that has got me only more excited for the next design!

Some detailed feedback and questions below.

This is a really great and deep change set that has got me only more excited for the next design! Some detailed feedback and questions below.
CHANGELOG.md
@ -9,9 +9,14 @@ Web UI version numbers should always match the corresponding version of LBRY App
## [Unreleased]
### Added
* Add setting to automatically purchase low-cost content without a confirmation dialog
* New custom styled scrollbar (#574)
kauffj (Migrated from github.com) commented 2017-10-05 02:33:14 +02:00
Copy link

I like overall style and that it doesn't overlap header, but can it be wider and/or get wider on hover?

I like overall style and that it doesn't overlap header, but can it be wider and/or get wider on hover?
ui/js/component/file-selector.js
kauffj (Migrated from github.com) commented 2017-10-05 02:32:48 +02:00
Copy link

I understand the text is selected to make this copyable, but it also gives the user an implication that they can type in this field. Can we somehow express/provide both?

I understand the text is selected to make this copyable, but it also gives the user an implication that they can type in this field. Can we somehow express/provide both?
ui/js/component/fileTile/view.jsx
kauffj (Migrated from github.com) commented 2017-10-05 02:34:42 +02:00
Copy link

I agree we ought to make a change here to give a stronger indication how to open these.

But what if the change should just be to match card behavior of discover page? These card elements are really quite similar, so we should just be consistent in the effect/UI we provide.

I agree we ought to make a change here to give a stronger indication how to open these. But what if the change should just be to match card behavior of discover page? These card elements are really quite similar, so we should just be consistent in the effect/UI we provide.
ui/scss/_gui.scss
@ -9,3 +9,3 @@
color: var(--text-color);
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Roboto', sans-serif;
line-height: var(--font-line-height);
kauffj (Migrated from github.com) commented 2017-10-05 02:36:25 +02:00
Copy link

Bold move. Is this to move us inline with MD? Or do you just think this is appropriate font?

Bold move. Is this to move us inline with MD? Or do you just think this is appropriate font?
ui/scss/component/_file-tile.scss
@ -16,7 +15,19 @@ $height-file-tile: $spacing-vertical * 6;
padding-top: $spacing-vertical * 1/3;
margin-left: $height-file-tile + $spacing-vertical / 2;
}
kauffj (Migrated from github.com) commented 2017-10-05 02:37:38 +02:00
Copy link

I'm not sure we need to retain this if we match the behavior of discover, but if there is a new styling here specific to file-tile__row, we ought to make it a BEM class name and drop meta.

I'm not sure we need to retain this if we match the behavior of discover, but if there is a new styling here specific to `file-tile__row`, we ought to make it a BEM class name and drop `meta`.
ui/scss/component/_header.scss
kauffj (Migrated from github.com) commented 2017-10-05 02:38:22 +02:00
Copy link

Does this need to be abstracted?

Does this need to be abstracted?
ui/scss/component/_tabs.scss
kauffj (Migrated from github.com) commented 2017-10-05 02:44:11 +02:00
Copy link

Would consider making this a little larger?

Would consider making this a little larger?
ui/scss/component/_tabs.scss
@ -0,0 +1,57 @@
/* Tabs */
nav.sub-header
kauffj (Migrated from github.com) commented 2017-10-05 02:43:59 +02:00
Copy link

Like this element!

Like this element!
ui/scss/mixin/link.scss
kauffj (Migrated from github.com) commented 2017-10-05 02:45:10 +02:00
Copy link

I think this change added underlining to text button icons (e.g. the ones in FileActions). I think this can look poor with some icons, so should just be avoided.

I think this change added underlining to text button icons (e.g. the ones in `FileActions`). I think this can look poor with some icons, so should just be avoided.
btzr-io (Migrated from github.com) reviewed 2017-10-05 03:08:44 +02:00
ui/scss/_gui.scss
@ -9,3 +9,3 @@
color: var(--text-color);
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Roboto', sans-serif;
line-height: var(--font-line-height);
btzr-io (Migrated from github.com) commented 2017-10-05 03:08:44 +02:00
Copy link

lbry it's already usign MD so yes I think it's appropriate.

lbry it's already usign `MD` so yes I think it's appropriate.
btzr-io (Migrated from github.com) reviewed 2017-10-05 03:11:10 +02:00
ui/js/component/fileTile/view.jsx
btzr-io (Migrated from github.com) commented 2017-10-05 03:11:09 +02:00
Copy link

add experimental fileTile styles 87c4bd2

Ok I was just testing / experimenting with some stuff but yeah I'll remove it

> add experimental fileTile styles 87c4bd2 Ok I was just testing / experimenting with some stuff but yeah I'll remove it
btzr-io (Migrated from github.com) reviewed 2017-10-05 03:12:11 +02:00
ui/scss/component/_file-tile.scss
@ -16,7 +15,19 @@ $height-file-tile: $spacing-vertical * 6;
padding-top: $spacing-vertical * 1/3;
margin-left: $height-file-tile + $spacing-vertical / 2;
}
btzr-io (Migrated from github.com) commented 2017-10-05 03:12:11 +02:00
Copy link

add experimental fileTile styles 87c4bd2

Ok, I'll remove it, this was just a simple experiment 👍

> add experimental fileTile styles 87c4bd2 Ok, I'll remove it, this was just a simple experiment :+1:
btzr-io (Migrated from github.com) reviewed 2017-10-05 03:13:21 +02:00
ui/scss/component/_tabs.scss
btzr-io (Migrated from github.com) commented 2017-10-05 03:13:20 +02:00
Copy link

Ok ^

Ok ^
btzr-io (Migrated from github.com) reviewed 2017-10-05 03:14:23 +02:00
ui/scss/mixin/link.scss
btzr-io (Migrated from github.com) commented 2017-10-05 03:14:23 +02:00
Copy link

ok, I'll revert this, but at least header can't have underline text 🙃

ok, I'll revert this, but at least header can't have underline text :upside_down_face:
btzr-io (Migrated from github.com) reviewed 2017-10-05 03:17:30 +02:00
ui/scss/_gui.scss
@ -9,3 +9,3 @@
color: var(--text-color);
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Roboto', sans-serif;
line-height: var(--font-line-height);
btzr-io (Migrated from github.com) commented 2017-10-05 03:17:30 +02:00
Copy link

This PR isn't dropping MD, but instead doing some enhancement to it,
this would probably change when we implement the @nizuka01 design

This PR isn't dropping `MD`, but instead doing some enhancement to it, this would probably change when we implement the @nizuka01 `design`
btzr-io (Migrated from github.com) reviewed 2017-10-05 03:55:01 +02:00
ui/js/component/fileTile/view.jsx
btzr-io (Migrated from github.com) commented 2017-10-05 03:55:01 +02:00
Copy link

Agree, but a tile and a card are two different things...

Agree, but a tile and a card are two different things...
btzr-io (Migrated from github.com) reviewed 2017-10-05 04:40:15 +02:00
ui/js/component/fileTile/view.jsx
btzr-io (Migrated from github.com) commented 2017-10-05 04:40:15 +02:00
Copy link

we should just be consistent in the effect/UI

> we should just be consistent in the effect/UI
btzr-io (Migrated from github.com) reviewed 2017-10-05 04:41:05 +02:00
ui/js/component/fileTile/view.jsx
btzr-io (Migrated from github.com) commented 2017-10-05 04:41:05 +02:00
Copy link

Would you considering removing the uri from the tile component ?

Would you considering removing the `uri` from the tile component ?
btzr-io (Migrated from github.com) reviewed 2017-10-05 04:41:43 +02:00
ui/js/component/fileTile/view.jsx
btzr-io (Migrated from github.com) commented 2017-10-05 04:41:43 +02:00
Copy link

we could add a menu / or a set of actions to the tile component...

we could add a menu / or a set of actions to the tile component...
btzr-io (Migrated from github.com) reviewed 2017-10-05 04:42:18 +02:00
ui/js/component/fileTile/view.jsx
btzr-io (Migrated from github.com) commented 2017-10-05 04:42:18 +02:00
Copy link

a small button Get uri or Share

a small button `Get uri` or `Share`
btzr-io commented 2017-10-05 04:50:57 +02:00 (Migrated from github.com)
Copy link

dark-uri
@kauffj ? ^
IMO looks better (more clean) without the uri:

  • Uri is hard to read or remember.
  • If the user needs to get the uri from the tile component we should provide a more easy solution instead of selecting and copying it.

Note

This component needs a set of actions (edit, remove, share...)
As an user I would like to have a section to manage all my claims ( downloaded / published ),
currently I only can edit or remove if I go to claim page, the app needs to be more flexible with this.

Also this is a must thing to have if we ever integrate a Bookmarks / Watch-list feature

![dark-uri](https://user-images.githubusercontent.com/14793624/31209001-9e1954f8-a945-11e7-86d9-cc6dd73eb8b7.gif) @kauffj ? ^ IMO looks better (more clean) without the uri: - Uri is hard to read or remember. - If the user needs to get the uri from the tile component we should provide a more easy solution instead of selecting and copying it. ### Note This component needs a set of actions (edit, remove, share...) As an user I would like to have a section to manage all my claims ( downloaded / published ), currently I only can edit or remove if I go to claim page, the app needs to be more flexible with this. Also this is a must thing to have if we ever integrate a `Bookmarks` / `Watch-list` feature
btzr-io commented 2017-10-05 05:34:54 +02:00 (Migrated from github.com)
Copy link

More notes

  • Currently the report button seems hard to noticed, and looks like don't belong there...
### More notes - Currently the report button seems hard to noticed, and looks like don't belong there...
btzr-io (Migrated from github.com) reviewed 2017-10-05 07:21:57 +02:00
ui/js/component/file-selector.js
btzr-io (Migrated from github.com) commented 2017-10-05 07:21:57 +02:00
Copy link

I don't think the user should be allowed to type a directory / file, it's better letting the file dialog handle this to ensure that the file / directory exists, considering the current validation system...
😛

I don't think the user should be allowed to type a directory / file, it's better letting the file dialog handle this to ensure that the file / directory exists, considering the current validation system... :stuck_out_tongue:
btzr-io (Migrated from github.com) reviewed 2017-10-05 07:28:05 +02:00
CHANGELOG.md
@ -9,9 +9,14 @@ Web UI version numbers should always match the corresponding version of LBRY App
## [Unreleased]
### Added
* Add setting to automatically purchase low-cost content without a confirmation dialog
* New custom styled scrollbar (#574)
btzr-io (Migrated from github.com) commented 2017-10-05 07:28:05 +02:00
Copy link

Ok, increased the size, if users start to report some problems with this
I'll make it more wider, but I think it's ok for now

Ok, increased the size, if users start to report some problems with this I'll make it more wider, but I think it's ok for now
kauffj (Migrated from github.com) reviewed 2017-10-06 00:20:17 +02:00
ui/js/component/file-selector.js
kauffj (Migrated from github.com) commented 2017-10-06 00:20:17 +02:00
Copy link

I was unclear; I agree users should not be allowed to type in this field.

Is there a style we can apply that indicates BOTH copyable AND readonly?

I was unclear; I agree users should not be allowed to type in this field. Is there a style we can apply that indicates BOTH copyable AND readonly?
kauffj commented 2017-10-06 00:47:30 +02:00 (Migrated from github.com)
Copy link

@btzr-io I am fine with dropping the URI from FileTile. It would actually probably be pretty easy to add in FileActions to those cards... not sure if that's actually a good idea or not.

@btzr-io I am fine with dropping the URI from `FileTile`. It would actually probably be pretty easy to add in `FileActions` to those cards... not sure if that's actually a good idea or not.
👍 1
btzr-io commented 2017-10-09 01:36:05 +02:00 (Migrated from github.com)
Copy link

don't support your own claims :( dd8ab64

@kauffj I'm still confused about the support behavior:
Do we actually need to support our own claims ?

Note

There are too many buttons in fileActions,
I guess is time to bring back the menu component or do something smart 😛

> don't support your own claims :( dd8ab64 @kauffj I'm still confused about the support behavior: Do we actually need to support our own claims ? ### Note There are too many buttons in `fileActions`, I guess is time to bring back the `menu` component or do something smart :stuck_out_tongue:
btzr-io commented 2017-10-09 06:46:03 +02:00 (Migrated from github.com)
Copy link

Duplicated content

duplicated

### Duplicated content ![duplicated](https://user-images.githubusercontent.com/14793624/31325441-69229786-ac7a-11e7-9769-f84e05a6e9cd.png)
btzr-io commented 2017-10-09 07:11:56 +02:00 (Migrated from github.com)
Copy link

cleanup

![cleanup](https://user-images.githubusercontent.com/14793624/31325767-03121c38-ac7e-11e7-8d23-f89a11524001.jpeg)
kauffj commented 2017-10-10 00:35:15 +02:00 (Migrated from github.com)
Copy link

@btzr-io I think dd8ab64 could cause user confusion ("why is the support button missing on my content?")

@btzr-io I think dd8ab64 could cause user confusion ("why is the support button missing on my content?")
👍 1
kauffj commented 2017-10-10 00:35:38 +02:00 (Migrated from github.com)
Copy link

And yes... let's fix FileActions!

And yes... let's fix FileActions!
kauffj commented 2017-10-10 15:19:29 +02:00 (Migrated from github.com)
Copy link

I merged this, since it's a clear step up from the current app. I opened two issues regarding outstanding changes that I think are still worth making:

https://github.com/lbryio/lbry-app/issues/656
https://github.com/lbryio/lbry-app/issues/657

I merged this, since it's a clear step up from the current app. I opened two issues regarding outstanding changes that I think are still worth making: https://github.com/lbryio/lbry-app/issues/656 https://github.com/lbryio/lbry-app/issues/657
👍 1
Sign in to join this conversation.
Reviewers
No reviewers
kauffj
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#647
No description provided.
Delete branch "css_patch"

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?