From c6c9c2ef579b689116cb9f71b7b21a57a9a4ad32 Mon Sep 17 00:00:00 2001 From: Vladimir Kharlampidi Date: Sun, 6 Dec 2015 22:57:18 +0300 Subject: [PATCH] Autocomplete Component --- gulpfile.js | 3 +- modules.json | 8 + src/js/autocomplete.js | 590 ++++++++++++++++++ src/less/ios/autocomplete.less | 78 +++ src/less/ios/framework7.ios.colors.less | 6 + src/less/ios/framework7.ios.less | 1 + src/less/ios/lists.less | 5 +- src/less/material/autocomplete.less | 65 ++ .../material/framework7.material.colors.less | 9 + src/less/material/framework7.material.less | 1 + src/less/material/lists.less | 7 +- 11 files changed, 767 insertions(+), 6 deletions(-) create mode 100644 src/js/autocomplete.js create mode 100644 src/less/ios/autocomplete.less create mode 100644 src/less/material/autocomplete.less diff --git a/gulpfile.js b/gulpfile.js index acec716eed..706dc5e953 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,5 +1,5 @@ (function(){ - 'use strict'; + 'use strict'; var gulp = require('gulp'), connect = require('gulp-connect'), open = require('gulp-open'), @@ -98,6 +98,7 @@ 'src/js/push-state.js', 'src/js/swiper-init.js', 'src/js/photo-browser.js', + 'src/js/autocomplete.js', 'src/js/picker.js', 'src/js/calendar.js', 'src/js/notifications.js', diff --git a/modules.json b/modules.json index 3f1e8c06c2..8adc8b33ed 100644 --- a/modules.json +++ b/modules.json @@ -215,6 +215,14 @@ }, "dependencies" : ["swiper"] }, + "autocomplete": { + "js" : ["src/js/autocomplete.js"], + "less": { + "ios": ["src/less/ios/autocomplete.less"], + "material": ["src/less/material/autocomplete.less"] + }, + "dependencies" : ["searchbar"] + }, "notifications": { "js" : ["src/js/notifications.js"], "less": { diff --git a/src/js/autocomplete.js b/src/js/autocomplete.js new file mode 100644 index 0000000000..6316586b32 --- /dev/null +++ b/src/js/autocomplete.js @@ -0,0 +1,590 @@ +/*=============================================================================== +************ Autocomplete ************ +===============================================================================*/ +var Autocomplete = function (params) { + var a = this; + + // Params + var defaults = { + // Standalone Options + // opener: undefined, + popupCloseText: 'Close', + backText: 'Back', + searchbarPlaceholderText: 'Search...', + searchbarCancelText: 'Cancel', + openIn: 'page', + backOnSelect: false, + notFoundText: 'Nothing found', + // pageTitle: undefined, + + // Handle Data + // source: undefined, + // limit: undefined, + valueProperty: 'id', + textProperty: 'text', + + // Dropdown Options + // dropdownPlaceholderText: 'Type anything...', + updateInputValueOnSelect: true, + expandInput: false, + + // Preloader + preloaderColor: false, + preloader: false, + + // Templates + // itemTemplate: undefined, + // naavbarTemplate: undefined, + // pageTemplate: undefined, + // searchbarTemplate: undefined, + // dropD: undefined, + // dropdownItemTemplate: undefined, + // dropdownPlaceholderTemplate: undefined + + // Color themes + // toolbarTheme: undefined, + // navbarTheme: undefined, + // formTheme: undefined, + + // Callbacks + //onChange: function (a, value) - for not dropdown + //onOpen: function (a) + //onClose: function (a) + }; + + params = params || {}; + for (var def in defaults) { + if (typeof params[def] === 'undefined') { + params[def] = defaults[def]; + } + } + a.params = params; + + // Opener Link & View + if (a.params.opener) { + a.opener = $(a.params.opener); + } + var view = a.params.view; + if (!a.params.view && a.opener && a.opener.length) { + // Find related view + view = a.opener.parents('.' + app.params.viewClass); + if (view.length === 0) return; + view = view[0].f7View; + } + + // Input + if (a.params.input) { + a.input = $(a.params.input); + if (a.input.length === 0 && a.params.openIn === 'dropdown') return; + } + + // Array with selected items + a.value = a.params.value || []; + + // ID & Inputs + a.id = (new Date()).getTime(); + a.inputType = a.params.multiple ? 'checkbox' : 'radio'; + a.inputName = a.inputType + '-' + a.id; + + // Is Material + var material = app.params.material; + + // Back On Select + var backOnSelect = a.params.backOnSelect; + + if (a.params.openIn !== 'dropdown') { + // Item Template + a.itemTemplate = t7.compile(a.params.itemTemplate || + '
  • ' + + '' + + '
    • ' + ); + // Page Layout + var pageTitle = a.params.pageTitle || ''; + if (!pageTitle && a.opener && a.opener.length) { + pageTitle = a.opener.find('.item-title').text(); + } + var pageName = 'autocomplete-' + a.inputName; + + var navbarTheme = a.params.navbarTheme, + formTheme = a.params.formTheme; + + // Navbar HTML + var navbarHTML; + var noNavbar = '', noToolbar = '', navbarLayout; + + a.navbarTemplate = t7.compile(a.params.navbarTemplate || + '
    ' + + '
    ' + + '
    ' + + '{{#if material}}' + + '' + + '{{else}}' + + '' + + '' + + '{{#if inPopup}}' + + '{{popupCloseText}}' + + '{{else}}' + + '{{backText}}' + + '{{/if}}' + + '' + + '{{/if}}' + + '
    ' + + '
    {{pageTitle}}
    ' + + '{{#if preloader}}' + + '
    ' + + '
    ' + + '
    ' + + '{{/if}}' + + '
    ' + + '
    ' + ); + navbarHTML = a.navbarTemplate({ + pageTitle: pageTitle, + backText: a.params.backText, + popupCloseText: a.params.popupCloseText, + openIn: a.params.openIn, + navbarTheme: navbarTheme, + inPopup: a.params.openIn === 'popup', + inPage: a.params.openIn === 'page', + material: material, + preloader: a.params.preloader, + preloaderColor: a.params.preloaderColor, + }); + + // Determine navbar layout type - static/fixed/through + if (a.params.openIn === 'page') { + navbarLayout = 'static'; + if (a.opener) { + if (a.opener.parents('.navbar-through').length > 0) navbarLayout = 'through'; + if (a.opener.parents('.navbar-fixed').length > 0) navbarLayout = 'fixed'; + noToolbar = a.opener.parents('.page').hasClass('no-toolbar') ? 'no-toolbar' : ''; + noNavbar = a.opener.parents('.page').hasClass('no-navbar') ? 'no-navbar' : 'navbar-' + navbarLayout; + } + else if (view.container) { + if ($(view.container).hasClass('navbar-through') || $(view.container).find('.navbar-through').length > 0) navbarLayout = 'through'; + if ($(view.container).hasClass('navbar-fixed') || $(view.container).find('.navbar-fixed').length > 0) navbarLayout = 'fixed'; + noToolbar = $(view.activePage.container).hasClass('no-toolbar') ? 'no-toolbar' : ''; + noNavbar = $(view.activePage.container).hasClass('no-navbar') ? 'no-navbar' : 'navbar-' + navbarLayout; + } + } + else { + navbarLayout = 'fixed'; + } + var searchbarHTML = + '
    ' + + '
    ' + + '' + + '' + + '
    ' + + (material ? '' : '' + a.params.searchbarCancelText + '') + + '
    ' + + '
    '; + var pageHTML = + (navbarLayout === 'through' ? navbarHTML : '') + + '
    ' + + '
    ' + + (navbarLayout === 'fixed' ? navbarHTML : '') + + searchbarHTML + + '
    ' + + (navbarLayout === 'static' ? navbarHTML : '') + + '
    ' + + '
      ' + + '
      ' + + '
      ' + + '
      • ' + a.params.notFoundText + '
      ' + + '
      ' + + '
      ' + + '
        ' + + '
        ' + + '
        ' + + '
        ' + + '
        '; + } + else { + a.dropdownItemTemplate = t7.compile(a.params.dropdownItemTemplate || + '
      • ' + + '' + + '
        • ' + ); + a.dropdownPlaceholderTemplate = t7.compile(a.params.dropdownPlaceholderTemplate || + '
      • ' + + '
        ' + + '
        ' + + '
        {{text}}
        ' + + '
        ' + + '' + + '
        • ' + ); + a.dropdownTemplate = t7.compile(a.params.dropdownTemplate || + '
        ' + + '
        ' + + '
        ' + + '
          ' + + '
          ' + + '
          ' + + '{{#if preloader}}' + + '
          ' + + '{{/if}}' + + '
          ' + ); + } + + // Define popup + a.popup = undefined; + + // Define Dropdown + a.dropdown = undefined; + + // Handle Input Value Change + a.handleInputValue = function (e) { + var query = a.input.val(); + if (a.params.source) { + a.params.source(a, query, function (items) { + var itemsHTML = ''; + var limit = a.params.limit ? Math.min(a.params.limit, items.length) : items.length; + a.items = items; + var i, j; + var regExp = new RegExp('('+query+')', 'i'); + for (i = 0; i < limit; i++) { + var itemValue = typeof items[i] === 'object' ? items[i][a.params.valueProperty] : items[i]; + itemsHTML += a.dropdownItemTemplate({ + value: itemValue, + text: (typeof items[i] !== 'object' ? items[i] : items[i][a.params.textProperty]).replace(regExp, '$1') + }); + } + if (itemsHTML === '' && query === '' && a.params.dropdownPlaceholderText) { + itemsHTML += a.dropdownPlaceholderTemplate({ + text: a.params.dropdownPlaceholderText, + }); + } + a.dropdown.find('ul').html(itemsHTML); + }); + } + }; + // Handle Drop Down Click + a.handleDropdownClick = function (e) { + var clicked = $(this); + var clickedItem; + for (var i = 0; i < a.items.length; i++) { + var itemValue = typeof a.items[i] === 'object' ? a.items[i][a.params.valueProperty] : a.items[i]; + var value = clicked.attr('data-value'); + if (itemValue === value || itemValue * 1 === value * 1) { + clickedItem = a.items[i]; + } + } + if (a.params.updateInputValueOnSelect) { + a.input.val(typeof clickedItem === 'object' ? clickedItem[a.params.textProperty] : clickedItem); + a.input.trigger('input change'); + } + + if (a.params.onChange) { + a.params.onChange(a, clickedItem); + } + + a.close(); + }; + a.positionDropDown = function () { + var listBlock = a.input.parents('.list-block'), + pageContent = a.input.parents('.page-content'), + paddingTop = parseInt(pageContent.css('padding-top'), 10), + paddingBottom = parseInt(pageContent.css('padding-top'), 10), + inputOffset = a.input.offset(), + listBlockOffset = listBlock.length > 0 ? listBlock.offset() : 0, + maxHeight = pageContent[0].scrollHeight - paddingBottom - (inputOffset.top + pageContent[0].scrollTop) - a.input[0].offsetHeight; + + a.dropdown.css({ + left: (listBlock.length > 0 ? listBlockOffset.left : inputOffset.left) + 'px', + top: inputOffset.top + pageContent[0].scrollTop + a.input[0].offsetHeight + 'px', + width: (listBlock.length > 0 ? listBlock[0].offsetWidth : a.input[0].offsetWidth) + 'px' + }); + a.dropdown.children('.autocomplete-dropdown-inner').css({ + maxHeight: maxHeight + 'px', + paddingLeft: listBlock.length > 0 && !a.params.expandInput ? inputOffset.left - (material ? 16 : 15) + 'px' : '' + }); + }; + + // Event Listeners on new page + a.pageInit = function (e) { + var page = e.detail.page; + if (page.name !== pageName) { + return; + } + var container = $(page.container); + // Init Search Bar + var searchBar = app.searchbar(container.find('.searchbar'), { + customSearch: true, + onSearch: function (searchbar, data) { + if (data.query.length === 0) { + searchbar.overlay.addClass('searchbar-overlay-active'); + } + else { + searchbar.overlay.removeClass('searchbar-overlay-active'); + } + + var i, j, k; + + if (a.params.source) { + a.params.source(a, data.query, function(items) { + var itemsHTML = ''; + var limit = a.params.limit ? Math.min(a.params.limit, items.length) : items.length; + a.items = items; + for (i = 0; i < limit; i++) { + var selected = false; + var itemValue = typeof items[i] === 'object' ? items[i][a.params.valueProperty] : items[i]; + for (j = 0; j < a.value.length; j++) { + var aValue = typeof a.value[j] === 'object' ? a.value[j][a.params.valueProperty] : a.value[j]; + if (aValue === itemValue || aValue * 1 === itemValue * 1) selected = true; + } + itemsHTML += a.itemTemplate({ + value: itemValue, + text: typeof items[i] !== 'object' ? items[i] : items[i][a.params.textProperty], + inputType: a.inputType, + id: a.id, + inputName: a.inputName, + selected: selected, + checkbox: a.inputType === 'checkbox', + material: material + }); + } + container.find('.autocomplete-found ul').html(itemsHTML); + if (items.length === 0) { + if (data.query.length !== 0) { + container.find('.autocomplete-not-found').show(); + container.find('.autocomplete-found, .autocomplete-values').hide(); + } + else { + container.find('.autocomplete-values').show(); + container.find('.autocomplete-found, .autocomplete-not-found').hide(); + } + } + else { + container.find('.autocomplete-found').show(); + container.find('.autocomplete-not-found, .autocomplete-values').hide(); + } + }); + } + } + }); + + function updateValues() { + var valuesHTML = ''; + var i; + for (i = 0; i < a.value.length; i++) { + + valuesHTML += a.itemTemplate({ + value: typeof a.value[i] === 'object' ? a.value[i][a.params.valueProperty] : a.value[i], + text: typeof a.value[i] === 'object' ? a.value[i][a.params.textProperty]: a.value[i], + inputType: a.inputType, + id: a.id, + inputName: a.inputName + '-checked', + checkbox: a.inputType === 'checkbox', + material: material, + selected: true + }); + } + container.find('.autocomplete-values ul').html(valuesHTML); + } + + // Handle Inputs + container.on('change', 'input[type="radio"], input[type="checkbox"]', function () { + var i; + var input = this; + var value = input.value; + var text = $(input).parents('li').find('.item-title').text(); + var isValues = $(input).parents('.autocomplete-values').length > 0; + var item, itemValue, aValue; + if (isValues) { + if (a.inputType === 'checkbox' && !input.checked) { + for (i = 0; i < a.value.length; i++) { + aValue = typeof a.value[i] === 'string' ? a.value[i] : a.value[i][a.params.valueProperty]; + if (aValue === value || aValue * 1 === value * 1) { + a.value.splice(i, 1); + } + } + updateValues(); + if (a.params.onChange) a.params.onChange(a, a.value); + } + return; + } + + // Find Related Item + for (i = 0; i < a.items.length; i++) { + itemValue = typeof a.items[i] === 'string' ? a.items[i] : a.items[i][a.params.valueProperty]; + if (itemValue === value || itemValue * 1 === value * 1) item = a.items[i]; + } + // Update Selected Value + if (a.inputType === 'radio') { + a.value = [item]; + } + else { + if (input.checked) { + a.value.push(item); + } + else { + for (i = 0; i < a.value.length; i++) { + aValue = typeof a.value[i] === 'string' ? a.value[i] : a.value[i][a.params.valueProperty]; + if (aValue === value || aValue * 1 === value * 1) { + a.value.splice(i, 1); + } + } + } + } + + // Update Values Block + updateValues(); + + // On Select Callback + if ((a.inputType === 'radio' && input.checked || a.inputType === 'checkbox') && a.params.onChange ) { + a.params.onChange(a, a.value); + } + if (backOnSelect && a.inputType === 'radio') { + if (a.params.openIn === 'popup') app.closeModal(a.popup); + else view.router.back(); + } + }); + + // Update Values On Page Init + updateValues(); + + if (a.params.onOpen) a.params.onOpen(a); + }; + + // Show Hide Preloader + a.showPreloader = function () { + if (a.params.openIn === 'dropdown') { + if (a.dropdown) a.dropdown.find('.autocomplete-preloader').addClass('autocomplete-preloader-visible'); + } + else $('.autocomplete-preloader').addClass('autocomplete-preloader-visible'); + }; + + a.hidePreloader = function () { + if (a.params.openIn === 'dropdown') { + if (a.dropdown) a.dropdown.find('.autocomplete-preloader').removeClass('autocomplete-preloader-visible'); + } + else $('.autocomplete-preloader').removeClass('autocomplete-preloader-visible'); + }; + + // Open Autocomplete Page/Popup + a.open = function () { + if (a.opened) return; + a.opened = true; + if (a.params.openIn === 'dropdown') { + if (!a.dropdown) { + a.dropdown = $(a.dropdownTemplate({ + preloader: a.params.preloader, + preloaderColor: a.params.preloaderColor, + })); + a.dropdown.on('click', 'label', a.handleDropdownClick); + + } + var listBlock = a.input.parents('.list-block'); + if (listBlock.length && a.input.parents('.item-content').length > 0 && a.params.expandInput) { + a.input.parents('.item-content').addClass('item-content-dropdown-expand'); + } + a.positionDropDown(); + a.input.parents('.page-content').append(a.dropdown); + a.dropdown.addClass('autocomplete-dropdown-in'); + a.input.trigger('input'); + $(window).on('resize', a.positionDropDown); + if (a.params.onOpen) a.params.onOpen(a); + } + else { + $(document).once('pageInit', '.autocomplete-page', a.pageInit); + if (a.params.openIn === 'popup') { + a.popup = app.popup( + '
          ' + + '
          ' + + pageHTML + + '
          ' + + '
          ' + ); + a.popup = $(a.popup); + a.popup.once('closed', function () { + a.popup = undefined; + a.opened = false; + if (a.params.onClose) a.params.onClose(a); + }); + } + else { + view.router.load({ + content: pageHTML + }); + $(document).once('pageBack', '.autocomplete-page', function () { + a.opened = false; + if (a.params.onClose) a.params.onClose(a); + }); + } + } + }; + a.close = function (e) { + if (!a.opened) return; + if (a.params.openIn === 'dropdown') { + if (e && e.type === 'blur' && a.dropdown.find('label.active-state').length > 0) return; + a.dropdown.removeClass('autocomplete-dropdown-in').remove(); + a.input.parents('.item-content-dropdown-expand').removeClass('item-content-dropdown-expand'); + a.opened = false; + $(window).off('resize', a.positionDropDown); + if (a.params.onClose) a.params.onClose(a); + } + if (a.params.openIn === 'popup') { + if (a.popup) app.closeModal(a.popup); + } + }; + + // Init Events + a.initEvents = function (detach) { + var method = detach ? 'off' : 'on'; + if (a.params.openIn !== 'dropdown' && a.opener) { + a.opener[method]('click', a.open); + } + if (a.params.openIn === 'dropdown' && a.input) { + a.input[method]('focus', a.open); + a.input[method]('input', a.handleInputValue); + a.input[method]('blur', a.close); + } + if (detach && a.dropdown) { + a.dropdown = null; + } + }; + + // Init/Destroy Methods + a.init = function () { + a.initEvents(); + }; + a.destroy = function () { + a.initEvents(true); + a = null; + }; + + // Init + a.init(); + + return a; +}; +app.autocomplete = function (params) { + return new Autocomplete(params); +}; \ No newline at end of file diff --git a/src/less/ios/autocomplete.less b/src/less/ios/autocomplete.less new file mode 100644 index 0000000000..c35bbfe7e7 --- /dev/null +++ b/src/less/ios/autocomplete.less @@ -0,0 +1,78 @@ +/* === Autocomplete === */ +.autocomplete-page { + .autocomplete-found { + display: block; + } + .autocomplete-not-found { + display: none; + } + .autocomplete-values { + display: block; + } + .list-block ul:empty { + display: none; + } +} +.autocomplete-preloader:not(.autocomplete-preloader-visible) { + -webkit-animation: none; + animation: none; + visibility: hidden; +} + +.autocomplete-dropdown { + background: #fff; + box-sizing: border-box; + position: absolute; + z-index: 500; + box-shadow: 0px 3px 3px rgba(0,0,0,0.2); + width: 100%; + left: 0; + .autocomplete-dropdown-inner { + position: relative; + overflow: auto; + -webkit-overflow-scrolling: touch; + height: 100%; + z-index: 1; + } + .autocomplete-preloader { + display: none; + position: absolute; + right: 15px; + bottom: 100%; + margin-bottom: 12px; + } + .autocomplete-preloader-visible { + display: block; + } + .autocomplete-dropdown-placeholder { + color: #a9a9a9; + } + .list-block { + margin: 0; + ul { + .hairline-remove(top); + .hairline-remove(bottom); + background: none !important; + } + b { + font-weight: 500; + html.ios-gt-8 & { + font-weight: 600; + } + } + } +} +.list-block { + .item-content-dropdown-expand { + .item-title.label { + width: 0; + .flex-shrink(10); + + .item-input { + margin-left: 0; + } + } + .item-input { + width: 100%; + } + } +} diff --git a/src/less/ios/framework7.ios.colors.less b/src/less/ios/framework7.ios.colors.less index b2329f1f8b..9c4c7b1cb1 100644 --- a/src/less/ios/framework7.ios.colors.less +++ b/src/less/ios/framework7.ios.colors.less @@ -277,6 +277,12 @@ Framework7 Layouts Themes background: none; } } + .autocomplete-dropdown { + background: @blockBg; + .list-block b { + color: #fff; + } + } .card { background: @blockBg; } diff --git a/src/less/ios/framework7.ios.less b/src/less/ios/framework7.ios.less index 6ea6d97f89..9dbdb5e5db 100644 --- a/src/less/ios/framework7.ios.less +++ b/src/less/ios/framework7.ios.less @@ -25,6 +25,7 @@ @import url('preloader.less'); @import url('progressbar.less'); @import url('pull-to-refresh.less'); +@import url('autocomplete.less'); @import url('swiper.less'); @import url('photo-browser.less'); @import url('picker.less'); diff --git a/src/less/ios/lists.less b/src/less/ios/lists.less index 97f8e8e228..9d3dc7edc4 100644 --- a/src/less/ios/lists.less +++ b/src/less/ios/lists.less @@ -115,11 +115,12 @@ .flexbox(); max-height: 28px; } - .smart-select .item-after { + .smart-select .item-after, .autocomplete-opener .item-after { max-width: 70%; overflow: hidden; - text-overflow:ellipsis; + text-overflow: ellipsis; position: relative; + display: block; } .item-link { .transition(300ms); diff --git a/src/less/material/autocomplete.less b/src/less/material/autocomplete.less new file mode 100644 index 0000000000..d87642fed9 --- /dev/null +++ b/src/less/material/autocomplete.less @@ -0,0 +1,65 @@ +/* === Autocomplete === */ +.autocomplete-page { + .autocomplete-found { + display: block; + } + .autocomplete-not-found { + display: none; + } + .autocomplete-values { + display: block; + } + .list-block ul:empty { + display: none; + } +} +.autocomplete-preloader:not(.autocomplete-preloader-visible) { + -webkit-animation: none; + animation: none; + visibility: hidden; +} + +.autocomplete-dropdown { + background: #fff; + box-sizing: border-box; + position: absolute; + z-index: 500; + // box-shadow: 0px 3px 3px rgba(0,0,0,0.2); + .depth(1); + width: 100%; + left: 0; + // margin-top: -2px; + .autocomplete-dropdown-inner { + position: relative; + overflow: auto; + -webkit-overflow-scrolling: touch; + height: 100%; + z-index: 1; + } + .autocomplete-preloader { + display: none; + position: absolute; + right: 15px; + bottom: 100%; + margin-bottom: 12px; + } + .autocomplete-preloader-visible { + display: block; + } + .autocomplete-dropdown-placeholder { + color: #a9a9a9; + } + .list-block { + margin: 0; + color: rgba(0,0,0,0.54); + ul { + .hairline-remove(top); + .hairline-remove(bottom); + background: none !important; + } + b { + font-weight: normal; + color: #212121; + } + } +} \ No newline at end of file diff --git a/src/less/material/framework7.material.colors.less b/src/less/material/framework7.material.colors.less index 42e2a72512..9bee7ff293 100644 --- a/src/less/material/framework7.material.colors.less +++ b/src/less/material/framework7.material.colors.less @@ -89,6 +89,15 @@ Framework7 Layouts Themes .contacts-block .list-group-title { background: none; } + .autocomplete-dropdown { + background: @blockBg; + .list-block { + color: rgba(255,255,255,0.54); + } + .list-block b { + color: rgba(255,255,255,0.87); + } + } // Forms .item-link, label.label-checkbox, label.label-radio { html:not(.watch-active-state) &:active, &.active-state { diff --git a/src/less/material/framework7.material.less b/src/less/material/framework7.material.less index 3ae2223ee0..fce939bb0d 100644 --- a/src/less/material/framework7.material.less +++ b/src/less/material/framework7.material.less @@ -27,6 +27,7 @@ @import url('preloader.less'); @import url('progressbar.less'); @import url('pull-to-refresh.less'); +@import url('autocomplete.less'); @import url('swiper.less'); @import url('photo-browser.less'); @import url('picker.less'); diff --git a/src/less/material/lists.less b/src/less/material/lists.less index 46d5980fbd..9daabce8df 100644 --- a/src/less/material/lists.less +++ b/src/less/material/lists.less @@ -104,7 +104,7 @@ text-overflow: ellipsis; max-width: 100%; } - + .item-after { white-space: nowrap; color: #757575; @@ -114,11 +114,12 @@ max-height: 28px; font-size: 14px; } - .smart-select .item-after { + .smart-select .item-after, .autocomplete-opener .item-after { max-width: 70%; overflow: hidden; - text-overflow:ellipsis; + text-overflow: ellipsis; position: relative; + display: block; } .item-link { .transition(300ms);