LDBR-4.63: Исправления багов и визуала (#62)

* LDBR-4.62: Исправить баг, при котором не загружались аттачи с русскими незваниями * Исправаить баг в центровке авы и кнопки под ней в профиле. Исправить флекс профиля при выводе ошибок. Добавить текст с приглашением создания доски в пустых командах. * LDBR-4.62: Добавить строку приветствия для пустой доски * LDBR-4.63: Комбобокс * LDBR-4.62: Удалить комбобок для смещения позиции карточки * LDBR-4.63: Добавить кастом скролл
frontend-park-mail-ru · Dec 25, 2021 · 11f8c3a · 11f8c3a
1 parent 9a2a399
commit 11f8c3a
Show file tree

Hide file tree

Showing 20 changed files with 235 additions and 109 deletions.
diff --git a/src/components/CardList/CardList.scss b/src/components/CardList/CardList.scss
@@ -16,6 +16,12 @@ $scrollbar-width: 1600px;
     gap: 20px;
     overflow-x: auto;
     overflow-y: hidden;
+
+    &__centered-text {
+        @extend .columns;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 .column {
@@ -25,6 +31,7 @@ $scrollbar-width: 1600px;
     max-height: $max-height-politic;
     background: $primary-bg-color;
     box-shadow: 0 0 2px $main-theme-color;
+    min-width: 160px;
 
     &__header {
         display: flex;

diff --git a/src/modules/Network/Network.js b/src/modules/Network/Network.js
@@ -47,6 +47,7 @@ class Network {
      * @return {Promise<Response>} промис запроса
      */
     httpRequest(URL, options) {
+        console.log('httpRequest: ' + URL);
         return fetch(URL, {...this._defaultOptions, ...options})
             .then((response) => response.json()
                 .then((data) => ({status: response.status, data: data})),

diff --git a/src/popups/Card/CardPopUp.hbs b/src/popups/Card/CardPopUp.hbs
@@ -17,21 +17,24 @@
                                 <label>Теги карточки:</label>
                                 <div class="card-popup-tags">
                                     {{#each tags}}
-                                        <div class="tags-list__tag_compact tag-colors__{{this.color.color_name}}"><div>{{tag_name}}</div></div>
+                                        <div class="tags-list__tag_compact tag-colors__{{this.color.color_name}}">
+                                            <div>{{tag_name}}</div>
+                                        </div>
                                     {{/each}}
                                     <div class="button button_small add" id="addTagCardPopUpId"></div>
                                 </div>
                             </div>
                         {{/if}}
                         <div>
                             <label for="cardPopUpTitleId" class>Название карточки:</label>
-                            <input class="simple-form-element" type="text" id="cardPopUpTitleId" name="card-name"
+                            <input class="simple-form-element text-17px" type="text" id="cardPopUpTitleId"
+                                   name="card-name"
                                    autofocus pattern="^[a-zA-Z\d]{1,40}$" autocomplete="off" required
                                 {{#if edit}} value="{{card_name}}" {{/if}}>
                         </div>
                         <div>
                             <label for="cardPopUpDescriptionId" class>Описание карточки:</label>
-                            <textarea class="simple-form-element" type="text" id="cardPopUpDescriptionId"
+                            <textarea class="simple-form-element text-17px" type="text" id="cardPopUpDescriptionId"
                                       name="card-description" autofocus pattern="^[a-zA-Z\d]{1,40}$" rows="4"
                                       autocomplete="off" required>{{#if edit}}{{description}}{{/if}}</textarea>
                         </div>
@@ -43,21 +46,6 @@
                                    pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required
                                 {{#if edit}} value="{{deadline}}" {{/if}}>
                         </div>
-                        {{#if edit}}
-                            <div>
-                                <label for="cardPopUpPositionId">Позиция:</label>
-                                <select class="simple-form-element" id="cardPopUpPositionId" name="position-select"
-                                        required>
-                                    {{#each positionRange}}
-                                        {{#if (IsEqualHelper this ../position) }}
-                                            <option value="{{this}}" selected>#{{this}}</option>
-                                        {{else}}
-                                            <option value="{{this}}">#{{this}}</option>
-                                        {{/if}}
-                                    {{/each}}
-                                </select>
-                            </div>
-                        {{/if}}
                         {{# if checkLists}}
                             <span class="check-list-separator">Чек листы</span>
                         {{/if}}
@@ -80,7 +68,7 @@
                                     {{#each this.check_list_items }}
                                         <div class="checklist-item" data-id="{{this.chliid}}">
                                         <label class="checklist-item__label">
-                                            <input type="checkbox" {{#if this.status}}checked{{/if}}>
+                                            <input type="checkbox" class="checkbox-custom" {{#if this.status}}checked{{/if}}>
                                             {{#if this.edit}}
                                             </label>
                                                 <input class="simple-form-element checklist-item__input" type="text"
@@ -105,12 +93,14 @@
                             {{#if attachments}}<span class="check-list-separator">Вложения</span>{{/if}}
                             <div class="attachments">
                                 {{#each attachments}}
-                                <div class="attachment" data-id="{{this.atid}}">
-                                    <div class="attachment__icon material-icon-file"></div>
-                                    <div class="attachment__title"><div>{{this.file_pub_name}}</div></div>
-                                    <div class="attachment__download-btn material-icon-download"></div>
-                                    <div class="attachment__delete-btn material-icon-delete"></div>
-                                </div>
+                                    <div class="attachment" data-id="{{this.atid}}">
+                                        <div class="attachment__icon material-icon-file"></div>
+                                        <div class="attachment__title">
+                                            <div>{{this.file_pub_name}}</div>
+                                        </div>
+                                        <div class="attachment__download-btn material-icon-download"></div>
+                                        <div class="attachment__delete-btn material-icon-delete"></div>
+                                    </div>
                                 {{/each}}
                             </div>
                             <label class="button attachment__button">
@@ -125,10 +115,13 @@
                         {{/if}}
                         {{#if edit}}
                             <div class="comments-wrapper">
-                                <textarea class="simple-form-element" type="text" id="newCommentTextId"
+                                <textarea class="simple-form-element" type="text"
+                                          id="newCommentTextId"
                                           name="comment" autocomplete="off"
-                                          placeholder="Добавить комментарий" required></textarea>
+                                          placeholder="Добавить комментарий"
+                                          required></textarea>
                                 <button class="button" id="createCommentId">Добавить</button>
+
                                 {{#each comments}}
                                     <div class="comment" data-author="{{this.uid}}">
                                         <img class="comment__avatar" title="{{this.user.userName}}"

diff --git a/src/popups/Card/CardPopUp.js b/src/popups/Card/CardPopUp.js
@@ -37,7 +37,6 @@ export default class CardPopUp extends BaseComponent {
             closeBtn: document.getElementById('cardPopUpCloseId'),
             createBtn: document.getElementById('cardPopUpCreateBtnId'),
             saveBtn: document.getElementById('cardPopUpSaveBtnId'),
-            positionSelect: document.getElementById('cardPopUpPositionId'),
             card_name: document.getElementById('cardPopUpTitleId'),
             description: document.getElementById('cardPopUpDescriptionId'),
             comments: {
@@ -270,7 +269,6 @@ export default class CardPopUp extends BaseComponent {
     _onSave(event) {
         event.preventDefault();
         const data = {
-            pos: parseInt(this._elements.positionSelect.value, 10),
             card_name: this._elements.card_name.value,
             description: this._elements.description.value,
             cid: this.context.cid,

diff --git a/src/popups/Card/CardPopUp.scss b/src/popups/Card/CardPopUp.scss
@@ -129,6 +129,7 @@ input.checklist-item__input {
 #attachmentInputId {
     display: none;
 }
+
 .card-popup-tags {
     display: flex;
     flex-direction: row;
@@ -151,3 +152,42 @@ input.checklist-item__input {
     align-items: center;
 }
 
+input[type="checkbox"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    margin: 0;
+}
+
+input[type="checkbox"] {
+    appearance: none;
+    background-color: #fff;
+    margin: 0;
+    font: inherit;
+    color: $main-theme-color;
+    width: 1.15em;
+    height: 1.15em;
+    border: 0.15em solid $main-theme-color;
+    border-radius: 0.15em;
+    transform: translateY(-0.075em);
+
+    display: grid;
+    place-content: center;
+
+    cursor: pointer;
+
+    &::before {
+        content: "";
+        width: 0.65em;
+        height: 0.65em;
+        transform: scale(0);
+        transition: 120ms transform ease-in-out;
+        box-shadow: inset 1em 1em $main-theme-color;
+        transform-origin: bottom left;
+        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    }
+
+    &:checked::before {
+        transform: scale(1);
+    }
+}
diff --git a/src/popups/DeleteDialog/DeleteDialogPopUp.hbs b/src/popups/DeleteDialog/DeleteDialogPopUp.hbs
@@ -2,7 +2,7 @@
     {{# if visible }}
         <div class="popup-wrapper" id="deletePopUpWrapperId">
             <div class="popup-content popup-content_delete">
-                <form class="popup-form">
+                <form class="popup-form custom-scroll">
                     <div class="popup-form__header">
                             Удалить "{{name}}"?
                     </div>

diff --git a/src/stores/BoardStore/BoardStore.js b/src/stores/BoardStore/BoardStore.js
@@ -1158,7 +1158,6 @@ class BoardStore extends BaseStore {
 
         const _data = {
             position: data.position,
-            pos: data.pos,
             cid: (data.cid? data.cid : this._storage.get('card-popup').cid),
             clid: (data.clid? data.clid : this._storage.get('card-popup').clid),
             card_name: data.card_name,

diff --git a/src/styles/scss/Common.scss b/src/styles/scss/Common.scss
@@ -58,6 +58,42 @@ div#root {
         box-shadow: 0 0 10px 2px $default-box-shadow-color;
         outline: none;
     }
+
+    &_comment {
+        border-top: none;
+        border-left: none;
+        border-right: none;
+    }
+}
+
+.comment-input {
+    display: flex;
+    flex-direction: row;
+    column-gap: 15px;
+    justify-content: space-between;
+
+    &.button {
+        max-height: 30px;
+    }
+
+    &__wrapper {
+        flex-grow: 1;
+        font: inherit;
+        background-color: $secondary-bg-color;
+        border-bottom: 4px solid $tertiary-bg-color;
+        cursor: text;
+        min-height: 17px;
+        max-width: available;
+
+        &:focus {
+            box-shadow: 0 0 10px 2px $default-box-shadow-color;
+            outline: none;
+        }
+    }
+    &__span {
+        font-size: 17px;
+        outline: none;
+    }
 }
 
 /* контейнер для ошибок */
@@ -168,6 +204,28 @@ div#root {
     }
 }
 
+.underline-link {
+    text-decoration: underline $main-theme-color__focus;
+    &:link{
+        color: rgb(6,69,173);
+        text-decoration: underline;
+
+    }
+
+    &:visited {
+        color: rgb(11,0,128)
+    }
+
+    &:hover {
+        cursor: pointer;
+        color: rgb(51, 45, 112);
+    }
+
+    &:active {
+        color: rgb(250,167,0)
+    }
+}
+
 .material-icon {
     @extend .material-icons;
     opacity: 0.3;

diff --git a/src/styles/scss/Constants.scss b/src/styles/scss/Constants.scss
@@ -9,6 +9,7 @@ $main-theme-secondary-color: rgb(0, 95, 115);
 $transparent-bg-color: rgba(255, 255, 255, 0.3);
 $default-box-shadow-color: rgba(0, 0, 0, 0.2);
 $dark-box-shadow: rgba(0, 0, 0, 0.4);
+$black-alpha-07: rgba(0, 0, 0, 0.7);
 
 $error-color: rgb(216, 0, 12);
 $error-bg-color: rgb(255, 210, 210);

diff --git a/src/styles/scss/Fonts.scss b/src/styles/scss/Fonts.scss
@@ -1,4 +1,5 @@
 @import 'Font-awesome.min';
+@import 'Constants';
 
 @font-face {
     font-family: 'Montserrat';
@@ -55,3 +56,15 @@
     /* Support for IE. */
     font-feature-settings: 'liga';
 }
+
+.spaced-text {
+    text-align: center;
+    margin: 10px 20px;
+    font-size: 15px;
+    letter-spacing: 3px;
+    color: $black-alpha-07;
+}
+
+.text-17px {
+    font-size: 17px;
+}
diff --git a/src/styles/scss/PopUp.scss b/src/styles/scss/PopUp.scss
@@ -5,6 +5,8 @@
     position: fixed;
     z-index: 1;
     padding-top: 100px;
+    padding-left: 10px;
+    padding-right: 10px;
     left: 0;
     top: 0;
     width: 100%;
@@ -36,7 +38,7 @@
     }
 
     &_card {
-        max-width: 650px;
+        max-width: 900px;
     }
 
     &_card-list {

diff --git a/src/sw.js b/src/sw.js
@@ -137,7 +137,6 @@ async function fetchAttachment(request) {
     const fileName = cyrillic2ascii(url.searchParams.get(ServiceWorker.ATTACH_NAME_PARAM));
     url.searchParams.delete(ServiceWorker.ATTACH_NAME_PARAM);
     try {
-        console.log('url to fetch attach: ' + url.toString());
         const response = await fetch(url.toString());
 
         /* Добавим служебный заголовок, указывающий что контент нужно скачать */
@@ -151,8 +150,6 @@ async function fetchAttachment(request) {
             headers: headers,
         });
 
-        console.log('возвращаю attchment');
-
         return responseCopy;
     } catch (error) {
         console.log('не удалость загрузить вложение: ' + url + ' ' + error);

diff --git a/src/views/BoardView/BoardView.hbs b/src/views/BoardView/BoardView.hbs
@@ -17,7 +17,11 @@
         <div class="vertical-line"></div>
         <div class="button button_small" id="showTagsBoardPopUpId">Теги</div>
     </div>
-    <div class="columns custom-scroll cardListDropZone">
+    <div class="{{#if _cardlists}}columns custom-scroll cardListDropZone{{else}}columns__centered-text{{/if}} ">
+        {{#if _cardlists }}{{else}}
+        <div class="spaced-text">Доски пока пустая. Начните с <a class="underline-link" id="showCreateCardListPopUpLinkId">создания</a> колонок задач.
+        </div>
+        {{/if}}
         {{#each _cardlists}}
             {{{this}}}
         {{/each}}

diff --git a/src/views/BoardView/BoardView.js b/src/views/BoardView/BoardView.js
@@ -152,6 +152,7 @@ export default class BoardView extends BaseView {
         this._elements = {
             showSettingBtn: document.getElementById('showBoardSettingPopUpId'),
             showCreateCLBtn: document.getElementById('showCreateCardListPopUpId'),
+            showCreateCLLink: document.getElementById('showCreateCardListPopUpLinkId'),
             addMembersBtn: document.getElementById('showAddBoardMemberPopUpId'),
             showTagsBtn: document.getElementById('showTagsBoardPopUpId'),
             cardLists: {
@@ -222,6 +223,7 @@ export default class BoardView extends BaseView {
         super.addEventListeners();
         this._elements.showSettingBtn?.addEventListener('click', this._onShowSettingPopUp);
         this._elements.showCreateCLBtn?.addEventListener('click', this._onShowCreateCLPopUp);
+        this._elements.showCreateCLLink?.addEventListener('click', this._onShowCreateCLPopUp);
         this._elements.addMembersBtn?.addEventListener('click', this._onAddBoardMemberShow);
         this._elements.cardLists.addCardBtns.forEach((addCardBtn)=>{
             addCardBtn.addEventListener('click', this._onAddCardToCardList);
@@ -271,6 +273,7 @@ export default class BoardView extends BaseView {
         super.removeEventListeners();
         this._elements.showSettingBtn?.removeEventListener('click', this._onShowSettingPopUp);
         this._elements.showCreateCLBtn?.removeEventListener('click', this._onShowCreateCLPopUp);
+        this._elements.showCreateCLLink?.removeEventListener('click', this._onShowCreateCLPopUp);
         this._elements.addMembersBtn?.removeEventListener('click', this._onAddBoardMemberShow);
         this._elements.cardLists.addCardBtns.forEach((addCardBtn)=>{
             addCardBtn.removeEventListener('click', this._onAddCardToCardList);
@@ -323,9 +326,12 @@ export default class BoardView extends BaseView {
 
     /**
      * Callback, срабатывающий при нажатии на кнопку "Добавить список"
+     * @param {Event} event объект события
      * @private
      */
-    _onShowCreateCLPopUp() {
+    _onShowCreateCLPopUp(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
         cardListActions.showCreateCardListPopUp();
     }