Skip to content

Commit d65e96a

Browse files
Artem-K-KoltunovArtem-K-Koltunov
committed
v0.2.8-beta.6
1 parent c8152d8 commit d65e96a

File tree

9 files changed

+496
-0
lines changed

9 files changed

+496
-0
lines changed

‎src/Presentation/Views/Dialog/DialogHeader/RenderLeftActions/RenderLeftActions.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.dialog-header-left-icon {
2+
display: none;
3+
}
4+
.navigation-back {
5+
align-self: stretch;
6+
flex: 1;
7+
height: auto;
8+
position: relative;
9+
overflow: visible;
10+
}
11+
12+
13+
@media only screen and (max-width: 980px) {
14+
.dialog-header-left-icon {
15+
border-radius: 4px;
16+
padding: 4px;
17+
display: flex;
18+
flex-direction: row;
19+
gap: 0px;
20+
align-items: center;
21+
justify-content: center;
22+
flex-shrink: 0;
23+
width: 32px;
24+
height: 32px;
25+
position: relative;
26+
cursor: pointer;
27+
}
28+
}
29+

‎src/Presentation/Views/Dialog/DialogHeader/RenderLeftActions/RenderLeftActions.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import './RenderLeftActions.scss';
3+
import { FunctionTypeVoidToVoid } from '../../../../../CommonTypes/BaseViewModel';
4+
import UiKitTheme from '../../../../themes/UiKitTheme';
5+
import ActiveSvg from '../../../../components/UI/svgs/ActiveSvg/ActiveSvg';
6+
import Back from '../../../../components/UI/svgs/Icons/Navigation/Back';
7+
8+
type RenderLeftActionsProps = {
9+
onClickBack: FunctionTypeVoidToVoid;
10+
theme?: UiKitTheme;
11+
};
12+
// RenderRightActions
13+
// RenderLeftActions
14+
const RenderLeftActions: React.FC<
15+
RenderLeftActionsProps
16+
// eslint-disable-next-line react/function-component-definition
17+
> = ({
18+
onClickBack,
19+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
20+
theme = undefined,
21+
}: RenderLeftActionsProps) => {
22+
return (
23+
<div className="dialog-header-left-icon">
24+
<ActiveSvg
25+
content={
26+
<Back width="24" height="24" applyZoom color="var(--main-elements)" />
27+
}
28+
onClick={onClickBack}
29+
onTouch={onClickBack}
30+
/>
31+
</div>
32+
);
33+
};
34+
35+
export default RenderLeftActions;

‎src/Presentation/Views/Dialog/DialogHeader/RenderRightActions/RenderRightActions.scss

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.dialog-header-right,
2+
.dialog-header-right * {
3+
box-sizing: border-box;
4+
}
5+
.dialog-header-right {
6+
display: flex;
7+
flex-direction: row;
8+
gap: 16px;
9+
align-items: center;
10+
justify-content: flex-start;
11+
flex-shrink: 0;
12+
position: relative;
13+
}
14+
.dialog-header-right-icon {
15+
border-radius: 4px;
16+
padding: 4px;
17+
display: flex;
18+
flex-direction: row;
19+
gap: 0px;
20+
align-items: center;
21+
justify-content: center;
22+
flex-shrink: 0;
23+
width: 32px;
24+
height: 32px;
25+
position: relative;
26+
}
27+
.actions-phone-filled {
28+
align-self: stretch;
29+
flex: 1;
30+
height: auto;
31+
position: relative;
32+
overflow: visible;
33+
}
34+
.status-information {
35+
align-self: stretch;
36+
flex: 1;
37+
height: auto;
38+
position: relative;
39+
overflow: visible;
40+
}
41+

‎src/Presentation/Views/Dialog/DialogHeader/RenderRightActions/RenderRightActions.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import './RenderRightActions.scss';
3+
import { FunctionTypeVoidToVoid } from '../../../../../CommonTypes/BaseViewModel';
4+
import UiKitTheme from '../../../../themes/UiKitTheme';
5+
import ActiveSvg from '../../../../components/UI/svgs/ActiveSvg/ActiveSvg';
6+
import InformationFill from '../../../../components/UI/svgs/Icons/Status/InformationFill';
7+
8+
type RenderRightActionsProps = {
9+
onClickInfo: FunctionTypeVoidToVoid;
10+
theme?: UiKitTheme;
11+
};
12+
const RenderRightActions: React.FC<
13+
RenderRightActionsProps
14+
// eslint-disable-next-line react/function-component-definition
15+
> = ({
16+
onClickInfo,
17+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
18+
theme = undefined,
19+
}: RenderRightActionsProps) => {
20+
return (
21+
//
22+
<div className="dialog-header-right">
23+
<div className="dialog-header-right-icon">
24+
{/* TODO: phone button // Phone Btn */}
25+
{/* <ActiveSvg */}
26+
{/* content={<Phone width="24" height="24" applyZoom />} */}
27+
{/* onClick={() => { */}
28+
{/* if (CallHandler) CallHandler(); */}
29+
{/* }} */}
30+
{/* onTouch={() => { */}
31+
{/* if (CallHandler) CallHandler(); */}
32+
{/* }} */}
33+
{/* /> */}
34+
</div>
35+
36+
<div className="dialog-header-right-icon">
37+
<ActiveSvg
38+
content={
39+
<InformationFill
40+
width="24"
41+
height="24"
42+
applyZoom
43+
color="var(--main-elements)"
44+
/>
45+
}
46+
onClick={() => {
47+
if (onClickInfo) onClickInfo();
48+
}}
49+
onTouch={() => {
50+
if (onClickInfo) onClickInfo();
51+
}}
52+
/>
53+
</div>
54+
</div>
55+
);
56+
};
57+
58+
export default RenderRightActions;

