From 022b053a8888472a35321a81d3a38c1389194870 Mon Sep 17 00:00:00 2001 From: Razvan Boldea Date: Wed, 22 Mar 2017 17:06:43 +0200 Subject: [PATCH 1/6] https://trello.com/c/QJreU9fK/43-i-need-to-be-able-to-easily-switch-between-different-licences-when-i-manage-more-than-one when multiple licenses, one click toggles the dropdown no dropdown when just one license dropdown colors for desktop changed new nav item added we can have multiple nav items set as last item --- bower.json | 1 + main.js | 4 + src/components/header-nav/index.js | 126 ++++++++++++++++++--- src/components/header-nav/style.scss | 3 + src/components/license-dropdown/index.js | 29 +++-- src/components/license-dropdown/style.scss | 34 +++++- src/containers/header-drawer/index.js | 6 +- src/containers/header/index.js | 7 +- src/reducers/extra-actions.js | 22 +--- src/reducers/index.js | 5 +- src/reducers/license-dropdown.js | 2 +- src/reducers/link-user.js | 26 +++++ 12 files changed, 211 insertions(+), 54 deletions(-) create mode 100644 src/reducers/link-user.js diff --git a/bower.json b/bower.json index ebf55b1..0c6d48b 100644 --- a/bower.json +++ b/bower.json @@ -33,6 +33,7 @@ "resolutions": { "o-forms": "~3.5.0", "n-notification": "~5.0.0", + "fticons": "~1.5.2", "o-icons": "~4.4.2", "o-viewport": "~2.2.0", "o-overlay": "~1.12.1" diff --git a/main.js b/main.js index aa22db2..701fa17 100644 --- a/main.js +++ b/main.js @@ -38,6 +38,10 @@ const initKmtHeader = () => { ], enableMobile: true }, + //linkUser: { + // href: "https://myaccount.ft.com/", + // label: "My Account" + //}, helpers: { doRequest: (theUrl, options) => { return new Promise((res) => { return res(theUrl); }); } } diff --git a/src/components/header-nav/index.js b/src/components/header-nav/index.js index 3e19451..e5362e6 100644 --- a/src/components/header-nav/index.js +++ b/src/components/header-nav/index.js @@ -5,6 +5,12 @@ class HeaderNav extends Component { super(props); this.createItem = this.createItem.bind(this); + this.createMenuItems = this.createMenuItems.bind(this); + this.createLastMenuItems = this.createLastMenuItems.bind(this); + this.createMobileItem = this.createMobileItem.bind(this); + + this.liCls = "o-header-services__nav-item"; + this.aCls = "o-header-services__nav-link"; } shouldComponentUpdate(nextProps, nextState) { @@ -13,53 +19,143 @@ class HeaderNav extends Component { } createItem(item, index, liCls, aCls) { + if ( !item.last ) { + if (item.active === true) { + aCls += ` ${aCls}--selected`; + } + if (item.cls !== undefined) { + aCls += ` ${item.cls}`; + } + return ( +
  • + {item.label} +
    • + ); + } + } + + createMobileItem(item, index, liCls, aCls) { + + if (item.active === true) { + aCls += ` ${aCls}--selected`; + } + + if (item.last === true) { + liCls += ` ${liCls}--last`; + } + + if (item.cls !== undefined) { + aCls += ` ${item.cls}`; + } + return ( +
  • + {item.label} +
    • + ); + } + + createMenuItems(itemsArray){ + let menuItemsMarkup= []; + let menuLastItemsMarkup= []; + let anyLastElement = 0; + let lastElements = []; + let firstIndexOfLastElements = null; + + + itemsArray.forEach((element, index) => { + if (!element.last) { + menuItemsMarkup.push(this.createItem(element, index, this.liCls, this.aCls)); + } + else { + lastElements.push(element); + anyLastElement = 1; + firstIndexOfLastElements = index; + } + }); + + if (anyLastElement){ + lastElements.forEach((element, index)=>{ + menuLastItemsMarkup.push(this.createLastMenuItems(element, index, this.liCls, this.aCls)); + }); + } + + this.liCls += ` ${this.liCls}--last`; + + return ( + + ); + } + + createLastMenuItems(item, index, liCls, aCls) { if (item.active === true) { aCls += ` ${aCls}--selected`; } - if (item.last === true) { - liCls += ` ${liCls}--last`; - } + if (item.cls !== undefined) { aCls += ` ${item.cls}`; } + return ( -
  • - {item.label} -
    • + {item.label} ); } render() { const { menu } = this.props; - // if there are no items if (menu.items === undefined) { return null; } - let liCls = "o-header-services__nav-item"; - let aCls = "o-header-services__nav-link"; + const userLink = this.props.userLink; + + if (userLink.hasOwnProperty('label')) { + let userLinkMenuItem = [{ + attrs: {href: userLink.href}, + label: userLink.label, + last: true + }]; + + let userLinkInMenu = 0; + + //check for "my account" item + menu.items.forEach((element)=>{ + if (element.label === "My Account" ){ + userLinkInMenu = 1; + } + }); + + if (userLinkInMenu === 0) { + let items = [...menu.items, ...userLinkMenuItem]; + menu.items = items; + } + } // if not for the mobile version if (this.props.mobile !== true) { + return ( ); } // for the mobile version - liCls = "o-header__drawer-menu-item"; - aCls = "o-header__drawer-menu-link"; + let liCls = "o-header__drawer-menu-item"; + let aCls = "o-header__drawer-menu-link"; + return ( ); diff --git a/src/components/header-nav/style.scss b/src/components/header-nav/style.scss index c8240fd..9957a45 100644 --- a/src/components/header-nav/style.scss +++ b/src/components/header-nav/style.scss @@ -6,4 +6,7 @@ .o-header-services__nav-item--last { float: right; + .o-header-services__nav-link { + font-weight: 400; + } } diff --git a/src/components/license-dropdown/index.js b/src/components/license-dropdown/index.js index af717c2..dcd54e7 100644 --- a/src/components/license-dropdown/index.js +++ b/src/components/license-dropdown/index.js @@ -57,7 +57,6 @@ class LicenseDropdown extends Component { render() { const { licenseData } = this.props; - // if there are no licenses if (licenseData.items.length === 0) { return null; @@ -72,21 +71,29 @@ class LicenseDropdown extends Component { if (this.props.mobile === true) { wrapperCls += ` ${wrapperCls}--mobile`; } + let kmtHeaderLicenseLabel= ""; + licenseData.items.length > 1 ? kmtHeaderLicenseLabel = "kmt-header__license-label" : kmtHeaderLicenseLabel = "kmt-header__license-label--noIcon"; return ( +
    -
    +
    {licenseData.selected.label}
    -
    - -
    + { + (licenseData.items.length > 1) ? +
    + +
    + : + null + }
    ); } diff --git a/src/components/license-dropdown/style.scss b/src/components/license-dropdown/style.scss index 55843cf..672a361 100644 --- a/src/components/license-dropdown/style.scss +++ b/src/components/license-dropdown/style.scss @@ -15,6 +15,15 @@ .kmt-forms__select { max-width: 100%; + background: none; + } + + select, + option { + @include oTypographySans(s); + background-color: oColorsGetPaletteColor("white"); + color: oColorsGetPaletteColor("black"); + border: 0; } } @@ -36,6 +45,7 @@ position: relative; padding-right: 15px; color: oColorsGetPaletteColor("white"); + font-weight: 400; // ignoring the nesting warning as it's not actually a nested class (it's BEM) // scss-lint:disable NestingDepth @@ -55,7 +65,18 @@ } } + } + &-label--noIcon { + position: relative; + padding-right: 15px; + color: oColorsGetPaletteColor("white"); + font-weight: 400; + // ignoring the nesting warning as it's not actually a nested class (it's BEM) + // scss-lint:disable NestingDepth + &:hover { + color: oColorsGetPaletteColor("grey-tint2"); + } } &-dropdown { @@ -73,10 +94,21 @@ display: block; } + select { + height: auto; + } + option { + padding: 5px 0; + } + select, option { @include oTypographySans(s); - font-weight: inherit; + font-weight: 400; + font-size: 13px; + background-color: oColorsGetPaletteColor("black"); + color: oColorsGetPaletteColor("white"); + border: 0; } } } diff --git a/src/containers/header-drawer/index.js b/src/containers/header-drawer/index.js index 7a5ba3b..905d6dc 100644 --- a/src/containers/header-drawer/index.js +++ b/src/containers/header-drawer/index.js @@ -14,6 +14,7 @@ class HeaderDrawerContainer extends Component { } render() { + const userLink = this.props.userLink; return (
    @@ -25,7 +26,7 @@ class HeaderDrawerContainer extends Component {
    - +
    @@ -48,7 +49,8 @@ const mapStateToProps = (store) => { return { menu: store.KmtHeaderNs.mainMenu, headerTitle: store.KmtHeaderNs.headerTitle, - extraActions: store.KmtHeaderNs.extraActions + extraActions: store.KmtHeaderNs.extraActions, + userLink: store.KmtHeaderNs.linkUser }; }; diff --git a/src/containers/header/index.js b/src/containers/header/index.js index 5ef52ae..004555d 100644 --- a/src/containers/header/index.js +++ b/src/containers/header/index.js @@ -45,6 +45,8 @@ class HeaderContainer extends Component { extraActions: this.props.extraActions }; + const userLink = this.props.userLink; + const overlayProps = { title: "Help us to improve.", closeFn: this.closeFeedback @@ -53,7 +55,7 @@ class HeaderContainer extends Component { return (
    - + {this.props.feedbackIsExpanded === true ? @@ -83,7 +85,8 @@ const mapStateToProps = (store) => { headerTitle: store.KmtHeaderNs.headerTitle, extraActions: store.KmtHeaderNs.extraActions, feedbackIsExpanded: store.KmtHeaderNs.feedbackForm.isExpanded, - feedbackIsValid: store.KmtHeaderNs.feedbackForm.isValid + feedbackIsValid: store.KmtHeaderNs.feedbackForm.isValid, + userLink: store.KmtHeaderNs.linkUser }; }; diff --git a/src/reducers/extra-actions.js b/src/reducers/extra-actions.js index 8e17ad8..07586b7 100644 --- a/src/reducers/extra-actions.js +++ b/src/reducers/extra-actions.js @@ -1,32 +1,14 @@ import { PropTypes } from 'react'; -import { getCookieUserDetails } from './../helpers/helpers'; - -// get the user details from the cookies -const cookieUserDetails = getCookieUserDetails(); - export const extraActionsTypes ={ items: PropTypes.array }; - const initialState = { items: [ - { - label: "Sign out", - href: "https://accounts.ft.com/logout" - } + ] }; -let userLink = {}; -if (cookieUserDetails.username) { - userLink = { - label: cookieUserDetails.username, - href: "https://myaccount.ft.com/" - }; -} - -// add an extra item to the links -const defaultState = Object.assign({}, initialState, {items : [userLink, ...initialState.items]}); +const defaultState = Object.assign({}, initialState, {items : [ ...initialState.items]}); const extraActions = (state = defaultState, action = {}) => { return state; diff --git a/src/reducers/index.js b/src/reducers/index.js index ed501b5..b682519 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -6,6 +6,7 @@ import extraActions from './extra-actions'; import licenseChange from './license-change'; import feedbackForm from './feedback-form'; import helpers from './helpers'; +import linkUser from './link-user'; const mainReducers = { mainMenu, @@ -14,7 +15,8 @@ const mainReducers = { extraActions, licenseChange, feedbackForm, - helpers + helpers, + linkUser }; // combine the app reducers @@ -22,6 +24,5 @@ const KmtHeaderNs = combineReducers(mainReducers); // create a namespace for this app store const KmtHeaderApp = combineReducers(Object.assign({}, {KmtHeaderNs})); - export { KmtHeaderNs }; export default KmtHeaderApp; diff --git a/src/reducers/license-dropdown.js b/src/reducers/license-dropdown.js index 7be4c98..1dafc17 100644 --- a/src/reducers/license-dropdown.js +++ b/src/reducers/license-dropdown.js @@ -15,7 +15,7 @@ const cookieUserDetails = getCookieUserDetails(); const initialState = { items: [], selected: { - licenceId: "", + licenseId: "", label: "" }, show: false, diff --git a/src/reducers/link-user.js b/src/reducers/link-user.js new file mode 100644 index 0000000..25479e8 --- /dev/null +++ b/src/reducers/link-user.js @@ -0,0 +1,26 @@ +import { getCookieUserDetails } from './../helpers/helpers'; + +const cookieUserDetails = getCookieUserDetails(); + +const initialState = { + userLink: { + + } +}; + +let userLink = {}; + +if (cookieUserDetails.username) { + userLink = { + label: cookieUserDetails.username, + href: "https://myaccount.ft.com/" + }; +} + +const defaultState = Object.assign({}, initialState.userLink, userLink ); + +const linkUser = (state = defaultState, action = {}) => { + return state; +}; + +export default linkUser; From 284fe3523a02d23840a2cb20844c7d76795c726f Mon Sep 17 00:00:00 2001 From: Razvan Boldea Date: Thu, 23 Mar 2017 13:46:07 +0200 Subject: [PATCH 2/6] header corrections moved "My account" 'navigation item in main.js. reveresed array for last nav items --- main.js | 11 +- src/components/header-nav/index.js | 134 ++++----------------- src/components/license-dropdown/index.js | 6 +- src/components/license-dropdown/style.scss | 27 +++-- src/containers/header-drawer/index.js | 4 +- src/containers/header/index.js | 5 +- src/reducers/index.js | 4 +- src/reducers/link-user.js | 26 ---- 8 files changed, 56 insertions(+), 161 deletions(-) delete mode 100644 src/reducers/link-user.js diff --git a/main.js b/main.js index 701fa17..2185ac0 100644 --- a/main.js +++ b/main.js @@ -34,14 +34,17 @@ const initKmtHeader = () => { }, cls: "kat-feedback__btn", last: true + }, + { + label: "My Account", + attrs: { + href: "https://myaccount.ft.com/" + }, + last: true } ], enableMobile: true }, - //linkUser: { - // href: "https://myaccount.ft.com/", - // label: "My Account" - //}, helpers: { doRequest: (theUrl, options) => { return new Promise((res) => { return res(theUrl); }); } } diff --git a/src/components/header-nav/index.js b/src/components/header-nav/index.js index e5362e6..4fb6cb4 100644 --- a/src/components/header-nav/index.js +++ b/src/components/header-nav/index.js @@ -5,12 +5,6 @@ class HeaderNav extends Component { super(props); this.createItem = this.createItem.bind(this); - this.createMenuItems = this.createMenuItems.bind(this); - this.createLastMenuItems = this.createLastMenuItems.bind(this); - this.createMobileItem = this.createMobileItem.bind(this); - - this.liCls = "o-header-services__nav-item"; - this.aCls = "o-header-services__nav-link"; } shouldComponentUpdate(nextProps, nextState) { @@ -19,89 +13,19 @@ class HeaderNav extends Component { } createItem(item, index, liCls, aCls) { - if ( !item.last ) { - if (item.active === true) { - aCls += ` ${aCls}--selected`; - } - if (item.cls !== undefined) { - aCls += ` ${item.cls}`; - } - return ( -
  • - {item.label} -
    • - ); - } - } - - createMobileItem(item, index, liCls, aCls) { - - if (item.active === true) { - aCls += ` ${aCls}--selected`; - } - - if (item.last === true) { - liCls += ` ${liCls}--last`; - } - - if (item.cls !== undefined) { - aCls += ` ${item.cls}`; - } - return ( -
  • - {item.label} -
    • - ); - } - - createMenuItems(itemsArray){ - let menuItemsMarkup= []; - let menuLastItemsMarkup= []; - let anyLastElement = 0; - let lastElements = []; - let firstIndexOfLastElements = null; - - - itemsArray.forEach((element, index) => { - if (!element.last) { - menuItemsMarkup.push(this.createItem(element, index, this.liCls, this.aCls)); - } - else { - lastElements.push(element); - anyLastElement = 1; - firstIndexOfLastElements = index; - } - }); - - if (anyLastElement){ - lastElements.forEach((element, index)=>{ - menuLastItemsMarkup.push(this.createLastMenuItems(element, index, this.liCls, this.aCls)); - }); - } - - this.liCls += ` ${this.liCls}--last`; - - return ( -
      - {menuItemsMarkup} -
    • - {menuLastItemsMarkup} -
      • -
    - ); - } - - createLastMenuItems(item, index, liCls, aCls) { if (item.active === true) { aCls += ` ${aCls}--selected`; } - + if (item.last === true) { + liCls += ` ${liCls}--last`; + } if (item.cls !== undefined) { aCls += ` ${item.cls}`; } - return ( - {item.label} +
  • + {item.label} +
    • ); } @@ -112,50 +36,40 @@ class HeaderNav extends Component { return null; } - const userLink = this.props.userLink; - - if (userLink.hasOwnProperty('label')) { - let userLinkMenuItem = [{ - attrs: {href: userLink.href}, - label: userLink.label, - last: true - }]; + let liCls = "o-header-services__nav-item"; + let aCls = "o-header-services__nav-link"; - let userLinkInMenu = 0; - - //check for "my account" item - menu.items.forEach((element)=>{ - if (element.label === "My Account" ){ - userLinkInMenu = 1; - } - }); - - if (userLinkInMenu === 0) { - let items = [...menu.items, ...userLinkMenuItem]; - menu.items = items; + const lastItems = []; + let allItems = menu.items.filter(item => { + if (item.last === true) { + lastItems.push(item); + return false; } - } + return true; + }); + + allItems = allItems.concat(lastItems.reverse()); // if not for the mobile version if (this.props.mobile !== true) { - return ( ); } // for the mobile version - let liCls = "o-header__drawer-menu-item"; - let aCls = "o-header__drawer-menu-link"; - + liCls = "o-header__drawer-menu-item"; + aCls = "o-header__drawer-menu-link"; return ( ); @@ -166,7 +80,7 @@ import { menuTypes } from "../../reducers/main-menu"; HeaderNav.propTypes = { mobile: PropTypes.bool, - menu: PropTypes.shape(menuTypes).isRequired + menu: PropTypes.shape(menuTypes).isRequired, }; HeaderNav.defaultProps = { diff --git a/src/components/license-dropdown/index.js b/src/components/license-dropdown/index.js index dcd54e7..7e2dadd 100644 --- a/src/components/license-dropdown/index.js +++ b/src/components/license-dropdown/index.js @@ -72,6 +72,7 @@ class LicenseDropdown extends Component { wrapperCls += ` ${wrapperCls}--mobile`; } let kmtHeaderLicenseLabel= ""; + let className =""; licenseData.items.length > 1 ? kmtHeaderLicenseLabel = "kmt-header__license-label" : kmtHeaderLicenseLabel = "kmt-header__license-label--noIcon"; return ( @@ -83,10 +84,11 @@ class LicenseDropdown extends Component { { (licenseData.items.length > 1) ?
    - { licenseData.items.map((item, index) => { - return ; + licenseData.selected.licenceId === item.licenceId ? className = "kmt-forms-option--selected" : className = null; + return ; }) } diff --git a/src/components/license-dropdown/style.scss b/src/components/license-dropdown/style.scss index 672a361..5f35d70 100644 --- a/src/components/license-dropdown/style.scss +++ b/src/components/license-dropdown/style.scss @@ -21,9 +21,10 @@ select, option { @include oTypographySans(s); - background-color: oColorsGetPaletteColor("white"); + background-color: oColorsGetPaletteColor("pink-tint2"); color: oColorsGetPaletteColor("black"); border: 0; + padding: 11px 0px; } } @@ -82,11 +83,12 @@ &-dropdown { display: none; margin-top: 1px; - padding: 20px; + padding: 19px 0 0; position: absolute; background-color: oColorsGetPaletteColor("warm-4"); cursor: auto; z-index: 1; + opacity: 0.9; // ignoring the nesting warning as it's not actually a nested class (it's BEM) // scss-lint:disable NestingDepth @@ -94,22 +96,29 @@ display: block; } - select { - height: auto; - } - option { - padding: 5px 0; - } + select, option { @include oTypographySans(s); font-weight: 400; font-size: 13px; - background-color: oColorsGetPaletteColor("black"); + background-color: oColorsGetPaletteColor("warm-4"); color: oColorsGetPaletteColor("white"); border: 0; } + + select { + height: auto; + padding: 0; + } + option { + padding: 11px 20px; + + } + .kmt-forms-option--selected { + background-color: oColorsGetPaletteColor("black"); + } } } } diff --git a/src/containers/header-drawer/index.js b/src/containers/header-drawer/index.js index 905d6dc..5fc6b62 100644 --- a/src/containers/header-drawer/index.js +++ b/src/containers/header-drawer/index.js @@ -14,7 +14,6 @@ class HeaderDrawerContainer extends Component { } render() { - const userLink = this.props.userLink; return (
    @@ -26,7 +25,7 @@ class HeaderDrawerContainer extends Component {
    - +
    @@ -50,7 +49,6 @@ const mapStateToProps = (store) => { menu: store.KmtHeaderNs.mainMenu, headerTitle: store.KmtHeaderNs.headerTitle, extraActions: store.KmtHeaderNs.extraActions, - userLink: store.KmtHeaderNs.linkUser }; }; diff --git a/src/containers/header/index.js b/src/containers/header/index.js index 004555d..eb6b6a0 100644 --- a/src/containers/header/index.js +++ b/src/containers/header/index.js @@ -45,8 +45,6 @@ class HeaderContainer extends Component { extraActions: this.props.extraActions }; - const userLink = this.props.userLink; - const overlayProps = { title: "Help us to improve.", closeFn: this.closeFeedback @@ -55,7 +53,7 @@ class HeaderContainer extends Component { return (
    - + {this.props.feedbackIsExpanded === true ? @@ -86,7 +84,6 @@ const mapStateToProps = (store) => { extraActions: store.KmtHeaderNs.extraActions, feedbackIsExpanded: store.KmtHeaderNs.feedbackForm.isExpanded, feedbackIsValid: store.KmtHeaderNs.feedbackForm.isValid, - userLink: store.KmtHeaderNs.linkUser }; }; diff --git a/src/reducers/index.js b/src/reducers/index.js index b682519..a7b0ceb 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -6,7 +6,6 @@ import extraActions from './extra-actions'; import licenseChange from './license-change'; import feedbackForm from './feedback-form'; import helpers from './helpers'; -import linkUser from './link-user'; const mainReducers = { mainMenu, @@ -15,8 +14,7 @@ const mainReducers = { extraActions, licenseChange, feedbackForm, - helpers, - linkUser + helpers }; // combine the app reducers diff --git a/src/reducers/link-user.js b/src/reducers/link-user.js deleted file mode 100644 index 25479e8..0000000 --- a/src/reducers/link-user.js +++ /dev/null @@ -1,26 +0,0 @@ -import { getCookieUserDetails } from './../helpers/helpers'; - -const cookieUserDetails = getCookieUserDetails(); - -const initialState = { - userLink: { - - } -}; - -let userLink = {}; - -if (cookieUserDetails.username) { - userLink = { - label: cookieUserDetails.username, - href: "https://myaccount.ft.com/" - }; -} - -const defaultState = Object.assign({}, initialState.userLink, userLink ); - -const linkUser = (state = defaultState, action = {}) => { - return state; -}; - -export default linkUser; From cb45d95b86905a37857c2f009d789ce3f999d34e Mon Sep 17 00:00:00 2001 From: Razvan Boldea Date: Thu, 23 Mar 2017 15:28:33 +0200 Subject: [PATCH 3/6] Corrections to license-dropdown (size, and styling) if license.items.lenght > 4 , select size is 4 else if license.items.lenght > 1 select size is license.items.lenght --- src/components/license-dropdown/index.js | 4 ++-- src/components/license-dropdown/style.scss | 10 +--------- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/components/license-dropdown/index.js b/src/components/license-dropdown/index.js index 7e2dadd..ce8db23 100644 --- a/src/components/license-dropdown/index.js +++ b/src/components/license-dropdown/index.js @@ -74,7 +74,7 @@ class LicenseDropdown extends Component { let kmtHeaderLicenseLabel= ""; let className =""; licenseData.items.length > 1 ? kmtHeaderLicenseLabel = "kmt-header__license-label" : kmtHeaderLicenseLabel = "kmt-header__license-label--noIcon"; - + return (
    @@ -84,7 +84,7 @@ class LicenseDropdown extends Component { { (licenseData.items.length > 1) ?
    - { licenseData.items.map((item, index) => { licenseData.selected.licenceId === item.licenceId ? className = "kmt-forms-option--selected" : className = null; diff --git a/src/components/license-dropdown/style.scss b/src/components/license-dropdown/style.scss index 5f35d70..dd0c899 100644 --- a/src/components/license-dropdown/style.scss +++ b/src/components/license-dropdown/style.scss @@ -70,14 +70,8 @@ &-label--noIcon { position: relative; - padding-right: 15px; color: oColorsGetPaletteColor("white"); font-weight: 400; - // ignoring the nesting warning as it's not actually a nested class (it's BEM) - // scss-lint:disable NestingDepth - &:hover { - color: oColorsGetPaletteColor("grey-tint2"); - } } &-dropdown { @@ -89,10 +83,8 @@ cursor: auto; z-index: 1; opacity: 0.9; - - // ignoring the nesting warning as it's not actually a nested class (it's BEM) - // scss-lint:disable NestingDepth &--expanded { + overflow-y: scroll; display: block; } From af8d3e82ce11d7d99c5220a1c91f927f9571cec7 Mon Sep 17 00:00:00 2001 From: Razvan Boldea Date: Thu, 23 Mar 2017 15:51:37 +0200 Subject: [PATCH 4/6] fallback to cursor : default when only one license removed white background color from &-label--noIcon removed last " , " from proptypes licenseData.items.length is now stored in a var --- src/components/header-nav/index.js | 2 +- src/components/license-dropdown/index.js | 11 ++++++----- src/components/license-dropdown/style.scss | 6 ++++-- src/containers/header-drawer/index.js | 2 +- src/containers/header/index.js | 2 +- 5 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/header-nav/index.js b/src/components/header-nav/index.js index 4fb6cb4..d60b910 100644 --- a/src/components/header-nav/index.js +++ b/src/components/header-nav/index.js @@ -80,7 +80,7 @@ import { menuTypes } from "../../reducers/main-menu"; HeaderNav.propTypes = { mobile: PropTypes.bool, - menu: PropTypes.shape(menuTypes).isRequired, + menu: PropTypes.shape(menuTypes).isRequired }; HeaderNav.defaultProps = { diff --git a/src/components/license-dropdown/index.js b/src/components/license-dropdown/index.js index ce8db23..4779e7b 100644 --- a/src/components/license-dropdown/index.js +++ b/src/components/license-dropdown/index.js @@ -57,8 +57,9 @@ class LicenseDropdown extends Component { render() { const { licenseData } = this.props; + let licenseDataLength = licenseData.items.length; // if there are no licenses - if (licenseData.items.length === 0) { + if (licenseDataLength === 0) { return null; } @@ -73,8 +74,8 @@ class LicenseDropdown extends Component { } let kmtHeaderLicenseLabel= ""; let className =""; - licenseData.items.length > 1 ? kmtHeaderLicenseLabel = "kmt-header__license-label" : kmtHeaderLicenseLabel = "kmt-header__license-label--noIcon"; - + licenseDataLength > 1 ? kmtHeaderLicenseLabel = "kmt-header__license-label" : kmtHeaderLicenseLabel = "kmt-header__license-label--noIcon"; + return (
    @@ -82,9 +83,9 @@ class LicenseDropdown extends Component { {licenseData.selected.label}
    { - (licenseData.items.length > 1) ? + (licenseDataLength > 1) ?
    - { licenseData.items.map((item, index) => { licenseData.selected.licenceId === item.licenceId ? className = "kmt-forms-option--selected" : className = null; diff --git a/src/components/license-dropdown/style.scss b/src/components/license-dropdown/style.scss index dd0c899..79ebb87 100644 --- a/src/components/license-dropdown/style.scss +++ b/src/components/license-dropdown/style.scss @@ -70,8 +70,8 @@ &-label--noIcon { position: relative; - color: oColorsGetPaletteColor("white"); font-weight: 400; + cursor: default; } &-dropdown { @@ -83,8 +83,10 @@ cursor: auto; z-index: 1; opacity: 0.9; + // ignoring the nesting warning as it's not actually a nested class (it's BEM) + // scss-lint:disable NestingDepth &--expanded { - overflow-y: scroll; + overflow-y: auto; display: block; } diff --git a/src/containers/header-drawer/index.js b/src/containers/header-drawer/index.js index 5fc6b62..7a5ba3b 100644 --- a/src/containers/header-drawer/index.js +++ b/src/containers/header-drawer/index.js @@ -48,7 +48,7 @@ const mapStateToProps = (store) => { return { menu: store.KmtHeaderNs.mainMenu, headerTitle: store.KmtHeaderNs.headerTitle, - extraActions: store.KmtHeaderNs.extraActions, + extraActions: store.KmtHeaderNs.extraActions }; }; diff --git a/src/containers/header/index.js b/src/containers/header/index.js index eb6b6a0..ef638f1 100644 --- a/src/containers/header/index.js +++ b/src/containers/header/index.js @@ -83,7 +83,7 @@ const mapStateToProps = (store) => { headerTitle: store.KmtHeaderNs.headerTitle, extraActions: store.KmtHeaderNs.extraActions, feedbackIsExpanded: store.KmtHeaderNs.feedbackForm.isExpanded, - feedbackIsValid: store.KmtHeaderNs.feedbackForm.isValid, + feedbackIsValid: store.KmtHeaderNs.feedbackForm.isValid }; }; From d7d860447e977b9d9a622178ec2dea21bdecaaca Mon Sep 17 00:00:00 2001 From: Razvan Boldea Date: Thu, 23 Mar 2017 16:51:16 +0200 Subject: [PATCH 5/6] cursor is now auto instead of default selected mobile license background is now expanded to full width --- src/components/header-extra-actions/index.js | 2 +- .../header-extra-actions/style.scss | 3 +++ src/components/license-dropdown/style.scss | 21 +++++++++++++++---- style/main.scss | 1 + 4 files changed, 22 insertions(+), 5 deletions(-) create mode 100644 src/components/header-extra-actions/style.scss diff --git a/src/components/header-extra-actions/index.js b/src/components/header-extra-actions/index.js index 5d01f0f..940f2d3 100644 --- a/src/components/header-extra-actions/index.js +++ b/src/components/header-extra-actions/index.js @@ -36,7 +36,7 @@ class HeaderExtraActions extends Component {