Skip to content

Commit

Permalink
Заготовка под шеринг заметки
Browse files Browse the repository at this point in the history
  • Loading branch information
@YarikMix
YarikMix committed May 17, 2024
1 parent f1a99d0 commit b5ff0ab
Show file tree
Hide file tree
Showing 16 changed files with 188 additions and 32 deletions.
6 changes: 1 addition & 5 deletions public/src/assets/link.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/src/assets/odnoklassniki.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/src/assets/vk.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/src/assets/whatsapp.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/src/assets/zip.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/src/components/AddTagMenu/AddTagMenu.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
background: rgba(27, 39, 53, 0.5)
border-radius: 12px
cursor: pointer
transition: 0.2s ease

&:hover
background: rgba(27, 39, 53, 0.7)
Expand Down
4 changes: 2 additions & 2 deletions public/src/components/Image/Image.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import {ScReact} from '@veglem/screact';
type ImageProps = {
src?: string,
className?: boolean,
onClick?: () => void
onClick?: (e) => void
}


export class Img extends ScReact.Component<ImageProps, any> {
render() {
return (
<img src={'./src/assets/' + this.props.src} alt="" className={this.props.className ? this.props.className : ''} onclick={this.props.onClick}/>
<img src={'./src/assets/' + this.props.src} alt="" className={this.props.className ? this.props.className : ''} onclick={(e) => this.props.onClick && this.props.onClick(e)}/>
);
}
}
4 changes: 4 additions & 0 deletions public/src/components/NoteEditor/NoteEditor.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,10 @@
@media screen and (max-width: $xl)
display: none

.share-panel-wrapper
@media screen and (max-width: $xl)
display: none

.empty
flex: 1

Expand Down
13 changes: 12 additions & 1 deletion public/src/components/NoteEditor/NoteEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {Collaborators} from "../Collaborators/Collaborators";
import {EmojiPicker} from "../EmojiPicker/EmojiPicker";
import {BackgroundPicker} from "../BackgroundPicker/BackgroundPicker";
import {NoteType} from "../../utils/types";
import {SharePanel} from "../SharePanel/SharePanel";

type NoteEditorType = {
selectedNote: NoteType
Expand Down Expand Up @@ -293,6 +294,17 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
}
</div>

<div className={"share-panel-wrapper " + (isSubNote ? "hidden" : "")}>
{isOwner ?
<Tooltip
showHoverTooltip={false}
icon="link.svg"
label="Поделиться"
content={<SharePanel />}
/> : ""
}
</div>

<div className="empty">

</div>
Expand All @@ -313,7 +325,6 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
</div>
}


{/*<div>*/}
{/* {*/}
{/* this.state.noteStatus == "saved" ?*/}
Expand Down
31 changes: 17 additions & 14 deletions public/src/components/NoteMenu/NoteMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,14 @@ export class NoteMenu extends ScReact.Component<any, any> {
AppDispatcher.dispatch(NotesActions.EXPORT_TO_PDF)
}

exportToZip = () => {
this.toggleMenu()

// TODO
AppDispatcher.dispatch(NotesActions.EXPORT_TO_PDF)
}


