feature: header with dropdown menu and recolored design

frontend-park-mail-ru · Oct 28, 2024 · 5cecbcf · 5cecbcf
1 parent db1eb8c
commit 5cecbcf
Show file tree

Hide file tree

Showing 28 changed files with 360 additions and 245 deletions.
diff --git a/src/Components/AlertWindow/alert-window.hbs b/src/Components/AlertWindow/alert-window.hbs
@@ -1,7 +1,7 @@
 <div class='{{elementClass}} alert-window alert-window_theme-dark'>
   <div class='alert-window__text text_roboto-regular'>{{text}}</div>
   <a
-    class='alert-window__button button button_theme-dark-primary button_size-small text_roboto-bold'
+    class='alert-window__button button button_main-primary'
     href='{{buttonUrl}}'
   >{{buttonText}}</a>
 </div>
diff --git a/src/Components/FormInputs/UserTypeRadiogroup/user-type-radiogroup.hbs b/src/Components/FormInputs/UserTypeRadiogroup/user-type-radiogroup.hbs
@@ -1,6 +1,6 @@
 <div class='{{elementClass}} user-type-radiogroup'>
   <div
-    class='user-type-radiogroup__applicant user-type-radiobutton user-type-radiobutton_checked button_size-small'
+    class='user-type-radiogroup__applicant user-type-radiobutton user-type-radiobutton_checked'
   >
     <input
       type='radio'
@@ -13,7 +13,7 @@
     />
     <label for='applicant' class='user-type-radiobutton__label text_roboto-bold'>Соискатель</label>
   </div>
-  <div class='user-type-radiogroup__employer user-type-radiobutton button_size-small'>
+  <div class='user-type-radiogroup__employer user-type-radiobutton'>
     <input
       type='radio'
       class='user-type-radiobutton__input'

