Home landing page (#4178)

* Home entry point (basics) * WIP store for web * Add DappUrlInput component * Updated tests * WIP store update * Adjust styling * Add home tab * Collapse first/last without extra divs * Navigation actually navigates * styling * Encoding of ethlink.io URLs * encodedUrl setup * base58 encoded URLs * Added decoding, updated tests to Parity-compliant * Base32 (synced with Rust implementation via tests) * Split URL into 63 character chunks * Fix store test * Cleanups * s/ethlink/dapplink/ * Display app navigation & histroy * Start on /accounts (for now, until expanded fully) * Update tests * ethlink.io -> web3.site * Basic list layout * Store history on navigation * Show Accounts & Dapps * Add skeleton for DappIcon (WIP) * DappIcon WIP * DappIcon in place * Split into maneable sub-components * WIP * Tests for views/Home * Swap default entry-point to /home * Expose registry.get via lookupMeta * Add getEntry interface, fix instance retrieval (with tests) * Add news display component * Add tests for added contracts/registry methods * Fix GHH test refactoring * render news via SectionList * News items store directly * Images * News & Urls has new layout * Convert remainder * First run-through of MVP for SectionList * Update tests * Deploycontract should not override global p styles * Allow styles overrides for head & body * Adjust layout styling * revert Container>flex * Adjust sizes of history items * Cleanups * HistoryStore for tracking relevant routes * Default route is still /accounts * Fix tests * Update 2015-2017 * Add lookupMeta & tests * Add getEntry & tests * Split Dapp icon into ui/DappIcon * Update copyright dates * Encoding for *.web3.site urls * Dapp history retrieval * Grow to only 40% on hover * Update description * Add DappUrlInput component * Update Web views with store * Update spec description * Update spec description * edited url does not allow in-place store edits * Use /web/<hash> urls for iframe * Removed (now) unused _list.css * Mistamtched merge fixed * Tab split (WIP) * Split Tab component * Update tests after merge * typo * Remove background !important * Set item width to parent * Set width, remove overflow-x: hidden * Align hover overlays * Container defaults to some opacity * Display history from listRecentDapps * Override styles for a tags * Open URLs in new window when extension is available * Fix tests after update * AccountCard width 100% * Re-add opening correct url in tab * Cleanup link rendering * Remove hardcoded news URL * pre-merge * Extra padding at Home bottom (Pr grumble) * Match js-vaults stretch * s/Web Apps via URL/Web Apps/ (PR grumble) * Store recent wallets (PR grumble) * Simplify inline style matching (PR comment) * Add store for new retrieval * Add missing observer * Auto-link based on account type * Fix UI overlaps * Extra spacing * Only show account when accountInfo is available * Align timestamp line-heights * Fix tests * Update tests * Really fix failing test (check for Connect(Account))
2017-02-14 08:29:32 +01:00
parent 78917d728d
commit 63d2cfcbfc
59 changed files with 2014 additions and 344 deletions
--- a/js/src/ui/Container/container.css
+++ b/js/src/ui/Container/container.css
@@ -14,11 +14,37 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+$background: rgba(18, 18, 18, 0.85);
+$backgroundOverlay: rgba(18, 18, 18, 1);
+
 .container {
+  background: $background;
  flex: 1;
-  padding: 0em;
-  background: rgba(0, 0, 0, 0.8);
  height: 100%;
+  padding: 0em;
+  transition: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
+  width: 100%;
+
+  .hoverOverlay {
+    background: $backgroundOverlay;
+    display: none;
+    left: 0;
+    margin-top: -1.5em;
+    padding: 0 1.5em 1.5em 1.5em;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    z-index: 100;
+  }
+
+  &:hover {
+    background: $backgroundOverlay;
+
+    .hoverOverlay {
+      display: block;
+    }
+  }
 }

 .compact,
--- a/js/src/ui/Container/container.js
+++ b/js/src/ui/Container/container.js
@@ -28,6 +28,7 @@ export default class Container extends Component {
    children: PropTypes.node,
    className: PropTypes.string,
    compact: PropTypes.bool,
+    hover: PropTypes.node,
    light: PropTypes.bool,
    onClick: PropTypes.func,
    style: PropTypes.object,
@@ -68,10 +69,25 @@ export default class Container extends Component {
          { this.renderTitle() }
          { children }
        </Card>
+        { this.renderHover() }
      </div>
    );
  }

+  renderHover () {
+    const { hover } = this.props;
+
+    if (!hover) {
+      return null;
+    }
+
+    return (
+      <Card className={ styles.hoverOverlay }>
+        { hover }
+      </Card>
+    );
+  }
+
  renderTitle () {
    const { title } = this.props;

--- a/js/src/ui/Container/container.spec.js
+++ b/js/src/ui/Container/container.spec.js
@@ -37,10 +37,17 @@ describe('ui/Container', () => {
  });

  describe('sections', () => {
-    it('renders the Card', () => {
+    it('renders the default Card', () => {
      expect(render().find('Card')).to.have.length(1);
    });

+    it('renders Hover Card when available', () => {
+      const cards = render({ hover: <div>testingHover</div> }).find('Card');
+
+      expect(cards).to.have.length(2);
+      expect(cards.get(1).props.children.props.children).to.equal('testingHover');
+    });
+
    it('renders the Title', () => {
      const title = render({ title: 'title' }).find('Title');

--- a/js/src/ui/Icons/index.js
+++ b/js/src/ui/Icons/index.js
@@ -14,66 +14,33 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

-import AddIcon from 'material-ui/svg-icons/content/add';
-import AttachFileIcon from 'material-ui/svg-icons/editor/attach-file';
-import CancelIcon from 'material-ui/svg-icons/content/clear';
-import CheckIcon from 'material-ui/svg-icons/navigation/check';
-import CloseIcon from 'material-ui/svg-icons/navigation/close';
-import CompareIcon from 'material-ui/svg-icons/action/compare-arrows';
-import ComputerIcon from 'material-ui/svg-icons/hardware/desktop-mac';
-import ContractIcon from 'material-ui/svg-icons/action/code';
-import CopyIcon from 'material-ui/svg-icons/content/content-copy';
-import DashboardIcon from 'material-ui/svg-icons/action/dashboard';
-import DeleteIcon from 'material-ui/svg-icons/action/delete';
-import DoneIcon from 'material-ui/svg-icons/action/done-all';
-import EditIcon from 'material-ui/svg-icons/content/create';
-import FingerprintIcon from 'material-ui/svg-icons/action/fingerprint';
-import LinkIcon from 'material-ui/svg-icons/content/link';
-import LockedIcon from 'material-ui/svg-icons/action/lock';
-import MoveIcon from 'material-ui/svg-icons/action/open-with';
-import NextIcon from 'material-ui/svg-icons/navigation/arrow-forward';
-import PrevIcon from 'material-ui/svg-icons/navigation/arrow-back';
-import PrintIcon from 'material-ui/svg-icons/action/print';
-import RefreshIcon from 'material-ui/svg-icons/action/autorenew';
-import SaveIcon from 'material-ui/svg-icons/content/save';
-import SendIcon from 'material-ui/svg-icons/content/send';
-import SnoozeIcon from 'material-ui/svg-icons/av/snooze';
-import StarCircleIcon from 'material-ui/svg-icons/action/stars';
-import StarIcon from 'material-ui/svg-icons/toggle/star';
-import StarOutlineIcon from 'material-ui/svg-icons/toggle/star-border';
-import VerifyIcon from 'material-ui/svg-icons/action/verified-user';
-import VisibleIcon from 'material-ui/svg-icons/image/remove-red-eye';
-import VpnIcon from 'material-ui/svg-icons/notification/vpn-lock';
-
-export {
-  AddIcon,
-  AttachFileIcon,
-  CancelIcon,
-  CheckIcon,
-  CloseIcon,
-  CompareIcon,
-  ComputerIcon,
-  ContractIcon,
-  CopyIcon,
-  DashboardIcon,
-  DeleteIcon,
-  DoneIcon,
-  EditIcon,
-  FingerprintIcon,
-  LinkIcon,
-  LockedIcon,
-  MoveIcon,
-  NextIcon,
-  PrevIcon,
-  PrintIcon,
-  RefreshIcon,
-  SaveIcon,
-  SendIcon,
-  SnoozeIcon,
-  StarIcon,
-  StarCircleIcon,
-  StarOutlineIcon,
-  VerifyIcon,
-  VisibleIcon,
-  VpnIcon
-};
+export AddIcon from 'material-ui/svg-icons/content/add';
+export AttachFileIcon from 'material-ui/svg-icons/editor/attach-file';
+export CancelIcon from 'material-ui/svg-icons/content/clear';
+export CheckIcon from 'material-ui/svg-icons/navigation/check';
+export CloseIcon from 'material-ui/svg-icons/navigation/close';
+export CompareIcon from 'material-ui/svg-icons/action/compare-arrows';
+export ComputerIcon from 'material-ui/svg-icons/hardware/desktop-mac';
+export ContractIcon from 'material-ui/svg-icons/action/code';
+export CopyIcon from 'material-ui/svg-icons/content/content-copy';
+export DashboardIcon from 'material-ui/svg-icons/action/dashboard';
+export DeleteIcon from 'material-ui/svg-icons/action/delete';
+export DoneIcon from 'material-ui/svg-icons/action/done-all';
+export EditIcon from 'material-ui/svg-icons/content/create';
+export FingerprintIcon from 'material-ui/svg-icons/action/fingerprint';
+export LinkIcon from 'material-ui/svg-icons/content/link';
+export LockedIcon from 'material-ui/svg-icons/action/lock';
+export MoveIcon from 'material-ui/svg-icons/action/open-with';
+export NextIcon from 'material-ui/svg-icons/navigation/arrow-forward';
+export PrevIcon from 'material-ui/svg-icons/navigation/arrow-back';
+export PrintIcon from 'material-ui/svg-icons/action/print';
+export RefreshIcon from 'material-ui/svg-icons/action/autorenew';
+export SaveIcon from 'material-ui/svg-icons/content/save';
+export SendIcon from 'material-ui/svg-icons/content/send';
+export SnoozeIcon from 'material-ui/svg-icons/av/snooze';
+export StarCircleIcon from 'material-ui/svg-icons/action/stars';
+export StarIcon from 'material-ui/svg-icons/toggle/star';
+export StarOutlineIcon from 'material-ui/svg-icons/toggle/star-border';
+export VerifyIcon from 'material-ui/svg-icons/action/verified-user';
+export VisibleIcon from 'material-ui/svg-icons/image/remove-red-eye';
+export VpnIcon from 'material-ui/svg-icons/notification/vpn-lock';
--- a/js/src/ui/SectionList/sectionList.css
+++ b/js/src/ui/SectionList/sectionList.css
@@ -16,8 +16,8 @@
 */

 .section {
-  overflow-x: hidden;
  position: relative;
+  width: 100%;

  .overlay {
    background: rgba(0, 0, 0, 0.85);
@@ -33,7 +33,6 @@
  .row {
    display: flex;
    justify-content: center;
-    overflow-x: hidden;

    /* TODO: As per JS comments, the flex-base could be adjusted in the future to allow for */
    /* case where <> 3 columns are required should the need arrise from a UI pov. */
@@ -42,38 +41,28 @@
      cursor: pointer;
      display: flex;
      flex: 0 1 33.33%;
-      opacity: 0.75;
-      overflow-x: hidden;
+      max-width: 33.33%;
+      opacity: 0.85;
      padding: 0.25em;
      transition: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);

-      /* TODO: The hover and no-hover states can be improved to not "just appear" */
-      &:not(:hover) {
-        & [data-hover="hide"] {
-        }
-
-        & [data-hover="show"] {
-          display: none;
-        }
-      }
-
      &:hover {
        opacity: 1;
        z-index: 100;
-
-        & [data-hover="hide"] {
-          display: none;
-        }
-
-        & [data-hover="show"] {
-        }
      }
+    }

-      &.stretch-on:hover {
-        flex: 0 0 50%;
-      }
+    &:hover {
+      .item {
+        &.stretchOn {
+          flex: 0 1 29%;
+          max-width: 29%;

-      &.stretch-off:hover {
+          &:hover {
+            flex: 0 0 42%;
+            max-width: 42%;
+          }
+        }
      }
    }
  }
--- a/js/src/ui/SectionList/sectionList.js
+++ b/js/src/ui/SectionList/sectionList.js
@@ -74,29 +74,34 @@ export default class SectionList extends Component {
        className={ styles.row }
        key={ `row_${index}` }
      >
-        { row.map(this.renderItem) }
+        {
+          row
+            .map(this.renderItem)
+            .filter((item) => item)
+        }
      </div>
    );
  }

  renderItem = (item, index) => {
    const { noStretch, renderItem } = this.props;
+    const itemRendered = renderItem(item, index);
+
+    if (!itemRendered) {
+      return null;
+    }

-    // NOTE: Any children that is to be showed or hidden (depending on hover state)
-    // should have the data-hover="show|hide" attributes. For the current implementation
-    // this does the trick, however there may be a case for adding a hover attribute
-    // to an item (mouseEnter/mouseLeave events) and then adjusting the styling with
-    // :root[hover]/:root:not[hover] for the tragetted elements. Currently it is a
-    // CSS-only solution to let the browser do all the work via selectors.
    return (
      <div
        className={ [
          styles.item,
-          styles[`stretch-${noStretch ? 'off' : 'on'}`]
+          noStretch
+            ? styles.stretchOff
+            : styles.stretchOn
        ].join(' ') }
        key={ `item_${index}` }
      >
-        { renderItem(item, index) }
+        { itemRendered }
      </div>
    );
  }
--- a/js/src/ui/SectionList/sectionList.spec.js
+++ b/js/src/ui/SectionList/sectionList.spec.js
@@ -27,7 +27,7 @@ let instance;
 let renderItem;

 function render (props = {}) {
-  renderItem = sinon.stub();
+  renderItem = sinon.stub().returns('someThing');
  component = shallow(
    <SectionList
      className='testClass'
--- a/js/src/ui/Theme/theme.js
+++ b/js/src/ui/Theme/theme.js
@@ -23,7 +23,7 @@ const lightTheme = getMuiTheme(lightBaseTheme);
 const muiTheme = getMuiTheme(darkBaseTheme);

 muiTheme.inkBar.backgroundColor = 'transparent';
-muiTheme.paper.backgroundColor = 'rgba(0, 0, 0, 0.95)';
+muiTheme.paper.backgroundColor = 'rgb(18, 18, 18)';
 muiTheme.raisedButton.primaryTextColor = 'white';
 muiTheme.snackbar.backgroundColor = 'rgba(255, 30, 30, 0.9)';
 muiTheme.snackbar.textColor = 'rgba(255, 255, 255, 0.75)';