[WIP] feat(tooltip): Tooltip component #33

LeonVay · 2018-08-09T10:41:29Z

Тултип WIP.
Запускать "server-dev:tooltip": "npm run server-dev -- --env.component tooltip"
Первая кнопка показывает тултип по фокусу, две последнии по клику.

pimenovoleg · 2018-08-10T20:51:42Z

Congratulations on your first PR!!!

mikeozornin · 2018-08-13T15:36:29Z

Тултипы не провязаны с цветами из темы и типографикой.
Цвет должен быть серый из палитры, текст по тултипу — контраст к серому. Параметры шрифта должны совпадать со стилями из типографики, конкретно — миксин caption.

Не уверен, но кажется что пропадает тултип не сразу. Вот как надо:

Тултип появляется при наведении курсора на элемент, с задержкой в 400 миллисекунд. Это нужно чтобы при движении курсора по странице не было моргания тултипов.
Исчезает тултип мгновенно, как только курсор «уйдет» с элемента. Тултип исчезает и в том случае, если после его появления прокрутить страницу.

Примеры

При выглядит неаккуратно. Сейчас кнопки дефолтного стиля и перемешаны по логике.
Если сохранять кнопки, то лучше сделать как-то так:

Тексты лучше писать более-менее реальные, чем реальней тем лучше. Вот примеры, можно расставить произвольно по тултипам:

Удалить файл
Подсказка может занимать две и более строк
PDQL-запрос фильтра содержит ошибки
PDQL-запрос фильтра содержит ошибки. Uncaught SyntaxError: Unexpected string

Если можно сделать в тексте переносы строк, то было бы круто это показать и проверить в примере. Например вот один текст для тултипа из двух строк:

В группе «Серверы: Windows» PDQL-запрос содержит ошибки
Группы «Серверы: Windows (old)» был удалены

mikeozornin · 2018-08-14T13:33:52Z

Про сами тултипы
Если кликать по элементам с клавиатуры можно вызвать 4 тултипа сразу.

Пока открыты эти тултипы не показываются другие, привязанные на хувер: Скринкаст: http://d.mikeozornin.ru/w0RnZJ

В тултипе типографика своя, а не взята из миксинов типографики. Посмотри как в навбаре, например, там вроде правильно используется. Только в тултипах не title, а caption.

Про доки
Мы можем сделать в примерах тоже мозаичные стили? Сейчас там отсутствие стилей для кнопок и текста, из-за этого кажется что какие-то стили сломались.
Подписи — Title или body, кнопки дефолтные.
Вот как сейчас:

Давай ещё кнопки соберем ближе к центру? Даже при достаточно широком окне не хватает места, чтобы в левой колонке left'у хватило места, он переносится наверх. Я сначала не понял, что происходит.
Скриншот большой, поэтому ссылкой: http://screenshots.ptsecurity.com/mozornin-2018-08-14_16-24-43.png

src/lib/core/animation/index.ts

src/lib/tooltip/_tooltip-base.scss

src/lib/tooltip/tooltip.component.ts

src/lib/tooltip/tooltip.scss

src/lib/tooltip/tooltip.component.ts

mikeozornin · 2018-08-18T15:28:39Z

Про сами тултипы
Если кликать по элементам с клавиатуры можно вызвать пять тултипов сразу.

Пока открыты эти тултипы не показываются другие, привязанные на хувер: Скринкаст: http://d.mikeozornin.ru/w0RnZJ

Вот здесь в типографике должен быть не small-text, а caption.

Уточни у @fost или @lskramarov как правильно брать свойства. Все пять отдельно, или как-то по-другому.

Примеры
На кнопках дефолтных жирноват текст, но я это уже чинил.

mikeozornin · 2018-08-18T15:45:47Z

А, забыл написать. Новое позиционирование (когда уголок у right и left сверху, а не по середине) — отлично.

LeonVay · 2018-08-20T07:37:40Z

@mikeozornin выставил caption вместо small-text. Клик-ивент убрал, теперь Enter не будет работать. Обновил немного пример - повесил тултип на элементы списка, так же добавил пример со свойством mcTooltipDisabled.

mikeozornin · 2018-08-20T21:57:38Z

На вид все хорошо.

lskramarov · 2018-08-22T07:13:34Z

На вики должны быть доки для компонента

lskramarov · 2018-08-22T08:07:21Z

Опиши в кратце, общую концепцию работы тултипа, например:
Директива McTooltipDirective после инициализации делает то то...
по эвенту hover происходит то то...

То что я сейчас вижу по коду меня не очень радует, но возможно я что то не понимаю...

lskramarov · 2018-08-22T07:34:07Z