render() {
return (
<div className={"note-menu " + (this.state.open ? "open" : "")}>
Expand All @@ -73,36 +81,31 @@ export class NoteMenu extends ScReact.Component<any, any> {
</div>
</div>
<div className="options" ref={ref => this.noteMenuRef = ref}>
{!isSubNote(AppNotesStore.state.selectedNote) ?
<div className="options-item" onclick={this.inviteUser}>
<Img src="invite.png" className="icon"/>
<span>Пригласить людей</span>
</div> : ""}
<div className="options-item">
<Img src="share.svg" className="icon"/>
<span>Поделиться заметкой</span>
</div>
<div className="options-item" onclick={this.deleteNote}>
<div className="options-item" onClick={this.deleteNote}>
<Img src="trash.svg" className="icon"/>
<span>Удалить заметку</span>
</div>
<div className="options-item" onclick={this.exportToPdf}>
<div className="options-item" onClick={this.exportToPdf}>
<Img src="pdf.svg" className="icon"/>
<span>Скачать в pdf</span>
</div>
<div className="options-item" onClick={this.exportToZip}>
<Img src="zip.svg" className="icon"/>
<span>Скачать в zip</span>
</div>
<div className="options-item mobile-option">
<Img src={this.props.note.favorite ? "star-filled.svg" : "star.svg"} className="icon"/>
<span>{this.props.note.favorite ? "Удалить из избранного" : "В избранное"}</span>
</div>
<div className="options-item mobile-option" onclick={this.tagList}>
<div className="options-item mobile-option" onClick={this.tagList}>
<Img src="tag.svg" className="icon"/>
<span>Изменить тэги</span>
</div>
<div className="options-item mobile-option" onclick={this.emojiList}>
<div className="options-item mobile-option" onClick={this.emojiList}>
<Img src="emoji.svg" className="icon"/>
<span>Изменить иконку</span>
</div>
<div className="options-item mobile-option" onclick={this.backgroundList}>
<div className="options-item mobile-option" onClick={this.backgroundList}>
<Img src="image.svg" className="icon"/>
<span>Изменить шапку</span>
</div>
Expand Down
103 changes: 103 additions & 0 deletions public/src/components/SharePanel/SharePanel.sass
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
@import "/public/src/utils/variables.sass"

.share_panel
display: flex
flex-direction: column
border: 1px solid hsl(217.2 32.6% 25%)
background: #18232f
border-radius: 12px

h3
color: #f4f6f9

&__invite-people-container
display: flex
flex-direction: column
padding: 16px
gap: 12px
border-bottom: 1px solid hsl(217.2 32.6% 25%)

&__bottom-container
display: flex
gap: 12px

.invite-input
outline: none
background: #18232f
border: 1px solid hsl(217.2 32.6% 25%)
border-radius: 8px
padding: 4px 8px
color: #eee
transition: 0.3s ease

&:focus
border: 1px solid rgba(13, 65, 227, 0.8)

&::placeholder
color: #A1A1AA

.button
border-radius: 4px
padding: 6px 12px

&:hover
transform: scale(1)
background: #1744d0


&__share-link-container
display: flex
flex-direction: column
padding: 16px
gap: 12px
border-bottom: 1px solid hsl(217.2 32.6% 25%)

&__center-container
display: flex

span
color: #c0c0c0

&__input
outline: none
background: #18232f
border: 1px solid hsl(217.2 32.6% 25%)
border-radius: 8px
padding: 4px 8px
color: #eee
transition: 0.3s ease
cursor: text

&:focus
border: 1px solid rgba(13, 65, 227, 0.8)

&::placeholder
color: #A1A1AA

.button
width: 100%
border-radius: 4px

&:hover
transform: scale(1)
background: #1744d0

&__social-btns-container
display: flex
flex-direction: column
padding: 16px
gap: 12px

&__bottom-container
display: flex
align-items: center
justify-content: flex-start
width: 100%
gap: 10px

.social-icon
cursor: pointer
transition: 0.2s

&:hover
transform: scale(1.1)
38 changes: 38 additions & 0 deletions public/src/components/SharePanel/SharePanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import {ScReact} from "@veglem/screact";
import {Button} from "../Button/Button";
import "./SharePanel.sass"
import {ToggleButton} from "../ToggleButton/ToggleButton";
import {Img} from "../Image/Image";

export class SharePanel extends ScReact.Component<any, any> {
render() {
return (
<div className="share_panel">
<div className="share_panel__invite-people-container">
<h3>Пригласить людей</h3>
<div className="share_panel__invite-people-container__bottom-container">
<input type="text" placeholder="Введите логин" className="invite-input"/>
<Button label="Отправить"/>
</div>
</div>
<div className="share_panel__share-link-container">
<h3>Поделиться ссылкой</h3>
<div className="share_panel__share-link-container__center-container">
<span>Просматривать могут все, у кого есть ссылка</span>
<ToggleButton />
</div>
<input type="text" disabled className="share_panel__share-link-container__input" value="http://localhost:8010/notes/0a48fb5e-eb2b-41f4-9e41-87544842f539"/>
<Button label="Скопировать"/>
</div>
<div className="share_panel__social-btns-container">
<h3>Поделиться через соц. сети</h3>
<div className="share_panel__social-btns-container__bottom-container">
<Img src="vk.png" className="social-icon"/>
<Img src="odnoklassniki.png" className="social-icon" />
<Img src="whatsapp.png" className="social-icon" />
</div>
</div>
</div>
)
}
}
2 changes: 1 addition & 1 deletion public/src/components/TagList/TagList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export class TagList extends ScReact.Component<any, TagListState> {
{this.props.tags.map(tag => (
<div className={"tag-item " + (this.state.selectedTag == tag ? "selected" : "")}>
<span>{tag}</span>
<Img src="delete.svg" className="delete-tag-btn" onClick={() => this.removeTag(tag)}/>
<Img src="delete.svg" className="delete-tag-btn" onClick={(e) => {e.stopPropagation(); this.removeTag(tag)}}/>
</div>
))}

Expand Down
2 changes: 1 addition & 1 deletion public/src/components/Tooltip/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export class Tooltip extends ScReact.Component<TooltipProps, any> {
}

handleClickOutside = (e) => {
if (this.state.open && !this.openBtnRef.contains(e.target) && !this.tooltipContentRef.contains(e.target) && !e.target.matches(".note-editor-content, .note-editor-content *")) {
if (this.state.open && !this.openBtnRef.contains(e.target) && !this.tooltipContentRef.contains(e.target)) {
this.toggleOpen();
}
}
Expand Down
3 changes: 0 additions & 3 deletions public/src/modules/stores/NotesStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,11 +330,8 @@ class NotesStore extends BaseStore<NotesStoreState> {

async openNote(id:string) {
const note = await AppNoteRequests.Get(id, AppUserStore.state.JWT);

this.selectNote(note);

history.pushState(null, null, '/notes/' + id)

}

async init () {
Expand Down
12 changes: 7 additions & 5 deletions public/src/pages/Notes/style.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,12 @@
.add-note-btn
height: 100%
width: 220px
background: rgba(27, 39, 53, 0.3)
background: rgba(27, 39, 53, 0.5)
color: #f4f6f9
transition: 0.2s ease

&:hover
background: rgba(27, 39, 53, 0.8)
background: rgba(27, 39, 53, 0.7)
transform: scale(1)

@media screen and (max-width: $sm)
Expand All @@ -96,13 +97,14 @@
.add-note-icon-wrapper
display: none
padding: 8px
background: rgba(27, 39, 53, 0.3)
border-radius: 50%
transition: 0.3s ease
cursor: pointer
transition: 0.2s ease

background: rgba(27, 39, 53, 0.5)

&:hover
opacity: 0.8
background: rgba(27, 39, 53, 0.7)

.add-note-icon
width: 24px
Expand Down

0 comments on commit b5ff0ab

Please sign in to comment.