‎src/Presentation/Views/Dialog/Message/IncomingMessage/MessageContentComponent/MessageContentComponent.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.message-content-text {
2+
overflow-wrap: break-word;
3+
max-width: calc(var(--max-width-message-bubble) - 20px);
4+
}

‎src/Presentation/Views/DialogInfo/MembersList/MembersList.scss

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
.members-container{
2+
min-width: 320px;
3+
}
4+
.members-container-header,
5+
.members-container-header * {
6+
box-sizing: border-box;
7+
}
8+
.members-container-header {
9+
background: var(--color-background, #ffffff);
10+
padding: 16px 16px 16px 24px;
11+
display: flex;
12+
flex-direction: row;
13+
align-items: center;
14+
justify-content: space-between;
15+
align-self: stretch;
16+
flex-shrink: 0;
17+
position: relative;
18+
}
19+
.members-container-header-left {
20+
display: flex;
21+
flex-direction: row;
22+
gap: 8px;
23+
align-items: center;
24+
justify-content: flex-start;
25+
flex-shrink: 0;
26+
position: relative;
27+
}
28+
.members-container-header-left-headline {
29+
color: var(--main-text, #0b1b0f);
30+
text-align: left;
31+
font: var(--title-title-large);
32+
position: relative;
33+
}
34+
.members-container-header-left-headline-badge {
35+
background: var(--disabled-elements, #bcc1c5);
36+
border-radius: 30px;
37+
padding: 2px 6px 2px 6px;
38+
display: flex;
39+
flex-direction: column;
40+
gap: 10px;
41+
align-items: center;
42+
justify-content: center;
43+
flex-shrink: 0;
44+
position: relative;
45+
}
46+
.members-container-header-left-headline-badge-value {
47+
color: var(--color-background, #ffffff);
48+
text-align: center;
49+
font: var(--label-label-medium);
50+
position: relative;
51+
}
52+
.members-container-header-icon {
53+
border-radius: 4px;
54+
padding: 4px;
55+
display: flex;
56+
flex-direction: row;
57+
gap: 0px;
58+
align-items: center;
59+
justify-content: center;
60+
flex-shrink: 0;
61+
width: 32px;
62+
height: 32px;
63+
position: relative;
64+
}
65+
66+
67+
.members-container-search,
68+
.members-container-search * {
69+
box-sizing: border-box;
70+
}
71+
.members-container-search {
72+
padding: 16px;
73+
display: flex;
74+
flex-direction: column;
75+
gap: 24px;
76+
align-items: center;
77+
justify-content: flex-start;
78+
align-self: stretch;
79+
flex-shrink: 0;
80+
position: relative;
81+
}
82+
.members-container-search-text-field {
83+
background: var(--color-background, #ffffff);
84+
display: flex;
85+
flex-direction: column;
86+
gap: 8px;
87+
align-items: flex-start;
88+
justify-content: flex-start;
89+
align-self: stretch;
90+
flex-shrink: 0;
91+
position: relative;
92+
}
93+
.members-container-search-text-field-f {
94+
border-radius: 4px;
95+
border-style: solid;
96+
border-color: var(--tertiary-elements, #636d78);
97+
border-width: 1px;
98+
padding: 6px 8px 6px 8px;
99+
display: flex;
100+
flex-direction: row;
101+
align-items: center;
102+
justify-content: space-between;
103+
align-self: stretch;
104+
flex-shrink: 0;
105+
position: relative;
106+
}
107+
.members-container-search-text-field-f-left {
108+
display: flex;
109+
flex-direction: row;
110+
gap: 6px;
111+
align-items: center;
112+
justify-content: flex-start;
113+
flex-shrink: 0;
114+
position: relative;
115+
}
116+
.members-container-search-text-field-f-left-icon {
117+
border-radius: 4px;
118+
padding: 4px;
119+
display: flex;
120+
flex-direction: row;
121+
gap: 0px;
122+
align-items: center;
123+
justify-content: center;
124+
flex-shrink: 0;
125+
width: 32px;
126+
height: 32px;
127+
position: relative;
128+
}
129+
.members-container-search-text-field-f-left-input {
130+
color: var(--secondary-text, #636d78);
131+
text-align: left;
132+
font: var(--body-body-large);
133+
position: relative;
134+
display: flex;
135+
align-items: center;
136+
justify-content: flex-start;
137+
138+
input {
139+
color: var(--secondary-text);
140+
background-color: var(--main-background);
141+
142+
font-family: 'Roboto';
143+
font-style: normal;
144+
font-weight: 400;
145+
font-size: 16px;
146+
line-height: 24px;
147+
148+
display: flex;
149+
align-items: center;
150+
letter-spacing: 0.15px;
151+
152+
border: none;
153+
outline: none;
154+
}
155+
}
156+
.members-container-search-text-field-f-right {
157+
display: flex;
158+
flex-direction: row;
159+
gap: 10px;
160+
align-items: center;
161+
justify-content: flex-end;
162+
flex-shrink: 0;
163+
position: relative;
164+
}
165+
166+
.members-container-members-list-wrapper{
167+
display: flex;
168+
max-height: 660px;
169+
height: 660px;
170+
}
171+

0 commit comments

Comments
 (0)