From fbf8959454f96472372587ea4c17488e3307f4c0 Mon Sep 17 00:00:00 2001 From: wiseStann Date: Mon, 4 Nov 2024 18:08:56 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?= =?UTF-8?q?=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA=D0=B8=20=D1=80=D0=B5=D0=B4=D0=B0?= =?UTF-8?q?=D0=BA=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F,?= =?UTF-8?q?=20=D1=83=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B4?= =?UTF-8?q?=D0=BE=D1=81=D0=BA=D0=B8,=20=D0=BF=D0=BE=D0=BF=D1=80=D0=B0?= =?UTF-8?q?=D0=B2=D0=B8=D0=BB=20=D1=81=D0=B5=D1=82=D0=BA=D1=83=20=D0=BF?= =?UTF-8?q?=D0=B8=D0=BD=D0=BE=D0=B2=20=D0=B8=20=D0=BF=D0=B0=D1=80=D1=83=20?= =?UTF-8?q?=D0=BE=D0=B1=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D1=87=D0=B8=D0=BA?= =?UTF-8?q?=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/icons/delete.svg | 2 ++ public/components/button/icon-button.hbs | 3 ++ public/components/button/icon-button.js | 30 ++++++++++++++++++++ public/components/complex/grid/grid.js | 4 +-- public/components/complex/pin/pin.css | 6 ---- public/constants.css | 3 ++ public/pages/profile/profile.css | 35 ++++++++++++++++++++++++ public/pages/profile/profile.js | 32 ++++++++++++++++++++-- public/precompiled.js | 16 +++++++++++ 9 files changed, 120 insertions(+), 11 deletions(-) create mode 100644 public/assets/icons/delete.svg create mode 100644 public/components/button/icon-button.hbs create mode 100644 public/components/button/icon-button.js diff --git a/public/assets/icons/delete.svg b/public/assets/icons/delete.svg new file mode 100644 index 0000000..ecaac4e --- /dev/null +++ b/public/assets/icons/delete.svg @@ -0,0 +1,2 @@ +
 \ No newline at end of file diff --git a/public/components/button/icon-button.hbs b/public/components/button/icon-button.hbs new file mode 100644 index 0000000..2d9a91c --- /dev/null +++ b/public/components/button/icon-button.hbs @@ -0,0 +1,3 @@ +