diff --git a/src/Components/Header/HeaderView.js b/src/Components/Header/HeaderView.js
@@ -5,14 +5,44 @@ import { addEventListeners } from '../../modules/Events/EventUtils.js';
 
 export class HeaderView extends ComponentView {
   #logoutButton;
+  #openDropdownButton;
+  #dropdown;
+  #dropdownShown;
 
-  constructor({ userType, userAuthenticated }, existingElement) {
+  constructor({ userType, userAuthenticated, userFullName, isApplicant }, existingElement) {
     super({
-      renderParams: { userType, userAuthenticated },
+      renderParams: { userType, userAuthenticated, userFullName, isApplicant },
       existingElement,
       templateName: 'header.hbs',
     });
-    this.#logoutButton = this._html.querySelector('.user__logout-button');
+    this.#dropdown = this._html.querySelector('.header__dropdown');
+    this.#openDropdownButton = this._html.querySelector('.header__menu-open-button');
+    if (this.#dropdown) {
+      this.#dropdownShown = true;
+      this.toggleDropdown();
+      this._eventListeners.push(
+        {
+          object: window,
+          event: 'click',
+          listener: function (ev) {
+            if (!this.#dropdownShown || Object.is(ev.target, this.#openDropdownButton)) {
+              return;
+            }
+            const clickedInsideDropdown =
+              this.#dropdown.contains(ev.target) || Object.is(this.#dropdown, ev.target);
+            if (!clickedInsideDropdown) {
+              this.toggleDropdown();
+            }
+          }.bind(this),
+        },
+        {
+          object: this.#openDropdownButton,
+          event: 'click',
+          listener: this.toggleDropdown.bind(this),
+        },
+      );
+    }
+    this.#logoutButton = this._html.querySelector('.header__logout-button');
     if (this.#logoutButton) {
       this._eventListeners.push({
         object: this.#logoutButton,
@@ -23,7 +53,16 @@ export class HeaderView extends ComponentView {
           eventBus.emit(USER_WANTS_LOGOUT);
         },
       });
-      addEventListeners(this._eventListeners);
     }
+    addEventListeners(this._eventListeners);
+  }
+
+  toggleDropdown() {
+    if (this.#dropdownShown) {
+      this.#dropdown.style.visibility = 'hidden';
+    } else {
+      this.#dropdown.style.visibility = 'visible';
+    }
+    this.#dropdownShown = !this.#dropdownShown;
   }
 }
diff --git a/src/Components/Header/header.hbs b/src/Components/Header/header.hbs
@@ -1,24 +1,58 @@
-<header class='header text_roboto-light'>
-  <div class='menu'>&mu;Art</div>
-  <div class='search'>
-    <div class='search__location'>
-      <img class='search__location-icon' src='{{static "img/location_icon.svg"}}' />
-      <div class='search__location-text text_roboto-light'>Москва</div>
-    </div>
-    <div class='search__form'>
-      <input class='search__field text-light' disabled placeholder='Поиск' />
-      <img class='search__button' src='{{static "img/search_icon.svg"}}' />
-    </div>
-  </div>
-  <div class='user'>
+<div class='header-container'>
+  <nav class='header-container__header header text_roboto-light'>
+    <a class='header__logo logo' href='{{url "vacancies" ""}}'>&mu;Art</a>
     {{#if userAuthenticated}}
-      <div class='user__status-container'>
-        <div class='user__status-text'>Я {{userType}}</div>
-        <button class='user__logout-button button button_theme-primary'>Выйти</button>
+      <div class='header__authorized-container'>
+        <img class='header__notification-button' src='{{static "img/notification-icon-36.svg"}}' />
+        <img class='header__user-avatar' src='{{static "img/user-icon-80.svg"}}' />
+        <img class='header__menu-open-button' src='{{static "img/menu-icon-48.svg"}}' />
+        <div class='header__dropdown popup-element'>
+          <div class='header__user-info'>
+            <div class='header__user-name'>{{userFullName}}</div>
+            <div class='header__user-type'>{{userType}}</div>
+          </div>
+          <div class='header__dropdown-separator'></div>
+          <div class='header__menu menu'>
+            <a class='header__profile-button menu__element'>
+              <img class='menu__element-icon' src='{{static "/img/profile-menu-icon.svg"}}' />
+              Профиль пользователя</a>
+            {{#if isApplicant}}
+              <a class='header__cv-button menu__element'>
+                <img class='menu__element-icon' src='{{static "/img/cv-menu-icon.svg"}}' />
+                Мои резюме
+              </a>
+              <a class='header__portfolio-button menu__element'>
+                <img class='menu__element-icon' src='{{static "/img/portfolio-menu-icon.svg"}}' />
+                Портфолио
+              </a>
+            {{else}}
+              <a class='header__vacancy-button menu__element'>
+                <img class='menu__element-icon' src='{{static "/img/vacancy-menu-icon.svg"}}' />
+                Мои вакансии
+              </a>
+              <a class='header__company-button menu__element'>
+                <img class='menu__element-icon' src='{{static "/img/company-menu-icon.svg"}}' />
+                Компания
+              </a>
+            {{/if}}
+            <a class='header__logout-button menu__element'>
+              <img class='menu__element-icon' src='{{static "/img/logout-menu-icon.svg"}}' />
+              Выйти
+            </a>
+          </div>
+        </div>
       </div>
-      <img class='user__avatar' src='{{static "img/user_icon.svg"}}' />
     {{else}}
-      <a class='user__login-button button button_theme-primary' href='{{url "login" ""}}'>Войти</a>
+      <div class='header__not-authorized-container'>
+        <a
+          class='header__login-button button button_main-primary'
+          href='{{url "login" ""}}'
+        >Вход</a>
+        <a
+          class='header__registration-button button button_main-secondary'
+          href='{{url "register" ""}}'
+        >Регистрация</a>
+      </div>
     {{/if}}
-  </div>
-</header>
+  </nav>
+</div>
diff --git a/src/Components/LoginForm/login-form.hbs b/src/Components/LoginForm/login-form.hbs
@@ -1,10 +1,13 @@
 <form class="{{elementClass}} login-form" method="POST" novalidate>
-  <span class="login-form__error text_roboto-regular" hidden></span>
+  <span class="login-form__error" hidden></span>
   {{> user-type-radiogroup elementClass="login-form__user-type-radiogroup"}}
   {{> validated-input elementClass="login-form__email" inputName="login" inputCaption="Электронная почта" inputType="email"}}
   {{> validated-input elementClass="login-form__password" inputName="password" inputCaption="Пароль" inputType="password"}}
-  <button type="submit" class="login-form__button button button_theme-dark-primary button_size-medium text_roboto-bold">
-      Войти
-  </button>
+  <div class="login-form__button-container">
+    <button type="submit" class="login-form__button button button_main-primary">
+        Войти
+    </button>
+    <a class="login-container__go-back-button button button_main-tertiary" href="{{url "vacancies" ""}}">Не входить</a>
+  </div>
 </form>
 
diff --git a/src/Components/VacancyCard/vacancy-card.hbs b/src/Components/VacancyCard/vacancy-card.hbs
@@ -14,7 +14,7 @@
   <div class='vacancy-card__footer'>
     <button
       type='button'
-      class='vacancy-card__apply-button button button_size-small button_theme-dark-primary text_roboto-bold'
+      class='vacancy-card__apply-button button button_main-primary'
     >
       Откликнуться!
     </button>

diff --git a/src/Pages/LoginPage/login-page.hbs b/src/Pages/LoginPage/login-page.hbs
@@ -4,6 +4,5 @@
       <h2 class="login-container__header-text text_roboto-light">Вход в аккаунт</h2>
     </header>  
     {{> login-form elementClass="login-container__login-form"}}
-    <a class="login-container__register-button button button_size-medium button_theme-dark-primary text_roboto-bold" href="{{url "register" ""}}">Зарегистрироваться</a>
   </section>
 </main>
diff --git a/src/Pages/RegistrationPage/registration-page.hbs b/src/Pages/RegistrationPage/registration-page.hbs
@@ -6,9 +6,11 @@
     {{> user-type-radiogroup elementClass="registration-container__user-type-radiogroup"}}
     {{> applicant-registration-form elementClass="registration-container__applicant-registration-form"}}
     {{> employer-registration-form elementClass="registration-container__employer-registration-form"}}
-    <button type='submit' form='applicant-registration-form' class='registration-container__submit-button button button_theme-dark-primary button_size-medium text_roboto-bold'>
-      Зарегистрироваться
-    </button>
-    <a class='registration-container__back-button button button_size-medium button_theme-dark-primary text_roboto-bold' href='{{url "vacancies" ""}}'>На главную</a>
+    <div class="registration-container__button-container">
+      <button type='submit' form='applicant-registration-form' class='registration-container__submit-button button button_main-primary'>
+        Зарегистрироваться
+      </button>
+      <a class='registration-container__back-button button button_main-tertiary' href='{{url "vacancies" ""}}'>На главную</a>
+    </div>
   </section>
 </main>
diff --git a/src/Pages/VacanciesPage/VacanciesPage.js b/src/Pages/VacanciesPage/VacanciesPage.js
@@ -4,6 +4,7 @@ import { VacanciesPageView } from './VacanciesPageView.js';
 import state from '/src/modules/AppState/AppState.js';
 import { Page } from '../../modules/Page/Page.js';
 import { Header } from '../../Components/Header/Header.js';
+import { USER_TYPES } from '../../modules/UserSession/UserSession.js';
 
 export class VacanciesPage extends Page {
   constructor({ url }) {
@@ -15,6 +16,8 @@ export class VacanciesPage extends Page {
       viewParams: {
         userAuthenticated: state.userSession.isLoggedIn,
         userType: state.userSession.userType,
+        isApplicant: state.userSession.userType === USER_TYPES['applicant'],
+        userFullName: state.userSession.getUserFullName(),
       },
     });
     this._alertWindows = [];

diff --git a/src/Pages/VacanciesPage/VacanciesPageView.js b/src/Pages/VacanciesPage/VacanciesPageView.js
@@ -11,10 +11,10 @@ export class VacanciesPageView extends PageView {
   #vacancies;
 
   #FEED_LOAD_TIMEOUT = 500;
-  constructor({ userAuthenticated, userType }) {
+  constructor({ userAuthenticated, userType, userFullName, isApplicant}) {
     super({
       templateName: 'vacancies-page.hbs',
-      renderParams: { userAuthenticated, userType },
+      renderParams: { userAuthenticated, userType, userFullName, isApplicant},
     });
     this.#vacancyContainer = this._html.querySelector('.content-body__vacancy-container');
     this.#sideColumn = this._html.querySelector('.vacancies-page__side-column');

diff --git a/src/css/button.css b/src/css/button.css
@@ -0,0 +1,58 @@
+.button {
+  text-decoration: none;
+  text-align: center;
+  vertical-align: baseline;
+  border: none;
+  display: inline-block;
+  cursor: pointer;
+  padding: 10px 20px;
+  font-size: var(--text-size-4);
+  font-weight: 700;
+  font-style: normal;
+}
+
+.button_main-primary {
+  background-color: var(--color-main-400);
+  color: var(--color-background-900);
+  border-radius: 14px;
+}
+
+.button_main-secondary {
+  background-color: transparent;
+  color: var(--color-main-300);
+  border-color: var(--color-main-300);
+  border: solid 2px;
+  border-radius: 14px;
+}
+
+.button_main-tertiary {
+  background-color: transparent;
+  color: var(--color-main-300);
+  border: none;
+  font-weight: var(--text-weight-regular);
+}
+
+.button_danger-primary {
+  background-color: var(--color-secondary-support-500);
+  color: var(--color-secondary-support-100);
+  border-radius: 14px;
+}
+
+.button_danger-secondary {
+  background-color: transparent;
+  border: solid 2px;
+  border-color: var(--color-secondary-support-500);
+  color: var(--color-secondary-support-500);
+  border-radius: 14px;
+}
+
+.button_danger-tertiary {
+  background-color: transparent;
+  border: none;
+  color: var(--color-secondary-support-500);
+  font-weight: var(--text-weight-regular);
+}
+
+.button_color-danger {
+  background-color: var(--color-);
+}
diff --git a/src/css/forms.css b/src/css/forms.css
@@ -26,6 +26,8 @@
   flex-direction: column;
   align-items: stretch;
   border: 1px solid var(--grey-light);
+  font-weight: var(--text-weight-bold);
+  border-radius: 14px;
   transition:
     background-color 0.3s ease,
     border-color 0.3s ease;