From 154d849eba538fffc4d55cadb2022e89255c50bb Mon Sep 17 00:00:00 2001 From: Plamena Radneva Date: Sat, 1 Sep 2018 22:05:16 +0300 Subject: [PATCH 01/12] added a device os detector service and exported it to public api; made some minor css fixes --- .../dropdown/dropdown.component.scss | 8 +++++ .../tags-input/tags-input.component.html | 9 +++--- .../tags-input/tags-input.component.scss | 14 +++++++++ .../tags-input/tags-input.component.ts | 30 ++++++++++++++++--- .../typeahead/typeahead.component.html | 12 ++++---- .../typeahead/typeahead.component.scss | 14 +++++++++ .../src/lib/shared/enums/device-os.enum.ts | 5 ++++ .../services/os-detector.service.spec.ts | 15 ++++++++++ .../shared/services/os-detector.service.ts | 23 ++++++++++++++ .../ng-sq-ui/src/lib/shared/shared.module.ts | 5 +++- projects/ng-sq-ui/src/lib/styles/base.scss | 5 ++++ .../src/lib/styles/form-elements.scss | 11 +++++++ projects/ng-sq-ui/src/public_api.ts | 2 +- src/app/app.component.scss | 3 ++ src/index.html | 2 +- 15 files changed, 142 insertions(+), 16 deletions(-) create mode 100644 projects/ng-sq-ui/src/lib/shared/enums/device-os.enum.ts create mode 100644 projects/ng-sq-ui/src/lib/shared/services/os-detector.service.spec.ts create mode 100644 projects/ng-sq-ui/src/lib/shared/services/os-detector.service.ts diff --git a/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss b/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss index 028ba7a3f..21fb9a311 100644 --- a/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss +++ b/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss @@ -21,3 +21,11 @@ top: 11px; } } + +@media (max-width: 450px) { + .sq .input-field.dropdown { + .chosen-item { + margin-top: 10px; + } + } +} diff --git a/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.html b/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.html index fc393f8fb..05da47791 100644 --- a/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.html +++ b/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.html @@ -6,7 +6,7 @@ {{controlLabel}} -
+
@@ -18,12 +18,13 @@
- + [(ngModel)]="newTagName">
diff --git a/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.scss b/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.scss index d8b83474e..0e3e3a45b 100644 --- a/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.scss +++ b/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.scss @@ -15,3 +15,17 @@ } } } + +@media (max-width: 450px) { + .sq .tags-input-wrapper { + .input-field input, .entered-items { + margin-top: 10px; + } + + .input-field .entered-items { + display: block; + width: 100%; + } + } +} + diff --git a/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.ts b/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.ts index 7c06ecdd1..ff055e896 100644 --- a/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.ts +++ b/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.ts @@ -1,10 +1,14 @@ import { Component, OnInit, Input, Output, forwardRef, - ViewEncapsulation, EventEmitter, OnDestroy, OnChanges + ViewEncapsulation, EventEmitter, OnDestroy, OnChanges, + AfterViewInit, ViewChild } from '@angular/core'; import { InputCoreComponent } from '../../shared/entities/input-core-component'; +import { DeviceOS } from '../../shared/enums/device-os.enum'; +import { OSDetectorService } from '../../shared/services/os-detector.service'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { Subscription } from 'rxjs'; +import { Subscription, fromEvent, pipe } from 'rxjs'; +import { map } from 'rxjs/operators'; import { List } from 'immutable'; const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = { @@ -20,11 +24,12 @@ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = { encapsulation: ViewEncapsulation.None, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] }) -export class TagsInputComponent extends InputCoreComponent implements OnInit, OnDestroy { - +export class TagsInputComponent extends InputCoreComponent implements OnInit, AfterViewInit, OnDestroy { + @ViewChild('tagsInput') tagsInput; private isModelEmpty: boolean = false; private enteredItemsSubscription: Subscription; private valueChangedSubscription: Subscription; + private inputEventSubscription: Subscription; private innerEnteredItemsListCopy: List; enteredItems: List = List(); @@ -52,9 +57,26 @@ export class TagsInputComponent extends InputCoreComponent implements OnInit, On }); } + ngAfterViewInit() { + if (OSDetectorService.getDeviceOS() === DeviceOS.Android) { + const inputEvent = fromEvent(this.tagsInput.nativeElement, 'input'); + inputEvent.pipe(map(event => event)); + + this.inputEventSubscription = inputEvent.subscribe(($event: any) => { + if ($event.data === ' ') { + this.onUserInput({ keyCode: 32 }); + } + }); + } + } + ngOnDestroy() { this.enteredItemsSubscription.unsubscribe(); + if (this.inputEventSubscription) { + this.inputEventSubscription.unsubscribe(); + } + if (!this.valueChangedSubscription.closed) { this.valueChangedSubscription.unsubscribe(); } diff --git a/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.html b/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.html index ac13280f5..58311f73a 100644 --- a/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.html +++ b/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.html @@ -20,11 +20,13 @@ (focus)="turnClickOutsideListenerOn()" placeholder="{{controlPlaceholder}}"> -
-
{{selectedItem.displayName}}
-
- +
+
+
{{selectedItem.displayName}}
+
+ +
diff --git a/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.scss b/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.scss index f2fbf4893..3b7126954 100644 --- a/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.scss +++ b/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.scss @@ -43,6 +43,20 @@ } } +@media (max-width: 450px) { + .sq .typeahead-wrapper { + .input-field input, .entered-items { + margin-top: 10px; + } + + .entered-items { + display: block; + width: 100%; + } + } + +} + @keyframes typeahead-loader { 0% { background-position: 0 50%; diff --git a/projects/ng-sq-ui/src/lib/shared/enums/device-os.enum.ts b/projects/ng-sq-ui/src/lib/shared/enums/device-os.enum.ts new file mode 100644 index 000000000..06790b9e4 --- /dev/null +++ b/projects/ng-sq-ui/src/lib/shared/enums/device-os.enum.ts @@ -0,0 +1,5 @@ +export enum DeviceOS { + Android = 0, + iOS, + Desktop +} diff --git a/projects/ng-sq-ui/src/lib/shared/services/os-detector.service.spec.ts b/projects/ng-sq-ui/src/lib/shared/services/os-detector.service.spec.ts new file mode 100644 index 000000000..fa40fe834 --- /dev/null +++ b/projects/ng-sq-ui/src/lib/shared/services/os-detector.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { OSDetectorService } from './os-detector.service'; + +describe('OsDetectorService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [OSDetectorService] + }); + }); + + it('should be created', inject([OSDetectorService], (service: OSDetectorService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/projects/ng-sq-ui/src/lib/shared/services/os-detector.service.ts b/projects/ng-sq-ui/src/lib/shared/services/os-detector.service.ts new file mode 100644 index 000000000..647e40bc2 --- /dev/null +++ b/projects/ng-sq-ui/src/lib/shared/services/os-detector.service.ts @@ -0,0 +1,23 @@ +import { Injectable } from '@angular/core'; +import { DeviceOS } from '../enums/device-os.enum'; + +@Injectable() +export class OSDetectorService { + + constructor() { } + + static getDeviceOS(): DeviceOS { + const userAgent = navigator.userAgent || navigator.vendor; + let agent: DeviceOS = DeviceOS.Desktop; + + if (/android/i.test(userAgent)) { + agent = DeviceOS.Android; + } + + if (/iPad|iPhone|iPod/.test(userAgent)) { + agent = DeviceOS.iOS; + } + + return agent; + } +} diff --git a/projects/ng-sq-ui/src/lib/shared/shared.module.ts b/projects/ng-sq-ui/src/lib/shared/shared.module.ts index af04acac4..0f17c359d 100644 --- a/projects/ng-sq-ui/src/lib/shared/shared.module.ts +++ b/projects/ng-sq-ui/src/lib/shared/shared.module.ts @@ -2,16 +2,19 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { OutsideClickListenerDirective } from './directives/outside-click-listener.directive'; import { CustomEventBroadcasterService } from './services/custom-event-broadcaster.service'; +import { OSDetectorService } from './services/os-detector.service'; import { LabelValuePair } from './interfaces/label-value-pair'; import { SearchResult } from './interfaces/search-result'; + export { LabelValuePair, SearchResult }; export { OutsideClickListenerDirective }; +export { OSDetectorService }; @NgModule({ imports: [ CommonModule ], - providers: [CustomEventBroadcasterService], + providers: [CustomEventBroadcasterService, OSDetectorService], declarations: [OutsideClickListenerDirective], exports: [OutsideClickListenerDirective] }) diff --git a/projects/ng-sq-ui/src/lib/styles/base.scss b/projects/ng-sq-ui/src/lib/styles/base.scss index 5c67e0481..14ff08c69 100644 --- a/projects/ng-sq-ui/src/lib/styles/base.scss +++ b/projects/ng-sq-ui/src/lib/styles/base.scss @@ -58,3 +58,8 @@ ol, ul { padding-bottom: 2px; } } + +img { + max-width: 100%; + height: auto; +} diff --git a/projects/ng-sq-ui/src/lib/styles/form-elements.scss b/projects/ng-sq-ui/src/lib/styles/form-elements.scss index 9eae07efd..196af48a0 100644 --- a/projects/ng-sq-ui/src/lib/styles/form-elements.scss +++ b/projects/ng-sq-ui/src/lib/styles/form-elements.scss @@ -111,3 +111,14 @@ background-color: darken($disabled-color, 30%); } } + +@media (max-width: 500px) { + .input-field { + display: block; + font-size: 1.1rem; + input[type="text"], .input-placeholder { + width: 100%; + margin-top: 10px; + } + } +} diff --git a/projects/ng-sq-ui/src/public_api.ts b/projects/ng-sq-ui/src/public_api.ts index a7e1c7a79..83e82da95 100644 --- a/projects/ng-sq-ui/src/public_api.ts +++ b/projects/ng-sq-ui/src/public_api.ts @@ -3,4 +3,4 @@ */ export * from './lib/ng-sq-ui.module'; -export { LabelValuePair, SearchResult } from './lib/shared/shared.module'; +export { LabelValuePair, SearchResult, OSDetectorService } from './lib/shared/shared.module'; diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29bb..e0a3b8435 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,3 @@ +h2 { + word-wrap: break-word; +} diff --git a/src/index.html b/src/index.html index a5f247af4..b7a13be2d 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,7 @@ ng-sq-ui - + From f78af6bc8b09ae71307a4f7157fcfecd00661510 Mon Sep 17 00:00:00 2001 From: Plamena Radneva Date: Sat, 1 Sep 2018 22:35:41 +0300 Subject: [PATCH 02/12] added a type prop to the regular sq-input component --- .../src/lib/form-elements/input/input.component.html | 2 +- .../ng-sq-ui/src/lib/form-elements/input/input.component.ts | 6 +++++- projects/ng-sq-ui/src/lib/styles/form-elements.scss | 2 +- src/app/app.component.html | 2 +- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/projects/ng-sq-ui/src/lib/form-elements/input/input.component.html b/projects/ng-sq-ui/src/lib/form-elements/input/input.component.html index cd00f1a3d..1400012dc 100644 --- a/projects/ng-sq-ui/src/lib/form-elements/input/input.component.html +++ b/projects/ng-sq-ui/src/lib/form-elements/input/input.component.html @@ -5,7 +5,7 @@ {{controlLabel}} - FormElementsModule

sq-inut

- + From 952ece210d0fa260a1d1725c67217d2b33f00f77 Mon Sep 17 00:00:00 2001 From: Plamena Radneva Date: Sat, 1 Sep 2018 23:02:37 +0300 Subject: [PATCH 03/12] Resolved #21: set a max-height to both typeahead and dropdown --- .../src/lib/form-elements/dropdown/dropdown.component.scss | 2 ++ .../lib/form-elements/typeahead/typeahead.component.scss | 7 ++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss b/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss index 21fb9a311..17eab358f 100644 --- a/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss +++ b/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss @@ -7,6 +7,8 @@ .options { width: 100%; margin-top: 5px; + max-height: 200px; + overflow-y: scroll; } .options .option { padding: 5px 10px; diff --git a/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.scss b/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.scss index 3b7126954..f5bfbd016 100644 --- a/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.scss +++ b/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.scss @@ -25,12 +25,14 @@ .options { width: 100%; margin-top: 5px; + max-height: 200px; + overflow-y: scroll; } .options .option { padding: 5px 10px; &:hover { cursor: pointer; - background-color: rgba(18, 125, 104, 0.21); + background-color: $box-shadow-color; } } .dropdown-icon { @@ -41,6 +43,9 @@ &.disabled .entered-item { background-color: $disabled-color; } + .entered-items { + display: inline-block; + } } @media (max-width: 450px) { From 8d91158d7b09ba612e6f59fa80edc0fc35ee0e68 Mon Sep 17 00:00:00 2001 From: Plamena Radneva Date: Sun, 2 Sep 2018 11:04:16 +0300 Subject: [PATCH 04/12] resolves #13 --- .../src/lib/form-elements/dropdown/dropdown.component.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss b/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss index 17eab358f..dc0a0589e 100644 --- a/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss +++ b/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss @@ -4,6 +4,9 @@ position: relative; flex-wrap: wrap; justify-content: flex-start; + &:hover { + cursor: pointer; + } .options { width: 100%; margin-top: 5px; From 6f7066fcf4ff11b404533f145f3749755fc8c579 Mon Sep 17 00:00:00 2001 From: Samuil Gospodinov Date: Sun, 2 Sep 2018 11:51:45 +0300 Subject: [PATCH 05/12] fixes: #22 --- docs/installation.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/docs/installation.md b/docs/installation.md index c66b3dc11..41f9ba81f 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -45,3 +45,25 @@ export class AppModule {} "./node_modules/font-awesome/scss/font-awesome.scss" ], ``` + +## Apply styling to the components + +To use our styling just add the `class="sq"` on a parent element. + +> If you don't want our styles globally just add the `sq` class on a parent wrapper + +```html +
+ +
+``` + +> If you don't want to add the `sq` class each time you can add it the body of the document + +```html + +
+ +
+ +``` From dc530b2d7fa7ab9db727fa9cac65dc07e683b573 Mon Sep 17 00:00:00 2001 From: Samuil Gospodinov Date: Sun, 2 Sep 2018 11:57:05 +0300 Subject: [PATCH 06/12] fixes: #22 --- README.md | 22 ++++++++++++++++++++++ docs/installation.md | 29 +++++++++++++++++++---------- 2 files changed, 41 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index f4e9c02ab..850d75772 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,28 @@ ng-sq-ui does not come with a specific font. Including the default theme is also Need a grid? [We've got you covered](https://sq-ui.github.io/sq-grid/)! +### Add styles to angular.json + +```json +"styles": [ + "src/styles.css", + "./node_modules/@sq-ui/ng-sq-ui/sq-ui-theme.scss", + "./node_modules/font-awesome/scss/font-awesome.scss" +], +``` + +### Apply styling to the components + +To use our styling just add the `class="sq"` on a parent element. + +```html + +
+ +
+ +``` + ## Dependencies ng-sq-ui depends on: diff --git a/docs/installation.md b/docs/installation.md index 41f9ba81f..d75423d9e 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -50,20 +50,29 @@ export class AppModule {} To use our styling just add the `class="sq"` on a parent element. -> If you don't want our styles globally just add the `sq` class on a parent wrapper - -```html -
- -
-``` - -> If you don't want to add the `sq` class each time you can add it the body of the document +> If you want to use our sq theme, add the `sq` class on the body of the document or the app wrapper ```html
- +
``` + +```html + + + + + +``` + +> If you would like to use our theme on a specific component (or a set of components) just add the `sq` class on a parent wrapper + +```html +
+ + +
+``` From b087ff132c4dc1430f747c58a5e62faaad4be162 Mon Sep 17 00:00:00 2001 From: Samuil Gospodinov Date: Sun, 2 Sep 2018 12:13:01 +0300 Subject: [PATCH 07/12] updating package readme --- projects/ng-sq-ui/src/README.md | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/projects/ng-sq-ui/src/README.md b/projects/ng-sq-ui/src/README.md index ccd9d61f6..28d92e01f 100644 --- a/projects/ng-sq-ui/src/README.md +++ b/projects/ng-sq-ui/src/README.md @@ -12,6 +12,7 @@ The components are grouped by modules. Any properties you can see through code i Any types of public interfaces and services are also included. - [Home Page](https://sq-ui.github.io/ng-sq-ui) +- [Installation](https://sq-ui.github.io/ng-sq-ui/#/installation) - [Form Elements](https://sq-ui.github.io/ng-sq-ui/#/form-elements-module) - [Modal](https://sq-ui.github.io/ng-sq-ui/#/modal-module) - [Interfaces](https://sq-ui.github.io/ng-sq-ui/#/interfaces) @@ -32,10 +33,12 @@ yarn add @sq-ui/ng-sq-ui ## Usage Import the NgSqUiModule in your module: + ``` import { NgSqUiModule } from '@sq-ui/ng-sq-ui'; ``` -and then include it in the `imports` array of your @NgModule() decorator: + +and then include it in the `imports` array of your @NgModule() decorator: ``` @NgModule({ @@ -49,6 +52,28 @@ and then include it in the `imports` array of your @NgModule() decorator: ng-sq-ui does not come with a specific font. Including the default theme is also optional. Refer to our [Live examples page](https://ng-sq-ui-examples.surge.sh). +### Add styles to angular.json + +```json +"styles": [ + "src/styles.css", + "./node_modules/@sq-ui/ng-sq-ui/sq-ui-theme.scss", + "./node_modules/font-awesome/scss/font-awesome.scss" +], +``` + +### Apply styling to the components + +To use our styling just add the `class="sq"` on a parent element. + +```html + +
+ +
+ +``` + ## Dependencies ng-sq-ui depends on font-awesome and immutable.js @@ -58,4 +83,4 @@ ng-sq-ui depends on font-awesome and immutable.js - Use NG-SQ-UI in your daily work. - **Star** it if you like. - [Join slack chat](https://join.slack.com/t/ng-sq-ui/shared_invite/enQtNDE2NDQxMjA4NzU4LTNiOWZjMGU5Mzc1N2NiMjRkMjJlM2U5OWY4ZGUyOWNjNjFmY2EyMzQ0Zjg0Mjk5OTE4MGUyMjQwMmU3NDI2Yzg) to help solve problems. - +- Follow us on [twitter](https://twitter.com/squi97817882) to get latest updates. From bcb063e50f8ffc6f191309351d9eda5663512311 Mon Sep 17 00:00:00 2001 From: Samuil Gospodinov Date: Sun, 2 Sep 2018 23:08:25 +0300 Subject: [PATCH 08/12] updated ng-sq-typeahead --- .../typeahead/typeahead.component.html | 29 ++---- .../typeahead/typeahead.component.ts | 96 +++++++++++-------- src/app/app.component.html | 16 +++- src/app/app.component.ts | 60 ++++++++---- 4 files changed, 121 insertions(+), 80 deletions(-) diff --git a/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.html b/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.html index 58311f73a..743f66355 100644 --- a/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.html +++ b/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.html @@ -1,29 +1,18 @@ -
+
-