+ +
diff --git a/public/components/button/icon-button.js b/public/components/button/icon-button.js new file mode 100644 index 0000000..fa43d2b --- /dev/null +++ b/public/components/button/icon-button.js @@ -0,0 +1,30 @@ +'use strict' + +import { BaseComponent } from "../base.js" + +/** + * Component that is used to display button with icon inside of it. + */ +export class IconButtonComponent extends BaseComponent { + /** + * Creates an IconButtonComponent. + * @param {HTMLElement} parent - HTML element of the parent container. + * @param {String} iconPath - file path to the icon. + */ + constructor(parent, state) { + super(parent, state); + } + + /** + * Renders a template of IconButtonComponent. + * @returns rendered template of IconButtonComponent. + */ + renderTemplate() { + const template = Handlebars.templates['icon-button.hbs']; + const renderedTemplate = template({ + state: this.State + }); + + return renderedTemplate; + } +}; diff --git a/public/components/complex/grid/grid.js b/public/components/complex/grid/grid.js index 0298258..bc8b907 100644 --- a/public/components/complex/grid/grid.js +++ b/public/components/complex/grid/grid.js @@ -34,13 +34,10 @@ export class GridComponent extends BaseComponent { this.#pins = pins; this.#marginTop = marginTop; - let idx = 0; // Providing layout rebuild on resize events window.addEventListener('resize', (event) => { event.preventDefault(); - console.log("RESIZE:", idx++); - let body = document.body, html = document.documentElement; @@ -261,6 +258,7 @@ export class GridComponent extends BaseComponent { previewContainer.style.width = `${intWidth * PREVIEW_IMG_X_FACTOR + previewRightSide.clientWidth}px`; previewContainer.style.height = `${intHeight * PREVIEW_IMG_X_FACTOR + previewTopSide.clientHeight + previewBottomSide.clientHeight}px`; + previewContainer.style.marginTop = '3%'; // Create dark transparent background and add event listeners this.createBackgroundListeners(); diff --git a/public/components/complex/pin/pin.css b/public/components/complex/pin/pin.css index 9954f39..dbcf8c2 100644 --- a/public/components/complex/pin/pin.css +++ b/public/components/complex/pin/pin.css @@ -4,10 +4,6 @@ div[class^=pin__content-container] { flex-direction: column; } -/* div[class^=pin__content-container] { - transition: all 0.1s ease-in-out; -} */ - .pin__image-container { position: relative; width: 100%; @@ -16,13 +12,11 @@ div[class^=pin__content-container] { img[class^=pin__image] { border-radius: 20px; - transition: 0.5s; } .pin__image-container:hover img[class^=pin__image] { filter: brightness(70%); cursor: pointer; - transition: 0.5s; } div[class^=pin__image-preview-button] { diff --git a/public/constants.css b/public/constants.css index b8fa05d..7bf8077 100644 --- a/public/constants.css +++ b/public/constants.css @@ -58,4 +58,7 @@ --pinset-profile-user-name-text-color: #333333; --pinset-profile-user-edit-block-color: #757575; --pinset-profile-user-edit-block-hovered-color: #585858; + + --pinset-delete-button-color: #C20000; + --pinset-delete-button-hovered-color: #910000; } diff --git a/public/pages/profile/profile.css b/public/pages/profile/profile.css index d9105c1..94a2083 100644 --- a/public/pages/profile/profile.css +++ b/public/pages/profile/profile.css @@ -275,6 +275,41 @@ a[class^=profile__boards-header-nav-to]:hover { cursor: pointer; } +.icon-button__content-container { + width: 45px; + height: 45px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + transition: 0.5s; +} + +.icon-button__edit-img, +.icon-button__delete-img { + width: 40px; + height: 40px; +} + +.icon-button__content-container.icon-button__edit-img { + margin: 10px; + background-color: var(--pinset-profile-user-edit-block-color); +} + +.icon-button__content-container.icon-button__edit-img:hover { + background-color: var(--pinset-profile-user-edit-block-hovered-color); + cursor: pointer; + transition: 0.5s; +} + +.icon-button__content-container.icon-button__delete-img { + background-color: var(--pinset-delete-button-color); +} + +.icon-button__content-container.icon-button__delete-img:hover { + background-color: var(--pinset-delete-button-hovered-color); +} + .profile__boards-header-title p { margin: 0; font-size: 30px; diff --git a/public/pages/profile/profile.js b/public/pages/profile/profile.js index 8262519..75abdba 100644 --- a/public/pages/profile/profile.js +++ b/public/pages/profile/profile.js @@ -16,6 +16,8 @@ import { postMethod } from "../../modules/network.js"; import { BACKEND_LOGOUT_ROUTE } from "../../constants/api.js"; import { isAuthorized } from "../../modules/network.js"; +import { IconButtonComponent as IconButton } from "../../components/button/icon-button.js"; + /** * Page of a user profile. */ @@ -76,6 +78,7 @@ export class ProfilePageComponent extends BaseComponent { this.addSearchInputsListeners(); this.addBoardsSearchBarListener(); this.addProfileImgListener(); + this.addBoardDetailsIconListener(); this.addBoardListener(); return renderedTemplate; @@ -125,7 +128,6 @@ export class ProfilePageComponent extends BaseComponent { } } - const matchedBoardsComponent = new BoardGrid(this.Parent, matchedBoards, this.State.currentUser); const renderedMatchedBoards = matchedBoardsComponent.renderTemplate(); const boardsContainer = document.querySelector('.profile__boards-container'); @@ -135,6 +137,8 @@ export class ProfilePageComponent extends BaseComponent { boardsContainer.insertAdjacentHTML('beforeend', renderedMatchedBoards); this.resizeBoardsCovers(); + this.addBoardDetailsIconListener(); + this.addBoardListener(); } /** @@ -243,13 +247,15 @@ export class ProfilePageComponent extends BaseComponent { } /** - * + * Creates a listener of board click event. */ addBoardListener() { const pinSet = [ { PinID: 1, imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, }, @@ -716,6 +722,14 @@ export class ProfilePageComponent extends BaseComponent { document.querySelector('.profile__boards-header-title p').textContent = boardTitle; const headerTitleContainer = document.querySelector('.profile__boards-header-title'); headerTitleContainer.removeChild(document.querySelector('.profile__boards-header-create-board-btn')); + headerTitleContainer.insertAdjacentHTML('beforeend', new IconButton(this.Parent, { + className: 'icon-button__edit-img', + iconPath: './assets/icons/edit.svg', + }).renderTemplate()); + headerTitleContainer.insertAdjacentHTML('beforeend', new IconButton(this.Parent, { + className: 'icon-button__delete-img', + iconPath: './assets/icons/delete.svg', + }).renderTemplate()); // Update search input bar headerSearchBlock.removeChild(headerSearchBlock.querySelector('.searchinput__content-container')); @@ -744,4 +758,18 @@ export class ProfilePageComponent extends BaseComponent { }); } } + + /** + * Creates a listener of board details icon click events. + */ + addBoardDetailsIconListener() { + const detailsIcons = document.querySelectorAll('.profile__board-cover-more-icon'); + + for (const icon of detailsIcons) { + icon.addEventListener('click', (event) => { + event.preventDefault(); + event.stopImmediatePropagation(); + }); + } + } }; diff --git a/public/precompiled.js b/public/precompiled.js index 2606b4e..3ebb21e 100644 --- a/public/precompiled.js +++ b/public/precompiled.js @@ -100,6 +100,22 @@ templates['button.hbs'] = template({"1":function(container,depth0,helpers,partia + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"iconRight") : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":5,"column":1},"end":{"line":5,"column":68}}})) != null ? stack1 : "") + "\r\n\r\n"; },"useData":true}); +templates['icon-button.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { + var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return "
\r\n \r\n
\r\n"; +},"useData":true}); templates['grid.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1;