v1.6.1

A dialog no longer shows an empty strip below its buttons on UI5 1.153.

npm install ui5.touch.controls@1.6.1

Fixed

• Empty strip below the footer of a dialog - a sap.m.Dialog with a Toolbar or OverflowToolbar in its footer, e.g. a QuickDialog, no longer ends with an empty strip as tall as the footer below its buttons on UI5 1.153, which showed as an extra border (#9). UI5 1.153 keeps the footer of a dialog in the flow, so it no longer gets room reserved for it; up to UI5 1.144 it still does.

Tests

• A unit test checks that a dialog ends with its footer and that no button of the footer is cut off, on every supported UI5 release.

Full changelog: v1.6.0...v1.6.1 · Pull request: #10

v1.6.0

Runs on UI5 1.102 and newer, a disabled button keeps the colors of its type - in a bar as well - and a tall toolbar of a page no longer covers its content.

npm install ui5.touch.controls@1.6.0

Changed

• UI5 1.102 is the oldest supported release - it was 1.108. The underline of a Link there is that of the base theme, as the themes of 1.102 do not set it yet. CI runs the unit and UI tests on 1.102 as well.
• size of Toolbar and OverflowToolbar is the least height of the bar: it is at least as tall as a button of that size. On the OverflowToolbar it only sized the overflow button before.

Fixed

• Toolbars in a sap.m.Page - a Toolbar or OverflowToolbar in the header or the footer no longer covers the content of the page when it is taller than a toolbar of sap.m, e.g. with buttons of size L and up. The content starts below and ends above the bars as they are rendered, as in a sap.m.Dialog.
• size on a Toolbar - it has the size property of the OverflowToolbar now; before, it failed with unknown setting 'size'.
• style="Clear" - Toolbar and OverflowToolbar follow the style they inherit from sap.m.Toolbar: Clear takes away the line below the bar. Both always drew it before.
• Disabled buttons in a bar - a disabled Button in a bar, e.g. an OverflowToolbar in the footer of a page, keeps the text color of its type. With sap_fiori_3, the text of e.g. a disabled Success button was grey-blue instead of white.
• Disabled buttons under the mouse - a disabled Button keeps its look; before, the hover colors were shown on it.
• Hovered buttons in the early Horizon releases - a Button under the mouse looks like the sap.m button there as well: the shadow of 1.102 and 1.116, and the text color of Default, Back and Up on 1.102.

Tests

• The test page shows the sap.m original next to every control that replaces one, with the same cases, so the two can be compared side by side. The UI tests check that every original is there.
• A unit test compares the Button with the sap.m button of every type, at rest and under the mouse, on every supported UI5 release.
• The UI tests follow the grouped test page.

Full changelog: v1.5.0...v1.6.0 · Pull request: #8

v1.5.0

What's Changed

• Feat/docs nav icons by @mariokernich in #5
• refac: review of every control – leaks, keyboard use, focus, disabled state, i18n – and unit tests by @mariokernich in #6
• feat: run on UI5 1.108, build against UI5 1.153 – release 1.5.0 by @mariokernich in #7

Full Changelog: v1.3.1...v1.5.0

v1.4.0

What's Changed

• Feat/docs nav icons by @mariokernich in #5
• refac: review of every control – leaks, keyboard use, focus, disabled state, i18n – and unit tests by @mariokernich in #6

Full Changelog: v1.3.1...v1.4.0

v1.3.1

• Small Bugfix in IconFont used by Keyboard that causes missing icons for backspace and enter key in some cases
• Improved Docs pages

v1.3.0

Added

• [Keyboard] — An on-screen keyboard of letters. The mode is the arrangement of a country: English, German, French, Spanish, Italian, Portuguese, Swedish, Turkish, Romanian, Ukrainian, Russian or Hindi.
• [Keyboard] — Turkish is the Q arrangement, and its case is Turkish too: i becomes İ and I becomes ı, which the ordinary change of case gets wrong. Swedish is the arrangement Finland writes on as well; Romanian is the standard one, with the comma-below Ș and Ț rather than the cedilla ones.
• The letters a keyboard of keys writes with a dead key — the accented vowels of Portuguese and Italian — sit on a set of their own, reached by a key beside the space bar the way the digits are. A key that is tapped once has nowhere for a dead key to wait.
• displayNumbers decides where the digits go: in a row above the letters, behind a key of their own, or not at all. By default it is the first on a computer and the second on a phone.
• showSpecialCharacters adds a set of brackets, signs and currencies, and showEmojis a set of faces behind a key of its own.
• letterCase pins the keyboard to upper or lower case — for a field with a case of its own, like a material number or a licence plate.
• showCapsLock, showEscape and enterText add the keys a real keyboard has and say what the Enter key reads.
• extraKeys put keys of your own beside the space bar, on every set: an at sign for an address field, a unit for a quantity.
• [NumberPad] — A pad of digits in three columns. The mode picks the block: Simple like a computer, Phone with star and hash, Calculator with the four operations.
• showDecimalSeparator and decimalSeparator on the [NumberPad], which follows the current language unless told otherwise.
• [CustomKeyboard] — The keyboard whose keys are handed to it row by row. It carries what was the layout property and covers everything the other two do not.
• [KeyboardBase] — The machine behind all three, and the type the keyboard aggregation of a field is typed to, so any of the three fits in there.
• The texts the controls put on the screen themselves are translated into fourteen languages: English, German, Spanish, French, Hindi, Italian, Japanese, Dutch, Polish, Portuguese, Russian, Turkish, Ukrainian and Chinese. That is the actions of a [QuickDialog], its Show details, the line a [ComboBox] shows when nothing matches, the hint on an empty [SignaturePad] and the on/off of a [Switch].

Changed

• VirtualKeyboard is gone. Its mode mixed languages, device shapes, purposes and pads in one list of fifteen values — use [Keyboard] for letters, [NumberPad] for digits and [CustomKeyboard] for keys of your own.
• The aggregation of [Input] and [TextArea] is now called keyboard instead of virtualKeyboard, and showVirtualKeyboard is showKeyboard.
• KeyboardMode carries the arrangements of the countries and nothing else. NumberKeys, LetterCase and NumberPadMode are the new types beside it.
• The CSS classes are touchKeyboard, touchKeyboardRow, touchKeyboardDocked and touchKeyboardDisabled — they were named after the control that is gone.
• The placeholder of a [SignaturePad] defaults to an empty string instead of Sign here; a pad is built with the hint of the library in the language of the application. An empty placeholder still leaves the baseline bare.

Fixed

• A Ghost [Button] looks like its sap.m original in the two Horizon themes, which style the type differently from every other theme.

Demo

• The code examples carry a copy button, and the code blocks follow the dark theme.
• The demo speaks the same fourteen languages as the library, chosen in the header — the footer, the control reference and the playgrounds included.
• A search sits in the middle of the header. It finds a page by its name, by the sap.m control it steps in for — sap.m.Select leads to the touch Select — and by what the page is about, so barcode and signature arrive without knowing what the control is called.

v1.2.0

Twelve more sap.m controls, a virtual keyboard inside the Input, and a demo application in place of the old test pages.

Added

• CheckBox — the touch version of sap.m.CheckBox, with the tristate selection of the original.
• RadioButton and RadioButtonGroup, including the column layout of the group.
• Switch, with the accept/reject and on/off text variants of sap.m.Switch.
• Select, whose picker is a list of touch buttons instead of a dropdown.
• ComboBox, with the same filtering as sap.m.ComboBox and a picker built for fingers.
• DatePicker with a touch calendar, and TimePicker with a touch clock.
• Link, sized like every other control of the library.
• SegmentedButton and SegmentedButtonItem.
• OverflowToolbar, which moves what does not fit into an overflow area.
• BarcodeInput, a field that collects the keystrokes of a barcode scanner.
• SignaturePad, a canvas to sign on with a finger or a pen.
• Input and TextArea show a keyboard of their own: put a VirtualKeyboard into the new virtualKeyboard aggregation and switch showVirtualKeyboard on, and the keyboard opens in a popover while the field has the focus. In the TextArea its Enter key adds a line break.
• ComboBox has showSecondaryValues, which puts the additionalText of a sap.ui.core.ListItem at the end of every entry, as sap.m.ComboBox does.
• QuickDialog.select() builds its field from the touch ComboBox and takes a selectSize for it.
• VirtualKeyboard has a mode property with the ready-made layouts QWERTY, Numeric, Phone and Calculator. Only mode="Custom" reads the rows from the layout property, which is where every keyboard used to start.
• OverflowToolbar takes a ToolbarSpacer.

Changed

• Every measurement a size stands for now comes from one stylesheet, Sizing.less, which writes the ladder of a size into custom properties on a single class per control. Sizes look and behave as before.
• The oldest UI5 release the library runs on is 1.116, and the test page is checked against it. What sets the limit is sap/base/i18n/Localization, which the DatePicker reads the language from and which does not exist before 1.116.

Fixed

• Input and TextArea keep the field outline of Horizon, and the TextArea sits at the height of its sap.m original.
• Content marked NeverOverflow moves into the overflow area as a last resort instead of widening the toolbar, and the overflow button stays at its right end.
• The library builds and draws on UI5 1.116 and later again: the theme parameters that only the newer releases define are used with a fallback, so the arrows, the tick of the CheckBox and the other icons of the library show up on every supported version.

Demo

• The separate test pages are gone. In their place is one application with routing, a page per control and a side navigation to walk through them. It runs on the latest UI5.
• Next to it, test/ holds one plain page that shows every control — no descriptions, no navigation, nothing but the controls. The start:test scripts open it on the supported UI5 versions, and ?control=Button narrows it to one of them.
• The interface is translated into German and Hindi, and the language can be switched in the header.
• The application starts in the dark theme when the system is set to dark mode.
• Every page works down to a phone: the cards stack, the tables fall back to pop-in and the widest keyboard layout scrolls inside its card.

Tests

• The library has UI tests, written with wdi5. They run against the plain test page, so every control of the library is opened in a browser, and they check that the controls are there, that a CheckBox, a Switch, an Input and a Select react, and that a Button grows with its size.
• A CI workflow runs those tests on every supported UI5 release, next to the type check, the lint run and the build. The list of releases is the one behind the start:test scripts, so the two cannot drift apart.

v1.1.0

• New: QuickDialog as touch ready MessageBox replacement

v1.0.3

Full Changelog: v1.0.2...v1.0.3

v1.0.2

• Bugfix: Button press event fired two times on mobile devices