From 5c439baca6c8832600ce05d681ce0612f48f8263 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 9 May 2017 18:17:35 -0700 Subject: [PATCH] Make dropdowns fancy --- ui/src/shared/components/Dropdown.js | 154 +++++++++++++----- ui/src/shared/constants/index.js | 3 + ui/src/style/components/dropdown.scss | 43 ++--- ui/src/style/components/fancy-scrollbars.scss | 6 + 4 files changed, 133 insertions(+), 73 deletions(-) diff --git a/ui/src/shared/components/Dropdown.js b/ui/src/shared/components/Dropdown.js index f1858c7a6..510e12502 100644 --- a/ui/src/shared/components/Dropdown.js +++ b/ui/src/shared/components/Dropdown.js @@ -2,6 +2,8 @@ import React, {Component, PropTypes} from 'react' import {Link} from 'react-router' import classnames from 'classnames' import OnClickOutside from 'shared/components/OnClickOutside' +import FancyScrollbox from 'shared/components/FancyScrollbar' +import {DROPDOWN_MENU_MAX_HEIGHT, DROPDOWN_MENU_ITEM_THRESHOLD} from 'shared/constants/index' class Dropdown extends Component { constructor(props) { @@ -52,17 +54,116 @@ class Dropdown extends Component { action.handler(item) } + renderShortMenu() { + const {actions, addNew, items, menuWidth, menuLabel} = this.props + return ( + + ) + } + + renderLongMenu() { + const {actions, addNew, items, menuWidth, menuLabel} = this.props + return ( + + ) + } + render() { const { items, selected, className, iconName, - actions, - addNew, buttonSize, buttonColor, - menuWidth, } = this.props const {isOpen} = this.state @@ -78,47 +179,11 @@ class Dropdown extends Component { {selected} - {isOpen - ? + {(isOpen && items.length < DROPDOWN_MENU_ITEM_THRESHOLD) + ? this.renderShortMenu() + : null} + {(isOpen && items.length >= DROPDOWN_MENU_ITEM_THRESHOLD) + ? this.renderLongMenu() : null} ) @@ -152,6 +217,7 @@ Dropdown.propTypes = { buttonSize: string, buttonColor: string, menuWidth: string, + menuLabel: string, } export default OnClickOutside(Dropdown) diff --git a/ui/src/shared/constants/index.js b/ui/src/shared/constants/index.js index f7867058b..48aeb02b8 100644 --- a/ui/src/shared/constants/index.js +++ b/ui/src/shared/constants/index.js @@ -379,6 +379,9 @@ export const STROKE_WIDTH = { light: 1.5, } +export const DROPDOWN_MENU_MAX_HEIGHT = '270px' +export const DROPDOWN_MENU_ITEM_THRESHOLD = 10 + export const HEARTBEAT_INTERVAL = 10000 // ms export const PRESENTATION_MODE_ANIMATION_DELAY = 0 // In milliseconds. diff --git a/ui/src/style/components/dropdown.scss b/ui/src/style/components/dropdown.scss index 06b5713d3..4e96bc0b4 100644 --- a/ui/src/style/components/dropdown.scss +++ b/ui/src/style/components/dropdown.scss @@ -6,7 +6,7 @@ */ $dropdown-menu-default-width: 100%; -$dropdown-menu-max-height: 290px; +$dropdown-menu-max-height: 270px; /* Generic width modifiers @@ -73,27 +73,26 @@ $dropdown-menu-max-height: 290px; ---------------------------------------------- */ .dropdown-menu { - float: none !important; width: $dropdown-menu-default-width; - min-width: $dropdown-menu-default-width; - max-width: $dropdown-menu-default-width; - margin: 0 !important; - padding: 0 !important; + min-width: initial; + margin: 0; + padding: 0; + overflow: hidden; max-height: $dropdown-menu-max-height; - overflow: auto; - @include custom-scrollbar-round($c-pool, $c-laser); @include gradient-h($c-ocean, $c-pool); box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8); - > li { + li.dropdown-item { + position: relative; width: 100%; - font-size: 0px; &:hover { @include gradient-h($c-laser, $c-pool); } } - > li > a { + li.dropdown-item > a { + position: relative; + @include no-user-select(); width: 100%; border-radius: 0 !important; display: inline-block; @@ -119,12 +118,6 @@ $dropdown-menu-max-height: 290px; @include gradient-h($c-ocean, $c-pool); } } - > li:last-child a { - border-radius: 0 0 3px 3px; - } - > li:first-child a { - border-radius: 3px 3px 0 0; - } } .dropdown.dropdown-kapacitor .dropdown-toggle { color: $c-rainforest !important; @@ -135,10 +128,10 @@ $dropdown-menu-max-height: 290px; @include custom-scrollbar($c-rainforest, $c-honeydew); @include gradient-h($c-pool, $c-rainforest); - > li:hover { + li.dropdown-item:hover { @include gradient-h($c-laser, $c-rainforest); } - > li > a { + li.dropdown-item > a { color: $c-mint !important; &:hover { color: $g20-white !important; @@ -149,10 +142,10 @@ $dropdown-menu-max-height: 290px; @include custom-scrollbar($c-comet, $c-potassium); @include gradient-h($c-ocean, $c-comet); - > li:hover { + li.dropdown-item:hover { @include gradient-h($c-laser, $c-comet); } - > li > a { + li.dropdown-item > a { color: $c-twilight !important; &:hover { color: $g20-white !important; @@ -187,14 +180,6 @@ $dropdown-menu-max-height: 290px; Dropdown Actions ---------------------------------------------- */ -.dropdown-item { - position: relative; - - > a { - position: relative; - z-index: 1; - } -} .dropdown-item__actions { z-index: 2; position: absolute; diff --git a/ui/src/style/components/fancy-scrollbars.scss b/ui/src/style/components/fancy-scrollbars.scss index 5e1eaa32d..53f479385 100644 --- a/ui/src/style/components/fancy-scrollbars.scss +++ b/ui/src/style/components/fancy-scrollbars.scss @@ -47,4 +47,10 @@ $scrollbar-color-kap-b: $c-pool; .fancy-scroll--kapacitor { .fancy-scroll--thumb-h { @include gradient-h($scrollbar-color-kap-a,$scrollbar-color-kap-b); } .fancy-scroll--thumb-v { @include gradient-v($scrollbar-color-kap-a,$scrollbar-color-kap-b); } +} + +/* Dropdown Theme Scrollbars */ +ul.dropdown-menu { + .fancy-scroll--thumb-h { @include gradient-h($c-neutrino,$c-laser); } + .fancy-scroll--thumb-v { @include gradient-v($c-neutrino,$c-laser); } } \ No newline at end of file