src/lib/tooltip/tooltip.component.ts

+        console.log(this.availablePositions);
+
+        Object.keys(this.availablePositions).some((key) => {
+            if (JSON.stringify($event.connectionPair) === JSON.stringify(this.availablePositions[ key ])) {


я думаю найдется не один способ сделать это без JSON.stringify

src/lib/tooltip/tooltip.component.ts

lskramarov · 2018-09-12T07:47:35Z

src/lib/tooltip/_tooltip-theme.scss

+
+$shadow-color: rgba(0, 0, 0, 0.2);
+$border-radius-base: 3px;
+$box-shadow-base: 0 2px 4px 0 $shadow-color;


Все что касается цвета и типографики должно быть в теме т.е. нужно было перенести только эту строчку. Посмотри как сделано в других компонентах.

lskramarov · 2018-09-12T08:11:09Z

Нужно исправить ошибки линтера:
overlay-ref.ts содержит 56 ошибок
tooltip.component.ts содержит 37 ошибок

lskramarov · 2018-09-12T08:16:25Z

не нашел команды запуска дев примера.

lskramarov · 2018-09-12T08:22:30Z

в дев примере при фокусировке на первой кнопке тултип не появляется.
feat(tooltip): Removing tooltip element from DOM unless it is triggered to show - в этом коммите почему то тултип был удален.

lskramarov · 2018-09-12T08:26:37Z

src\lib-dev\tooltip\module.ts - нужно почистить, содержит неиспользуемый код, видимо копипаст...

lskramarov · 2018-09-12T08:38:27Z

Насколько Я вижу, теперь тултип удаляется из DOM сразу же после добавления.
Причем, в дальнейшем все корректно отрабатывает и тултип добавляется в оверлей.

Считаю, что проблема не решена, нужно разбираться и убрать такое поведение.

lskramarov · 2018-09-17T07:07:25Z

Ошибки в тестах нужно поправить

lskramarov · 2018-09-17T07:47:34Z

вот такое в примере

lskramarov · 2018-09-17T07:51:49Z

В документации mcMouseEnterDelay = 400, но на самом деле вот так:

lskramarov · 2018-09-17T08:07:08Z

Еще смущает ESC для тултипа, но если так было задумано то...

В остальном все отлично, после исправления:
тестов, положения в примере и delay можно будет влить.

lskramarov · 2018-09-18T06:28:50Z

src/lib/tooltip/tooltip.component.ts

-    ngOnInit(): void {
-        const element: any = this.elementRef.nativeElement;
+    // tslint:disable-next-line
+    ngOnInit(): void {}


С какой целью добавлен пустой метод ?

src/lib/tooltip/tooltip.component.ts

lskramarov · 2018-09-18T06:38:38Z

src/lib/tooltip/tooltip.component.ts


+    // tslint:disable-next-line
+    ngAfterViewInit(): void {


А какой смысл делать какие либо действия в ngAfterViewInit, если они никак не связаны с view ?

src/lib/tooltip/tooltip.component.ts

lskramarov · 2018-09-18T07:01:47Z

src/lib/tooltip/tooltip.component.ts


-    _afterVisibilityAnimation(e: AnimationEvent): void {
-        if (e.toState === 'false' && !this.mcVisible) {
+        this.hideTId = setTimeout(() => {


линтер ругается на тип

Не должен по идее. Возвращаемое значение у setTimeout -> number. Пробовал invalidate сделать, у меня ошибки не появляются.

lskramarov · 2018-09-18T07:01:59Z

src/lib/tooltip/tooltip.component.ts

-            this._markForCheck();
+        if (!this.isContentEmpty()) {
+            this._closeOnInteraction = true;
+            this.showTId = setTimeout(() => {


линтер ругается на тип

feat(tooltip): Fixing tests feat(tooltip): MR comments partly fixed feat(tooltip): Updating implementation feat(tooltip): Tooltip typography feat(tooltip): Some positioning updates feat(tooltip): Mr fixes: click event removed, example updated feat(tooltip): Fixing unit tests feat(tooltip): Fix positioning change on scroll strategy feat(tooltip): Removing console log and unused variables from styles feat(tooltip): Update after rebase feat(tooltip): Removing tooltip element from DOM unless it is triggered to show feat(tooltip): Moving styles feat(tooltip): Merge request changes feat(tooltip): Minor changes connected to overlay feat(tooltip): Updating positioning logic feat(tooltip): Linter errors fix feat(tooltip): Destroy tooltip component after hide feat(tooltip): Fixing issues with show\hide delay and positioning feat(tooltip): Updating tests feat(tooltip): Renaming error throw method for positioning

pimenovoleg · 2018-09-20T19:55:23Z

@lskramarov approve it?

pimenovoleg changed the title ~~feat(tooltip): Tooltip component (WIP)~~ [WIP] feat(tooltip): Tooltip component Aug 9, 2018

pimenovoleg requested a review from mikeozornin August 13, 2018 06:59

pimenovoleg requested a review from lskramarov August 13, 2018 18:16

lskramarov reviewed Aug 17, 2018

View reviewed changes

src/lib/core/animation/index.ts Outdated Show resolved Hide resolved

lskramarov reviewed Aug 17, 2018

View reviewed changes

src/lib/tooltip/_tooltip-base.scss Outdated Show resolved Hide resolved

lskramarov reviewed Aug 17, 2018

View reviewed changes

src/lib/tooltip/tooltip.component.ts Outdated Show resolved Hide resolved

lskramarov reviewed Aug 17, 2018

View reviewed changes

src/lib/tooltip/tooltip.scss Outdated Show resolved Hide resolved

lskramarov reviewed Aug 17, 2018

View reviewed changes

src/lib/tooltip/tooltip.component.ts Outdated Show resolved Hide resolved

mikeozornin approved these changes Aug 20, 2018

View reviewed changes

lskramarov reviewed Aug 24, 2018

View reviewed changes

lskramarov reviewed Sep 12, 2018

View reviewed changes

lskramarov reviewed Sep 18, 2018

View reviewed changes

lskramarov approved these changes Sep 21, 2018

View reviewed changes

pimenovoleg merged commit 9bfc4f1 into positive-js:master Sep 21, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] feat(tooltip): Tooltip component #33

[WIP] feat(tooltip): Tooltip component #33

LeonVay commented Aug 9, 2018

pimenovoleg commented Aug 10, 2018

mikeozornin commented Aug 13, 2018

mikeozornin commented Aug 14, 2018

mikeozornin commented Aug 18, 2018

mikeozornin commented Aug 18, 2018

LeonVay commented Aug 20, 2018

mikeozornin commented Aug 20, 2018

lskramarov commented Aug 22, 2018

lskramarov commented Aug 22, 2018 •

edited

Loading

lskramarov Aug 22, 2018

lskramarov Sep 12, 2018

lskramarov commented Sep 12, 2018

lskramarov commented Sep 12, 2018

lskramarov commented Sep 12, 2018 •

edited

Loading

lskramarov commented Sep 12, 2018

lskramarov commented Sep 12, 2018

lskramarov commented Sep 17, 2018

lskramarov commented Sep 17, 2018

lskramarov commented Sep 17, 2018 •

edited

Loading

lskramarov commented Sep 17, 2018

lskramarov Sep 18, 2018

lskramarov Sep 18, 2018

lskramarov Sep 18, 2018

LeonVay Sep 18, 2018

lskramarov Sep 18, 2018

pimenovoleg commented Sep 20, 2018

[WIP] feat(tooltip): Tooltip component #33

[WIP] feat(tooltip): Tooltip component #33

Conversation

LeonVay commented Aug 9, 2018

pimenovoleg commented Aug 10, 2018

mikeozornin commented Aug 13, 2018

mikeozornin commented Aug 14, 2018

mikeozornin commented Aug 18, 2018

mikeozornin commented Aug 18, 2018

LeonVay commented Aug 20, 2018

mikeozornin commented Aug 20, 2018

lskramarov commented Aug 22, 2018

lskramarov commented Aug 22, 2018 • edited Loading

lskramarov Aug 22, 2018

Choose a reason for hiding this comment

lskramarov Sep 12, 2018

Choose a reason for hiding this comment

lskramarov commented Sep 12, 2018

lskramarov commented Sep 12, 2018

lskramarov commented Sep 12, 2018 • edited Loading

lskramarov commented Sep 12, 2018

lskramarov commented Sep 12, 2018

lskramarov commented Sep 17, 2018

lskramarov commented Sep 17, 2018

lskramarov commented Sep 17, 2018 • edited Loading

lskramarov commented Sep 17, 2018

lskramarov Sep 18, 2018

Choose a reason for hiding this comment

lskramarov Sep 18, 2018

Choose a reason for hiding this comment

lskramarov Sep 18, 2018

Choose a reason for hiding this comment

LeonVay Sep 18, 2018

Choose a reason for hiding this comment

lskramarov Sep 18, 2018

Choose a reason for hiding this comment

pimenovoleg commented Sep 20, 2018

lskramarov commented Aug 22, 2018 •

edited

Loading

lskramarov commented Sep 12, 2018 •

edited

Loading

lskramarov commented Sep 17, 2018 •

edited

Loading