From caec1c16e28a4da2bb2001fb7d9b6c16e2338453 Mon Sep 17 00:00:00 2001 From: esracoskun Date: Sat, 22 Aug 2020 14:14:31 +0300 Subject: [PATCH 1/2] =?UTF-8?q?Closable=20eklendi=20ve=20avatar=20=C5=9Far?= =?UTF-8?q?t=C4=B1=20d=C3=BCzenlendi.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 8 +++++++- example/App.js | 1 + package.json | 2 +- src/MeetingItem/MeetingItem.css | 19 +++++++++++++++++-- src/MeetingItem/MeetingItem.js | 13 +++++++++++-- src/MeetingList/MeetingList.js | 8 +++++++- 6 files changed, 44 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index d9eaea3f..a3801630 100644 --- a/README.md +++ b/README.md @@ -572,7 +572,8 @@ import { MeetingItem } from 'react-chat-elements' src: 'https://facebook.github.io/react/img/logo.svg' ]} onMeetingClick={console.log} - onShareClick={console.log}/> + onShareClick={console.log} + onCloseClick={console.log}/> ``` #### MeetingItem props @@ -583,9 +584,11 @@ import { MeetingItem } from 'react-chat-elements' | date | none | date | MeetingItem date | | dateString | none | string | MeetingItem represents dateString or timeagojs(now, date) | | lazyLoadingImage | none | image path | lazy loading image | +| closable | true | boolean | MeetingItem closable | | onClick | none | function | MeetingItem on click | | onMeetingClick | none | function | MeetingItem on meeting click | | onShareClick | none | function | MeetingItem on share click | +| onCloseClick | none | function | MeetingItem on close click | | avatars | none | date | MeetingItem avatars | | avatarLimit | 5 | date | MeetingItem avatars limit | @@ -594,6 +597,8 @@ import { MeetingItem } from 'react-chat-elements' ![meetingList-photo](https://user-images.githubusercontent.com/15075759/90499889-ce201b80-e152-11ea-9cdb-7c3ef0e04b4e.png) +![meetingClosable](https://user-images.githubusercontent.com/53093667/90954468-2588f900-e47d-11ea-865e-10522e05f23f.gif) + ```javascript import { MeetingList } from 'react-chat-elements' @@ -623,6 +628,7 @@ import { MeetingList } from 'react-chat-elements' | onClick | none | function | meeting list item on click (meeting(object) is returned) | | onMeetingClick | none | function | meeting list item on meeting click (meeting(object) is returned) | | onShareClick | none | function | meeting list item on share click (meeting(object) is returned) | +| onCloseClick | none | function | meeting list item on close click (meeting(object) is returned) | | onContextMenu | none | function | meeting list item on context menu (meeting(object) is returned) | | onAvatarError | none | function | meeting list item on error avatar img | | lazyLoadingImage | none | image path | lazy loading image | \ No newline at end of file diff --git a/example/App.js b/example/App.js index 69859f25..610b6d28 100644 --- a/example/App.js +++ b/example/App.js @@ -198,6 +198,7 @@ export class App extends Component { avatars: Array(this.token() + 2).fill(1).map(x => ({ src: `data:image/png;base64,${this.photo()}`, })), + closable: true, }; } } diff --git a/package.json b/package.json index 62c7722b..f60a5042 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-chat-elements", - "version": "10.10.2", + "version": "10.10.3", "description": "Reactjs chat components", "author": "Avare Kodcu ", "main": "dist/main.js", diff --git a/src/MeetingItem/MeetingItem.css b/src/MeetingItem/MeetingItem.css index 70d20249..643b5fa7 100644 --- a/src/MeetingItem/MeetingItem.css +++ b/src/MeetingItem/MeetingItem.css @@ -51,7 +51,7 @@ } .rce-mtitem-body--functions { - width: 60px; + width: 70px; display: flex; align-items: center; justify-content: flex-end; @@ -94,6 +94,22 @@ transition: 300ms; } +.rce-mtitem-closable { + font-size: 25px; + color: #fff; + background:#ff4a4f; + display: none; + justify-content: center; + align-items: center; + border-radius: 100%; + padding: 3px; + margin-right: 7px; +} + +.rce-mtitem:hover .rce-mtitem-closable { + display: flex; +} + .rce-mtitem-share { font-size: 30px; display: flex; @@ -104,7 +120,6 @@ transition: 300ms; } - .rce-mtitem-button:hover, .rce-mtitem-share:hover { opacity: 0.8; diff --git a/src/MeetingItem/MeetingItem.js b/src/MeetingItem/MeetingItem.js index 4514fb60..ed7c91bf 100644 --- a/src/MeetingItem/MeetingItem.js +++ b/src/MeetingItem/MeetingItem.js @@ -3,6 +3,7 @@ import './MeetingItem.css'; import MdVideoCall from 'react-icons/lib/md/video-call'; import MdLink from 'react-icons/lib/md/link'; +import MdCall from 'react-icons/lib/md/call'; import Avatar from '../Avatar/Avatar'; @@ -37,7 +38,7 @@ export class MeetingItem extends Component {
{ - this.props.avatars.slice(0, 5).map((x, i) => x instanceof Avatar ? x : ( + this.props.avatars.slice(0, AVATAR_LIMIT).map((x, i) => x instanceof Avatar ? x : ( AVATAR_LIMIT &&
- {'+' + AVATAR_LIMIT} + {'+' + (this.props.avatars.length - AVATAR_LIMIT)}
}
+ { + this.props.closable && +
+ +
+ }
diff --git a/src/MeetingList/MeetingList.js b/src/MeetingList/MeetingList.js index 1457d373..fc8cfd22 100644 --- a/src/MeetingList/MeetingList.js +++ b/src/MeetingList/MeetingList.js @@ -33,6 +33,11 @@ export class MeetingList extends Component { this.props.onShareClick(item, i, e); } + onCloseClick(item, i, e) { + if (this.props.onCloseClick instanceof Function) + this.props.onCloseClick(item, i, e); + } + render() { return (
this.onContextMenu(x, i, e)} onClick={(e) => this.onClick(x, i, e)} onMeetingClick={(e) => this.onMeetingClick(x, i, e)} - onShareClick={(e) => this.onShareClick(x, i, e)}/> + onShareClick={(e) => this.onShareClick(x, i, e)} + onCloseClick={(e) => this.onCloseClick(x, i, e)}/> )) }
From e771a18a22c7758effb45189a86a7d2aa5d041c0 Mon Sep 17 00:00:00 2001 From: esracoskun Date: Fri, 4 Sep 2020 09:20:02 +0300 Subject: [PATCH 2/2] =?UTF-8?q?meetingItem=20tasar=C4=B1msal=20d=C3=BCzenl?= =?UTF-8?q?emeler=20yap=C4=B1ld=C4=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/MeetingItem/MeetingItem.css | 11 ++++++++++- src/MeetingItem/MeetingItem.js | 16 +++++++++------- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/MeetingItem/MeetingItem.css b/src/MeetingItem/MeetingItem.css index 643b5fa7..fcd964c7 100644 --- a/src/MeetingItem/MeetingItem.css +++ b/src/MeetingItem/MeetingItem.css @@ -21,6 +21,12 @@ background: #fbfbfb; } +.rce-mtitem-top { + display: flex; + flex-direction: row; + position: relative; + justify-content: space-between; +} .rce-mtitem-subject { padding: 0 10px; @@ -66,7 +72,7 @@ } .rce-mtitem-body--avatars .rce-avatar-container { - margin-left: -15px; + margin-left: -10px; border: 2px solid #fff; } @@ -108,6 +114,7 @@ .rce-mtitem:hover .rce-mtitem-closable { display: flex; + cursor: pointer; } .rce-mtitem-share { @@ -118,6 +125,8 @@ color: #5ba7c5; margin: -10px 0; transition: 300ms; + position: relative; + left: -10px; } .rce-mtitem-button:hover, diff --git a/src/MeetingItem/MeetingItem.js b/src/MeetingItem/MeetingItem.js index ed7c91bf..1dd6ef24 100644 --- a/src/MeetingItem/MeetingItem.js +++ b/src/MeetingItem/MeetingItem.js @@ -32,8 +32,15 @@ export class MeetingItem extends Component { onClick={this.props.onClick} onContextMenu={this.props.onContextMenu}>
-
- {subject} +
+
+ {subject} +
+
+ +
@@ -90,11 +97,6 @@ export class MeetingItem extends Component {
-
- -
{dateText}