From cb8e9b4bdf51571513a07206a945b1633288f7fa Mon Sep 17 00:00:00 2001 From: btzr-io Date: Tue, 10 Oct 2017 22:53:01 -0600 Subject: [PATCH 01/27] remove uri from tile component --- ui/js/component/fileTile/view.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/js/component/fileTile/view.jsx b/ui/js/component/fileTile/view.jsx index 566985084..bc1a86d97 100644 --- a/ui/js/component/fileTile/view.jsx +++ b/ui/js/component/fileTile/view.jsx @@ -127,7 +127,6 @@ class FileTile extends React.PureComponent {

{title}

- {uri} {description &&
From e18ba3198891d8e2299259575a05c08c79536974 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Wed, 11 Oct 2017 20:52:34 -0600 Subject: [PATCH 02/27] file selector cleanup - fix #656 add readonly style minor css fixes --- ui/js/component/publishForm/view.jsx | 1 - ui/scss/component/_file-selector.scss | 9 +++++++++ ui/scss/component/_form-field.scss | 18 +++++++++--------- 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/ui/js/component/publishForm/view.jsx b/ui/js/component/publishForm/view.jsx index 16323f28a..3a2416644 100644 --- a/ui/js/component/publishForm/view.jsx +++ b/ui/js/component/publishForm/view.jsx @@ -542,7 +542,6 @@ class PublishForm extends React.PureComponent {
{ diff --git a/ui/scss/component/_file-selector.scss b/ui/scss/component/_file-selector.scss index 31dc20d81..8172da203 100644 --- a/ui/scss/component/_file-selector.scss +++ b/ui/scss/component/_file-selector.scss @@ -1,3 +1,8 @@ +.form-field--file, +.form-field--directory { + width: 100%; +} + .file-selector { display: flex; } @@ -11,4 +16,8 @@ .file-selector__path { font-size: 14px; + flex-grow: 2; + .input-copyable { + width: 100%; + } } diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 8fc120787..0021efe86 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -27,19 +27,22 @@ input[type="text"].input-copyable { background: var(--input-bg); - border-bottom: var(--input-border-size) solid var(--input-border-color); color: var(--input-color); line-height: 1; padding-top: $spacing-vertical * 1/3; padding-bottom: $spacing-vertical * 1/3; - width: var(--input-width); padding-left: 5px; padding-right: 5px; width: 100%; - &:focus { - border-color: var(--color-primary); - background: none !important; - } +} + +input[readonly] { + border-bottom: 1px dashed var(--input-border-color) !important; +} + +input[readonly]:focus { + background: var(--input-bg) !important; + border-bottom: 1px dashed var(--input-border-color !important); } .form-field { @@ -81,9 +84,6 @@ input[type="text"].input-copyable { -webkit-appearance: none; background: var(--input-bg); color: var(--input-color); - &[readonly] { - background-color: var(--input-bg); - } } input[type="text"], From 6eff0b46dd4685e99dc66261249ab5c946d7f9c4 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Wed, 11 Oct 2017 21:05:57 -0600 Subject: [PATCH 03/27] minor update for scrollbar - fix #666 --- ui/scss/component/_scrollbar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/scss/component/_scrollbar.scss b/ui/scss/component/_scrollbar.scss index b95a5f899..048428132 100644 --- a/ui/scss/component/_scrollbar.scss +++ b/ui/scss/component/_scrollbar.scss @@ -1,12 +1,12 @@ ::-webkit-scrollbar { - width: 7px; + width: 8px; overflow: auto; } ::-webkit-scrollbar-track { background: var(--scrollbar-track-bg); border-radius: var(--scrollbar-radius); - margin: 4px 0; + margin: 4px; } ::-webkit-scrollbar-thumb { From 7ccc701b7bc1e732eb116be16a8094809b59eaf5 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Wed, 11 Oct 2017 21:15:09 -0600 Subject: [PATCH 04/27] remove overall text selection --- ui/scss/_gui.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss index 580862b54..64a69ea28 100644 --- a/ui/scss/_gui.scss +++ b/ui/scss/_gui.scss @@ -9,6 +9,7 @@ body color: var(--text-color); font-family: 'Roboto', sans-serif; line-height: var(--font-line-height); + user-select: none; } /* Custom text selection */ From 3374c8ba390bcbc56bde21d49ed7d1bc7ca58441 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Wed, 11 Oct 2017 21:37:36 -0600 Subject: [PATCH 05/27] add smart text selection --- ui/scss/component/_button.scss | 1 + ui/scss/component/_card.scss | 3 +++ 2 files changed, 4 insertions(+) diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss index 7ba181c78..642e3de92 100644 --- a/ui/scss/component/_button.scss +++ b/ui/scss/component/_button.scss @@ -45,6 +45,7 @@ $button-focus-shift: 12%; cursor: pointer; font-weight: 500; font-size: 14px; + user-select: none; transition: background var(--animation-duration) var(--animation-style); } diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss index 1de1e4494..44575951c 100644 --- a/ui/scss/component/_card.scss +++ b/ui/scss/component/_card.scss @@ -7,6 +7,7 @@ border-radius: var(--card-radius); margin-bottom: var(--card-margin); overflow: auto; + user-select: text; //below added to prevent scrollbar on long titles when show page loads, would prefer a cleaner CSS solution overflow-x: hidden; @@ -49,6 +50,8 @@ .card__actions { margin-top: var(--card-margin); margin-bottom: var(--card-margin); + user-select: none; + } .card__actions--bottom { margin-top: $spacing-vertical * 1/3; From c20ecd5f3624860bfe75b36b54d3539894ab8ed1 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Wed, 11 Oct 2017 22:25:53 -0600 Subject: [PATCH 06/27] improvements for channel Tile --- ui/js/component/channelTile/view.jsx | 36 ++++++++++++++++------------ 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/ui/js/component/channelTile/view.jsx b/ui/js/component/channelTile/view.jsx index 973d1dff5..2ee3c4069 100644 --- a/ui/js/component/channelTile/view.jsx +++ b/ui/js/component/channelTile/view.jsx @@ -1,4 +1,6 @@ import React from "react"; +import lbryuri from "lbryuri.js"; +import CardMedia from "component/cardMedia"; import { TruncatedText, BusyMessage } from "component/common.js"; class ChannelTile extends React.PureComponent { @@ -18,27 +20,31 @@ class ChannelTile extends React.PureComponent { render() { const { navigate, totalItems, uri } = this.props; + const { name, claimId } = lbryuri.parse(uri); let onClick = () => navigate("/show", { uri }); return (
-
-
-

- {uri} -

-
-
- {isNaN(totalItems) && - } - {totalItems > 0 && - - This is a channel with over {totalItems} items inside of it. - } - {totalItems === 0 && - This is an empty channel.} +
+ +
+
+

+ {name} +

+
+
+ {isNaN(totalItems) && + } + {totalItems > 0 && + + This is a channel with over {totalItems} items inside of it. + } + {totalItems === 0 && + This is an empty channel.} +
From 28216e998b96e19b95981be81785d8635f67340f Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 12 Oct 2017 19:37:26 -0600 Subject: [PATCH 07/27] fix jsx --- ui/js/component/channelTile/view.jsx | 35 ++++++++++++++-------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/ui/js/component/channelTile/view.jsx b/ui/js/component/channelTile/view.jsx index dd8cf8899..802e72272 100644 --- a/ui/js/component/channelTile/view.jsx +++ b/ui/js/component/channelTile/view.jsx @@ -19,7 +19,7 @@ class ChannelTile extends React.PureComponent { render() { const { claim, navigate, isResolvingUri, totalItems, uri } = this.props; - + let onClick = () => navigate("/show", { uri }); return ( @@ -28,22 +28,23 @@ class ChannelTile extends React.PureComponent {
-
-

- {uri} -

-
-
- {isResolvingUri && - } - {totalItems > 0 && - - This is a channel with {totalItems}{" "} - {totalItems === 1 ? " item" : " items"} inside of it. - } - {!isResolvingUri && - !totalItems && - This is an empty channel.} +
+

+ {claim.name} +

+
+
+ {isResolvingUri && + } + {totalItems > 0 && + + This is a channel with {totalItems}{" "} + {totalItems === 1 ? " item" : " items"} inside of it. + } + {!isResolvingUri && + !totalItems && + This is an empty channel.} +
From d7dede8c0865e4246228be24543160509a9ac416 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 12 Oct 2017 19:49:49 -0600 Subject: [PATCH 08/27] fix channel tile thumbnail --- ui/js/component/channelTile/view.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/js/component/channelTile/view.jsx b/ui/js/component/channelTile/view.jsx index 802e72272..942c9e1f5 100644 --- a/ui/js/component/channelTile/view.jsx +++ b/ui/js/component/channelTile/view.jsx @@ -19,6 +19,7 @@ class ChannelTile extends React.PureComponent { render() { const { claim, navigate, isResolvingUri, totalItems, uri } = this.props; + const { name, claim_id } = claim; let onClick = () => navigate("/show", { uri }); From 036bc5200a87a54d93e1bdf5f1edc801686e96ee Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 12 Oct 2017 20:08:29 -0600 Subject: [PATCH 09/27] fix pr :( --- ui/js/component/channelTile/view.jsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ui/js/component/channelTile/view.jsx b/ui/js/component/channelTile/view.jsx index 942c9e1f5..512389f0c 100644 --- a/ui/js/component/channelTile/view.jsx +++ b/ui/js/component/channelTile/view.jsx @@ -19,7 +19,12 @@ class ChannelTile extends React.PureComponent { render() { const { claim, navigate, isResolvingUri, totalItems, uri } = this.props; - const { name, claim_id } = claim; + let channelName, channelId; + + if (claim) { + channelName = claim.name; + channelId = claim.claim_id; + } let onClick = () => navigate("/show", { uri }); @@ -27,11 +32,11 @@ class ChannelTile extends React.PureComponent {
- + {channelName && }

- {claim.name} + {channelName || uri}

From d8e4e2437a9e449a0dbb5fabb7287357f579983d Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 12 Oct 2017 20:23:02 -0600 Subject: [PATCH 10/27] fix empty search results --- ui/js/component/fileTile/view.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/ui/js/component/fileTile/view.jsx b/ui/js/component/fileTile/view.jsx index bc1a86d97..b712ae048 100644 --- a/ui/js/component/fileTile/view.jsx +++ b/ui/js/component/fileTile/view.jsx @@ -84,6 +84,11 @@ class FileTile extends React.PureComponent { let onClick = () => navigate("/show", { uri }); + let name = ""; + if (claim) { + name = claim.name; + } + let description = ""; if (isClaimed) { description = metadata && metadata.description; @@ -114,7 +119,7 @@ class FileTile extends React.PureComponent { >
- +
@@ -125,7 +130,7 @@ class FileTile extends React.PureComponent { {showLocal && fileInfo && }

- {title} + {title || name}

{description && From 37d3515fa891405241ac0569979d214bddbfdb2b Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 14 Oct 2017 13:41:04 -0600 Subject: [PATCH 11/27] publish layout cleanup --- ui/dist/themes/dark.css | 1 - ui/js/component/publishForm/view.jsx | 18 ++++++++++++------ ui/scss/component/_form-field.scss | 2 +- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css index e95cf2143..9e7f81d09 100644 --- a/ui/dist/themes/dark.css +++ b/ui/dist/themes/dark.css @@ -17,7 +17,6 @@ /* Input */ --input-bg: transparent; - --input-active-bg: rgba(0,0,0, 0.5); --input-border-color: rgba(255,255,255, 0.25); /* Search */ diff --git a/ui/js/component/publishForm/view.jsx b/ui/js/component/publishForm/view.jsx index 7d034922d..04b3d1d9d 100644 --- a/ui/js/component/publishForm/view.jsx +++ b/ui/js/component/publishForm/view.jsx @@ -636,15 +636,12 @@ class PublishForm extends React.PureComponent {
-

{__("Access")}

+

{__("Price")}

{__("How much does this content cost?")}
-
- -
: null} +
+
+
+
+

{__("License")}

+
+ {__("Rights and permissions")} +
+
+
{ @@ -686,7 +692,7 @@ class PublishForm extends React.PureComponent { this.handleLicenseTypeChange(event); }} > -
-
{claimIsMine &&
-
-
Date: Sat, 14 Oct 2017 18:22:43 -0600 Subject: [PATCH 18/27] remove extra label --- ui/js/component/publishForm/view.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/ui/js/component/publishForm/view.jsx b/ui/js/component/publishForm/view.jsx index 04b3d1d9d..8e80854be 100644 --- a/ui/js/component/publishForm/view.jsx +++ b/ui/js/component/publishForm/view.jsx @@ -677,9 +677,6 @@ class PublishForm extends React.PureComponent {

{__("License")}

-
- {__("Rights and permissions")} -
Date: Sat, 14 Oct 2017 18:42:21 -0600 Subject: [PATCH 19/27] settigns page cleanup --- ui/js/page/settings/view.jsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index 5601c4774..4f1605d32 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -184,14 +184,9 @@ class SettingsPage extends React.PureComponent {
-

{__("Purchase Settings")}

+

{__("Max Purchase Price")}

-
- -
+
+ +
+
+

{__("Purchase Confirmations")}

+
-
- -
Date: Sat, 14 Oct 2017 19:42:47 -0600 Subject: [PATCH 20/27] fix recent transaction actions --- ui/js/component/link/view.jsx | 2 +- ui/js/component/transactionListRecent/view.jsx | 5 ++++- ui/js/constants/icons.js | 1 + 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/ui/js/component/link/view.jsx b/ui/js/component/link/view.jsx index 1ba8f4b52..98193cd40 100644 --- a/ui/js/component/link/view.jsx +++ b/ui/js/component/link/view.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { Icon } from "component/common.js"; +import Icon from "component/icon"; const Link = props => { const { diff --git a/ui/js/component/transactionListRecent/view.jsx b/ui/js/component/transactionListRecent/view.jsx index 82c09995d..45d3700bb 100644 --- a/ui/js/component/transactionListRecent/view.jsx +++ b/ui/js/component/transactionListRecent/view.jsx @@ -2,6 +2,7 @@ import React from "react"; import { BusyMessage } from "component/common"; import Link from "component/link"; import TransactionList from "component/transactionList"; +import * as icons from "constants/icons"; class TransactionListRecent extends React.PureComponent { componentWillMount() { @@ -29,7 +30,9 @@ class TransactionListRecent extends React.PureComponent {
} diff --git a/ui/js/constants/icons.js b/ui/js/constants/icons.js index d9c36fc32..ce2f54e22 100644 --- a/ui/js/constants/icons.js +++ b/ui/js/constants/icons.js @@ -1,3 +1,4 @@ export const FEATURED = "rocket"; export const LOCAL = "folder"; export const FILE = "file"; +export const HISTORY = "history"; From 3f18110e7cba53ddae0cdb786a45c161a161ba74 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 14 Oct 2017 19:53:43 -0600 Subject: [PATCH 21/27] don't show channel on fetch --- ui/js/component/publishForm/internal/channelSection.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/js/component/publishForm/internal/channelSection.jsx b/ui/js/component/publishForm/internal/channelSection.jsx index fefa6da84..d4ce1ed14 100644 --- a/ui/js/component/publishForm/internal/channelSection.jsx +++ b/ui/js/component/publishForm/internal/channelSection.jsx @@ -110,7 +110,7 @@ class ChannelSection extends React.PureComponent { ); if (fetchingChannels) { - channelContent.push( + channelContent = ( ); } From d17261a965d8ce1714f6833f64e8959810fd7d7c Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 14 Oct 2017 19:56:51 -0600 Subject: [PATCH 22/27] consistent titles for settings page --- ui/js/page/settings/view.jsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index 4f1605d32..e11a2443f 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -148,7 +148,7 @@ class SettingsPage extends React.PureComponent { {/*
-

{__("Language")}

+

{__("Language")}

@@ -170,7 +170,7 @@ class SettingsPage extends React.PureComponent {
*/}
-

{__("Download Directory")}

+

{__("Download Directory")}

-

{__("Max Purchase Price")}

+

{__("Max Purchase Price")}

-

{__("Purchase Confirmations")}

+

{__("Purchase Confirmations")}

-

{__("Content")}

+

{__("Content")}

-

{__("Share Diagnostic Data")}

+

{__("Share Diagnostic Data")}

-

{__("Theme")}

+

{__("Theme")}

-

{__("Application Cache")}

+

{__("Application Cache")}

From 904205beb8153e6ac960afa87909a2aa2080b82a Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 14 Oct 2017 20:16:31 -0600 Subject: [PATCH 23/27] fix download button styles --- ui/dist/themes/dark.css | 1 + ui/scss/_vars.scss | 2 +- ui/scss/component/_file-download.scss | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css index a4ef71fe1..5ad4afa20 100644 --- a/ui/dist/themes/dark.css +++ b/ui/dist/themes/dark.css @@ -10,6 +10,7 @@ --color-money: var(--color-primary); --color-meta-light: #757575; --color-dark-overlay: rgba(15, 21, 23, 0.85); + --color-download: rgba(255, 255, 255, 0.75); /* Text */ --text-color: #FFF; diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index 470c30601..6a9435f0e 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -19,7 +19,7 @@ $text-color: #000; --color-load-screen-text: #c3c3c3; --color-meta-light: #505050; --color-money: #216C2A; - --color-download: #444; + --color-download: rgba(0, 0, 0, 0.75); --color-canvas: #f5f5f5; --color-bg: #ffffff; --color-bg-alt: #D9D9D9; diff --git a/ui/scss/component/_file-download.scss b/ui/scss/component/_file-download.scss index 485e2ea9d..dcde4b31b 100644 --- a/ui/scss/component/_file-download.scss +++ b/ui/scss/component/_file-download.scss @@ -12,7 +12,7 @@ .file-download__overlay { background: var(--color-download); - color: white; + color: var(--color-bg); position: absolute; white-space: nowrap; overflow: hidden; From f5126fc059351a5938e9bbd00525fb96a1d7e9a1 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 14 Oct 2017 21:52:23 -0600 Subject: [PATCH 24/27] update / fix input styles --- ui/dist/themes/dark.css | 8 ++-- ui/scss/_vars.scss | 8 ++-- ui/scss/component/_form-field.scss | 73 +++++++++--------------------- 3 files changed, 32 insertions(+), 57 deletions(-) diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css index 5ad4afa20..4176b4985 100644 --- a/ui/dist/themes/dark.css +++ b/ui/dist/themes/dark.css @@ -12,17 +12,19 @@ --color-dark-overlay: rgba(15, 21, 23, 0.85); --color-download: rgba(255, 255, 255, 0.75); + /* Text */ --text-color: #FFF; --text-selection-bg: rgba(0,150,136, 0.95); /* Form */ - --form-label-color: rgba(255, 255, 255, 0.54); + --form-label-color: rgba(255, 255, 255, 0.70); /* Input */ --input-bg: transparent; - --input-border-color: rgba(255,255,255, 0.36); - --input-hover-border-color: rgba(255, 255, 255, 0.75); + --input-border-color: rgba(255,255,255, 0.70); + --input-hover-border-color: rgba(255, 255, 255, 1); + --input-placeholder-opacity: 0.5; /* Search */ --search-bg: rgba(0,0,0, 0.45); diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index 6a9435f0e..27b4086ac 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -13,7 +13,7 @@ $text-color: #000; --color-primary-light: saturate(lighten(#155B4A, 50%), 20%); --color-light-alt: hsl(hue(#155B4A), 15, 85); --color-dark-overlay: rgba(32,32,32,0.9); - --color-help: rgba(0,0,0,.6); + --color-help: rgba(0, 0, 0, 0.54); --color-notice: #8a6d3b; --color-error: #a94442; --color-load-screen-text: #c3c3c3; @@ -62,8 +62,10 @@ $text-color: #000; --input-width: 330px; --input-color: var(--text-color); --input-border-size: 2px; - --input-border-color: rgba(0, 0, 0, 0.34); - --input-hover-border-color: rgba(0, 0, 0, 0.75); + --input-border-color: rgba(0, 0, 0, 0.42); + --input-hover-border-color: rgba(0, 0, 0, 0.87); + --input-placeholder-color: var(--text-color); + --input-placeholder-opacity: 0.42; /* Select */ --select-bg: var(--color-bg-alt); diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index df4e731e7..b676db070 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -1,10 +1,3 @@ - -@mixin placeholder { - &::-webkit-input-placeholder {@content} - &:-moz-placeholder {@content} - &:-ms-input-placeholder {@content} -} - .form-row-submit { margin-top: $spacing-vertical; @@ -73,34 +66,36 @@ input[readonly]:focus { input[type="email"], input[type="number"], input[type="search"], - input[type="date"] { - @include placeholder { - color: lighten($text-color, 60%); - } - transition: all var(--transition-duration) var(--transition-type); + input[type="date"]{ + background: var(--input-bg); + border-bottom: var(--input-border-size) solid var(--input-border-color); + caret-color: var(--color-primary); + color: var(--input-color); cursor: pointer; - padding-left: 1px; - padding-right: 1px; + line-height: 1; + padding: $spacing-vertical * 1/3 1px; box-sizing: border-box; -webkit-appearance: none; - background: var(--input-bg); - color: var(--input-color); - } + transition: all var(--transition-duration) var(--transition-type); - input[type="text"], - input[type="password"], - input[type="email"], - input[type="number"], - input[type="search"], - input[type="date"] { - border-bottom: var(--input-border-size) solid var(--input-border-color); - line-height: 1; - padding-top: $spacing-vertical * 1/3; - padding-bottom: $spacing-vertical * 1/3; + & ::-webkit-input-placeholder { + color: var(--input-placeholder-color); + opacity: var(--input-placeholder-opacity) !important; + } + + &:focus { + border-color: var(--color-primary) !important; + background: var(--input-active-bg); + } + + &:hover { + border-color: var(--input-hover-border-color); + } &.form-field__input--error { border-color: var(--color-error); } + &.form-field__input--inline { padding-top: 0; padding-bottom: 0; @@ -108,30 +103,6 @@ input[readonly]:focus { margin-left: 8px; margin-right: 8px; } - } - - textarea, - input[type="text"], - input[type="password"], - input[type="email"], - input[type="number"], - input[type="search"], - input[type="date"]{ - - & ::-webkit-input-placeholder { /* WebKit browsers */ - color: var(--input-color); - opacity: 0.54 !important; - } - - caret-color: var(--color-primary); - - &:focus { - border-color: var(--color-primary) !important; - background: var(--input-active-bg); - } - &:hover { - border-color: var(--input-hover-border-color); - } } From c6f75702b1bfbe9839e4097feb47d39fc67c5291 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 14 Oct 2017 22:52:32 -0600 Subject: [PATCH 25/27] more fixes for input styles --- ui/dist/themes/dark.css | 8 ++++- ui/scss/_vars.scss | 14 ++++++-- ui/scss/component/_form-field.scss | 51 +++++++++++++++--------------- 3 files changed, 44 insertions(+), 29 deletions(-) diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css index 4176b4985..f5d9d4736 100644 --- a/ui/dist/themes/dark.css +++ b/ui/dist/themes/dark.css @@ -24,7 +24,13 @@ --input-bg: transparent; --input-border-color: rgba(255,255,255, 0.70); --input-hover-border-color: rgba(255, 255, 255, 1); - --input-placeholder-opacity: 0.5; + + /* input:placeholder */ + --input-placeholder-color: rgba(255,255,255, 0.5); + + /* input:disabled */ + --input-disabled-color: rgba(255, 255, 255, 0.50); + --input-disabled-border-color: rgba(255, 255, 255, 0.70); /* Search */ --search-bg: rgba(0,0,0, 0.45); diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index 27b4086ac..71d3e69db 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -58,14 +58,22 @@ $text-color: #000; /* Input */ --input-bg: transparent; - --input-active-bg: transparent; --input-width: 330px; --input-color: var(--text-color); --input-border-size: 2px; --input-border-color: rgba(0, 0, 0, 0.42); + /* input:active */ + --input-active-bg: transparent; + + /* input:disabled */ + --input-disabled-border-color: rgba(0, 0, 0, 0.42); + --input-disabled-color: rgba(0, 0, 0, 0.54); + + /* input:hover */ --input-hover-border-color: rgba(0, 0, 0, 0.87); + /* input:placeholder */ --input-placeholder-color: var(--text-color); - --input-placeholder-opacity: 0.42; + --input-placeholder-opacity: 1; /* Select */ --select-bg: var(--color-bg-alt); @@ -80,7 +88,7 @@ $text-color: #000; --button-height: $spacing-vertical * 1.5; --button-intra-margin: $spacing-vertical; --button-radius: 3px; - + /* Header */ --header-bg: var(--color-bg); --header-color: #666; diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index b676db070..d4b9e1256 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -9,7 +9,7 @@ .form-row__label-row { margin-top: $spacing-vertical * 5/6; - margin-bottom: $spacing-vertical * 1/6; + margin-bottom: 0px; line-height: 1; font-size:calc( 0.9 * var(--font-size)); } @@ -18,26 +18,6 @@ margin-right: 5px; } -input[type="text"].input-copyable { - background: var(--input-bg); - color: var(--input-color); - line-height: 1; - padding-top: $spacing-vertical * 1/3; - padding-bottom: $spacing-vertical * 1/3; - padding-left: 5px; - padding-right: 5px; - width: 100%; -} - -input[readonly] { - border-bottom: 1px dashed var(--input-border-color) !important; -} - -input[readonly]:focus { - background: var(--input-bg) !important; - border-bottom: 1px dashed var(--input-border-color !important); -} - .form-field { display: inline-block; margin: 8px 0; @@ -60,6 +40,27 @@ input[readonly]:focus { } } + input[type="text"].input-copyable { + background: var(--input-bg); + color: var(--input-disabled-color); + line-height: 1; + padding-top: $spacing-vertical * 1/3; + padding-bottom: $spacing-vertical * 1/3; + padding-left: 5px; + padding-right: 5px; + width: 100%; + } + + input[readonly] { + color: var(--input-disabled-color) !important; + border-bottom: 1px dashed var(--input-disabled-border-color) !important; + } + + input[readonly]:focus { + background: var(--input-bg) !important; + border-bottom: 1px dashed var(--input-disabled-border-color) !important; + } + textarea, input[type="text"], input[type="password"], @@ -73,22 +74,22 @@ input[readonly]:focus { color: var(--input-color); cursor: pointer; line-height: 1; - padding: $spacing-vertical * 1/3 1px; + padding:0 1px 8px 1px; box-sizing: border-box; -webkit-appearance: none; transition: all var(--transition-duration) var(--transition-type); - & ::-webkit-input-placeholder { + &::-webkit-input-placeholder { color: var(--input-placeholder-color); opacity: var(--input-placeholder-opacity) !important; } &:focus { - border-color: var(--color-primary) !important; + border-color: var(--color-primary); background: var(--input-active-bg); } - &:hover { + &:hover:not(:focus){ border-color: var(--input-hover-border-color); } From 0256d7a8f8aecc08bc2b36e8e95f8485c7590b0a Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 14 Oct 2017 23:40:15 -0600 Subject: [PATCH 26/27] minor update for publish layout update markdown styles css fixes --- ui/js/component/publishForm/view.jsx | 4 +++- ui/scss/_vars.scss | 4 ++-- ui/scss/component/_markdown-editor.scss | 27 +++++++++++++++---------- 3 files changed, 21 insertions(+), 14 deletions(-) diff --git a/ui/js/component/publishForm/view.jsx b/ui/js/component/publishForm/view.jsx index 8e80854be..dcaa60c42 100644 --- a/ui/js/component/publishForm/view.jsx +++ b/ui/js/component/publishForm/view.jsx @@ -584,9 +584,11 @@ class PublishForm extends React.PureComponent { }} />

+
+

{__("Description")}

+
Date: Sat, 14 Oct 2017 23:55:25 -0600 Subject: [PATCH 27/27] more changes for markdown styles --- ui/scss/component/_markdown-editor.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss index 71482487a..5a1786b48 100644 --- a/ui/scss/component/_markdown-editor.scss +++ b/ui/scss/component/_markdown-editor.scss @@ -1,6 +1,6 @@ .CodeMirror { - background: var(--color-bg-alt) !important; - border: 0 !important; + background: var(--color-canvas) !important; + border: 0px !important; border-radius: 0px !important; color: var(--text-color) !important; box-shadow: var(--box-shadow-layer); @@ -11,7 +11,6 @@ border: 0 !important; background: var(--color-bg-alt); border-radius: 0 !important; - border-bottom: var(--divider) !important; box-shadow: var(--box-shadow-layer); } @@ -25,7 +24,7 @@ } div.editor-toolbar a { - opacity: 0.75; + opacity: 0.64; color: var(--text-color) !important; } @@ -47,6 +46,7 @@ div.editor-toolbar a { .editor-preview { background: var(--card-bg) !important; + border: 0 !important; } .editor-preview-side { @@ -84,7 +84,7 @@ div.editor-toolbar a { } .CodeMirror .CodeMirror-cursor{ - border-color: var(--text-color) !important; + border-color: var(--color-primary) !important; } .CodeMirror .CodeMirror-code .cm-comment {