From a614caa46a0c32464f1413271ebab9f15ddeed7e Mon Sep 17 00:00:00 2001 From: GeorgiyX <34867130+GeorgiyX@users.noreply.github.com> Date: Wed, 1 Dec 2021 16:45:36 +0300 Subject: [PATCH] =?UTF-8?q?LDBR=203.22:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D1=82=D1=8C=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2?= =?UTF-8?q?=D0=BD=D0=BE=D1=81=D1=82=D0=B8=20=D0=B2=20=D0=B2=D0=B5=D1=80?= =?UTF-8?q?=D1=81=D1=82=D0=BA=D1=83=20(#40)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * LDBR-3.22: Исправить пропажу error сообщений в Register View * LDBR-3.22: Исправить wrapper у view, вынести повторяющиеся стили * LDBR-3.22: Истправить футер * LDBR-3.22: Добавить Flexbox для профиля * LDBR-3.22: Добавить сокрытие меню, возврат скролла в card popup, начальное заполнение списка участников карточки (в поиске) * LDBR-3.24: Правки после РК по интерфейсам. (#41) * LDBR-3.22: Исправить пропажу кнопок navbar'a в /login * LDBR-3.22: Добавить смену видимости элементов navbar в зависимости от width браузера * LDBR-3.22: Исправить футер на 404 * LDBR-3.22: Правки в положение аватара в мобильной и десктоп версии, чето в 404 * LDBR-3.22: Исправить баг с непонятным отступом в /profile * LDBR-3.22: Исправить баги с textarea и input * LDBR-3.22: Добавить адаптивность в popup'ы * LDBR-3.22: Увеличить площадь клика на элемент в navbar * LDBR-3.22: Добавитть заполнение списка пользователей членами команды, карточки, доски, если число символов < 3 * LDBR-3.22: Добавить поинтер на дедлайн * LDBR-3.22: Удаление пользователя из всех карточек, если он был удален из доски * LDBR-3.22: Добавить обновление чеклиста (CUD) без перезагрузка страницы, в случае переоткрытия попапа * LDBR-3.22: Добавить обновление элемента чеклиста (CUD) без перезагрузка страницы, в случае переоткрытия попапа * LDBR-3.22: Заблокировать возможность удалить самого себя из доски * LDBR-3.22: Добавить flex-wrap для участников доски * LDBR-3.22: Fix footer.scss * LDBR-3.22: убрать автофокус при добавлении комментария, добавить поинтер на дедлайн. * LDBR-3.22: Подверстать комментарии. * LDBR-3.22: Исправить верстку комментариев, исправить авторство комментария. * LDBR-3.22: Откатить дату комментария. * LDBR-3.22: Исправить формат даты комментария. * LDBR-3.22: исправить иконки списка досок и ширину попапа. * LDBR-3.22: Добавить data для комментария. * LDBR-3.22: Исправить сохранение uid юзера. * LDBR-3.22: Исправить toLocaleString. * LDBR-3.22: Исправить README Co-authored-by: Dmitry Peshkov <31134795+DPeshkoff@users.noreply.github.com> Co-authored-by: DPeshkoff --- README.md | 12 +- src/actions/card.js | 11 + src/actions/settings.js | 23 ++ src/components/Card/Card.hbs | 4 +- src/components/Card/Card.scss | 8 +- src/components/CardList/CardList.hbs | 6 +- src/components/Footer/Footer.scss | 10 +- src/components/Navbar/Navbar.hbs | 52 +-- src/components/Navbar/Navbar.js | 47 ++- src/components/Navbar/Navbar.scss | 27 +- src/constants/constants.js | 10 +- src/index.js | 16 + src/modules/Helpers/DateFormatHelper.js | 13 + src/modules/Helpers/IsAuthorHelper.js | 6 +- src/modules/Validator/Validator.js | 6 +- src/popups/AddUser/AddUserPopUp.hbs | 2 +- src/popups/BoardSetting/BoardSettingPopUp.hbs | 2 +- src/popups/Card/CardPopUp.hbs | 68 ++-- src/popups/Card/CardPopUp.js | 23 +- src/popups/Card/CardPopUp.scss | 1 + src/popups/CardList/CardListPopUp.hbs | 8 +- src/popups/CreateBoard/CreateBoardPopUp.hbs | 2 +- src/popups/DeleteCard/DeleteCardPopUp.hbs | 6 +- .../DeleteCardList/DeleteCardListPopUp.hbs | 6 +- src/stores/BoardStore/BoardStore.js | 265 +++++---------- src/stores/BoardsStore/BoardsStore.js | 5 + src/stores/SettingsStore/SettingsStore.js | 55 +++- src/styles/scss/Common.scss | 164 ++++++--- src/styles/scss/Constants.scss | 2 + src/styles/scss/PopUp.scss | 46 ++- src/styles/scss/ViewElements.scss | 207 ++++++++++++ src/views/BoardView/BoardView.scss | 1 + src/views/BoardsView/BoardsView.scss | 2 + src/views/LoginView/LoginView.hbs | 52 ++- src/views/LoginView/LoginView.js | 12 +- src/views/LoginView/LoginView.scss | 201 ------------ src/views/NotFoundView/NotFoundView.hbs | 6 +- src/views/NotFoundView/NotFoundView.js | 12 +- src/views/ProfileView/ProfileView.hbs | 102 +++--- src/views/ProfileView/ProfileView.scss | 310 ++++-------------- src/views/RegisterView/RegisterView.hbs | 95 +++--- src/views/RegisterView/RegisterView.js | 5 +- src/views/RegisterView/RegisterView.scss | 188 ----------- 43 files changed, 965 insertions(+), 1134 deletions(-) create mode 100644 src/modules/Helpers/DateFormatHelper.js create mode 100644 src/styles/scss/ViewElements.scss delete mode 100644 src/views/LoginView/LoginView.scss delete mode 100644 src/views/RegisterView/RegisterView.scss diff --git a/README.md b/README.md index d82e0128..6238a137 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -[![CI](https://github.com/frontend-park-mail-ru/2021_2_LadnoDavayteBezRoflov/actions/workflows/CI.yml/badge.svg?branch=main)](https://github.com/frontend-park-mail-ru/2021_2_LadnoDavayteBezRoflov/actions/workflows/CI.yml) +[![CI](https://github.com/frontend-park-mail-ru/2021_2_LadnoDavayteBezRoflov/actions/workflows/CI.yml/badge.svg?branch=main)](https://github.com/frontend-park-mail-ru/2021_2_LadnoDavayteBezRoflov/actions/workflows/CI.yml) ![Website](https://img.shields.io/website?down_message=offline&up_message=online&url=http%3A%2F%2F95.163.213.142%2F) ![GitHub repo size](https://img.shields.io/github/repo-size/frontend-park-mail-ru/2021_2_LadnoDavayteBezRoflov) # Trello @@ -46,9 +46,7 @@ Trello frontend repository for Ladno Davayte Bez Roflov team, autumn of 2021. | |--public | |--assets #Pictures and icons -| |--css #CSS files | |--fonts #Font files -| |-index.html | |--server #Static-server | |-server.js @@ -60,13 +58,19 @@ Trello frontend repository for Ladno Davayte Bez Roflov team, autumn of 2021. | |--modules #Modules | | |--Dispatcher | | |--EventBus +| | |--Helpers | | |--Network | | |--Router | | |--Validator | | +| |--popups | |--stores #Stores & main logic +| |--styles +| | |--scss | |--views #Project pages +| |-index_template.html | |-index.js +| |-sw.js ``` ### Versions @@ -77,7 +81,7 @@ Versions are updated via two ways: 2. **Minor updates**: minor fixes and changes to server and modules. Example: *refactoring Network module*. -Latest version: `0.2.0`: *Transferred to Flux architecture, refactored every module*. +Latest version: `0.2.1`: *Service worker*. ### Code style The project is written using slightly modified [Google ESling config](https://github.com/google/eslint-config-google). Code style changes: diff --git a/src/actions/card.js b/src/actions/card.js index de6034a4..2b9ef429 100644 --- a/src/actions/card.js +++ b/src/actions/card.js @@ -20,6 +20,7 @@ export const CardActionTypes = { CARD_ADD_ASSIGNEE_CLOSE: 'card/assignee/close', CARD_ADD_ASSIGNEE_INPUT: 'card/assignee/input', CARD_ADD_ASSIGNEE_USER_CLICKED: 'card/assignee/clicked', + SCROLL_CHANGED: 'card/scroll', }; /** @@ -180,4 +181,14 @@ export const cardActions = { }); }, + /** + * Передает в стор значение скрола + * @param {Number} scrollValue - значение top скрола в px + */ + changeScroll(scrollValue) { + Dispatcher.dispatch({ + actionName: CardActionTypes.SCROLL_CHANGED, + data: {scrollValue}, + }); + }, }; diff --git a/src/actions/settings.js b/src/actions/settings.js index 7e3cc763..c81382fd 100644 --- a/src/actions/settings.js +++ b/src/actions/settings.js @@ -10,6 +10,8 @@ export const SettingsActionTypes = { SETTINGS_GET: 'settings/get', SETTINGS_UPDATE: 'settings/put', AVATAR_UPLOAD: 'avatar/post', + NAVBAR_MENU_BTN_CLICK: 'navbar/menu-btn/click', + WINDOW_RESIZED: 'window/resized', }; /** @@ -48,4 +50,25 @@ export const settingsActions = { data: {avatar}, }); }, + + /** + * Действие: переключение видимости navbar menu + */ + toggleNavbarMenu() { + Dispatcher.dispatch({ + actionName: SettingsActionTypes.NAVBAR_MENU_BTN_CLICK, + }); + }, + + /** + * Действие: изменился размер окна браузера + * @param {Number} width - ширина окна + * @param {Number} height - высота окна + */ + windowResized(width, height) { + Dispatcher.dispatch({ + actionName: SettingsActionTypes.WINDOW_RESIZED, + data: {width, height}, + }); + }, }; diff --git a/src/components/Card/Card.hbs b/src/components/Card/Card.hbs index dea2b88e..43e9331f 100644 --- a/src/components/Card/Card.hbs +++ b/src/components/Card/Card.hbs @@ -6,7 +6,7 @@
{{card_name}} - +
{{#if (IsEmptyDeadlineHelper deadline)}} @@ -21,7 +21,7 @@ {{#if attachments}}
{{/if}} - {{#if checklist}} + {{#if check_lists}}
{{/if}}
diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index fb7ee9cf..0c3fac40 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -47,6 +47,7 @@ $card-due-date-done: forestgreen; flex-direction: row; padding-right: 5px; background: $secondary-bg-color; + cursor: pointer; } .badge-due-date__icon::before { @@ -60,7 +61,8 @@ $card-due-date-done: forestgreen; line-height: normal; color: rgb(255, 255, 255); padding-top: 3px; - + cursor: pointer; + &-invalid { background-color: rgb(235, 90, 70); } @@ -72,6 +74,10 @@ $card-due-date-done: forestgreen; &-completed { background-color: rgb(107, 148, 99); } + + &-expiring { + background-color: rgb(255, 153, 0); + } } .badge-due-date-wrapper_overdue { diff --git a/src/components/CardList/CardList.hbs b/src/components/CardList/CardList.hbs index 7bfb49d9..589bd4c0 100644 --- a/src/components/CardList/CardList.hbs +++ b/src/components/CardList/CardList.hbs @@ -1,9 +1,9 @@
{{cardList_name}}
- - - + + +
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss index c40655eb..e743d0e9 100644 --- a/src/components/Footer/Footer.scss +++ b/src/components/Footer/Footer.scss @@ -5,18 +5,14 @@ /* Таблица стилей для компонента footer */ .footer { - position: fixed; - height: 50px; background-color: $main-theme-secondary-color; - bottom: 0; - left: 0; - right: 0; - margin-bottom: 0; + width: 100%; + height: 50px; + display: flex; flex-direction: column; justify-content: center; - &__text { color: rgb(255, 255, 255); font-family: 'Montserrat', sans-serif; diff --git a/src/components/Navbar/Navbar.hbs b/src/components/Navbar/Navbar.hbs index e99afecf..c1a74972 100644 --- a/src/components/Navbar/Navbar.hbs +++ b/src/components/Navbar/Navbar.hbs @@ -1,26 +1,40 @@
- - - -
- {{#if isAuthorized}} -
Доски
- - {{userName}} - {{userName}} - - -
Выход
- {{else}} -
Войти
-
Зарегистрироваться
- {{/if}} +
+ + + +
+
+
+ {{# if navbar.linksVisible }} +
+ {{#if isAuthorized}} +
Доски
 + + {{#if navbar.isMobile }} + {{userName}} + {{userName}} + {{else}} + {{userName}} + {{userName}} + {{/if}} + + +
Выход
 + {{else}} +
Войти
 +
Зарегистрироваться
 + {{/if}} +
+ {{/if}}
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index 0d253453..fb390390 100644 --- a/src/components/Navbar/Navbar.js +++ b/src/components/Navbar/Navbar.js @@ -9,6 +9,7 @@ import UserStore from '../../stores/UserStore/UserStore.js'; // Шаблон import template from './Navbar.hbs'; +import {settingsActions} from '../../actions/settings'; /** @@ -25,7 +26,8 @@ export default class NavbarComponent extends BaseComponent { this._onRefresh = this._onRefresh.bind(this); UserStore.addListener(this._onRefresh); - this._logoutCallback = this._logout.bind(this); + this._elements = {}; + this._bindCallBacks(); } /** @@ -35,11 +37,41 @@ export default class NavbarComponent extends BaseComponent { this.context = UserStore.getContext(); } + /** + * Метод биндит callback'и к this + * @private + */ + _bindCallBacks() { + this._logout = this._logout.bind(this); + this._onHamburgerClick = this._onHamburgerClick.bind(this); + } + + /** + * Метод сохраняет элементы DOM связанные с navbar + * @private + */ + _registerElements() { + this._elements = { + logOutBtn: document.getElementById('logout'), + hamburgerBtn: document.getElementById('hamburgerBtnId'), + }; + } + /** * Метод, добавляющий обработчики событий для компонента. */ addEventListeners() { - document.getElementById('logout')?.addEventListener('click', this._logoutCallback); + this._registerElements(); + this._elements.logOutBtn?.addEventListener('click', this._logout); + this._elements.hamburgerBtn?.addEventListener('click', this._onHamburgerClick); + } + + /** + * Метод, удаляющий обработчики событий для компонента. + */ + removeEventListeners() { + this._elements.logOutBtn?.removeEventListener('click', this._logout); + this._elements.hamburgerBtn?.removeEventListener('click', this._onHamburgerClick); } /** @@ -52,9 +84,14 @@ export default class NavbarComponent extends BaseComponent { } /** - * Метод, удаляющий обработчики событий для компонента. + * Метод, срабатывающий при клике на кнопку меню + * @private */ - removeEventListeners() { - document.getElementById('logout')?.removeEventListener('click', this._logoutCallback); + _onHamburgerClick() { + const links = document.querySelector('.navbar__links'); + if (links && this.context.get('navbar').is) { + links.style.display = 'flex'; + } + settingsActions.toggleNavbarMenu(); } } diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss index 5f1232d9..fa1e12df 100644 --- a/src/components/Navbar/Navbar.scss +++ b/src/components/Navbar/Navbar.scss @@ -44,12 +44,34 @@ align-items: center; cursor: pointer; min-height: $nav-bar-height; + text-decoration: none; &:hover { background-color: $nav-bar-hover; } } + &__hamburger-wrapper { + display: none; + flex-direction: row; + align-items: center; + justify-content: center; + cursor: pointer; + min-height: $nav-bar-height; + min-width: $nav-bar-height; + + &:hover { + background-color: $nav-bar-hover; + } + } + + &__logo-wrapper { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + &__link { display: block; padding: 0 12px; @@ -80,11 +102,14 @@ text-decoration: none; } -@media screen and (max-width: 450px) { +@media screen and (max-width: 500px) { .navbar { flex-direction: column; &__links { flex-direction: column; } + &__hamburger-wrapper { + display: flex; + } } } diff --git a/src/constants/constants.js b/src/constants/constants.js index 0c7b9b66..c263536a 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -83,9 +83,9 @@ export const ConstantMessages = { BoardUpdateErrorOnServer: 'Не удалось обновить доску, попробуйте позднее', BoardNoAccess: 'Нет доступа к доске', - CardListTitleTooShort: 'Название списка карточек слишком короткое', - CardListTitleTooLong: 'Название списка карточек слишком длинное', - CardListErrorOnServer: 'Не удалось создать список, попробуйте позднее', + CardListTitleTooShort: 'Название колонки слишком короткое', + CardListTitleTooLong: 'Название колонки слишком длинное', + CardListErrorOnServer: 'Не удалось создать колонку, попробуйте позднее', CardTitleTooShort: 'Название карточки слишком короткое', CardTitleTooLong: 'Название карточки слишком длинное', @@ -101,3 +101,7 @@ export const CheckLists = { CheckListDefaultTitle: 'Check List', CheckListItemDefaultTitle: 'Item', }; + +export const SettingStoreConstants = { + MobileNavWidth: 500, +}; diff --git a/src/index.js b/src/index.js index e66d8bfd..c75f7e6c 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,7 @@ import {Html, Urls} from './constants/constants.js'; // Файл стилей import './styles/scss/Common.scss'; +import './styles/scss/ViewElements.scss'; // Views import RegisterView from './views/RegisterView/RegisterView.js'; @@ -62,3 +63,18 @@ window.addEventListener('DOMContentLoaded', async () => { } }); }); + +window.addEventListener('resize', (() => { + /* Callback на ресайз будет срабатывать раз в 200 мс, + * т.к. иначе слишком часто будет вызываться при движении + * "рамки" браузера */ + let resizeTimeout = null; + return () => { + if (!resizeTimeout) { + resizeTimeout = setTimeout(() => { + resizeTimeout = null; + settingsActions.windowResized(window.innerWidth, window.innerHeight); + }, 100); + } + }; +})(), false); diff --git a/src/modules/Helpers/DateFormatHelper.js b/src/modules/Helpers/DateFormatHelper.js new file mode 100644 index 00000000..32c35ca9 --- /dev/null +++ b/src/modules/Helpers/DateFormatHelper.js @@ -0,0 +1,13 @@ +/** + * Handelbars helper + * @param {String} date - дата + * @return {String} - корректный текст даты + * @constructor + */ +export default function DateFormatHelper(date) { + if (date) { + const contextDate = new Date(date.substr(0, 19)); + return contextDate.toLocaleString('ru-RU'); + } + return ''; +}; diff --git a/src/modules/Helpers/IsAuthorHelper.js b/src/modules/Helpers/IsAuthorHelper.js index a21d087d..1fa99015 100644 --- a/src/modules/Helpers/IsAuthorHelper.js +++ b/src/modules/Helpers/IsAuthorHelper.js @@ -1,11 +1,11 @@ -import UserStore from '../../stores/UserStore/UserStore.js'; +import SettingsStore from '../../stores/SettingsStore/SettingsStore.js'; /** * Handelbars helper, проверяет авторство комментария - * @param {any} author - логин автора комментария + * @param {any} author - id автора комментария * @return {boolean} - результат сравнения * @constructor */ export default function IsAuthorHelper(author) { - return author === UserStore.getContext('userName'); + return author === SettingsStore.getContext('uid'); }; diff --git a/src/modules/Validator/Validator.js b/src/modules/Validator/Validator.js index a1469a59..0e5b0fad 100644 --- a/src/modules/Validator/Validator.js +++ b/src/modules/Validator/Validator.js @@ -152,9 +152,13 @@ export default class Validator { return 'completed'; } + const dateDiff = (deadlineDate.getTime() - timeNow.getTime()) / (1000 * 3600 * 24); + return (deadlineDate <= timeNow) ? 'invalid' : - 'valid'; + (dateDiff > 1.0) ? + 'valid' : + 'expiring'; } /** diff --git a/src/popups/AddUser/AddUserPopUp.hbs b/src/popups/AddUser/AddUserPopUp.hbs index cae49ef6..599b40eb 100644 --- a/src/popups/AddUser/AddUserPopUp.hbs +++ b/src/popups/AddUser/AddUserPopUp.hbs @@ -1,6 +1,6 @@ {{# if visible }}