Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature/notification_settings_mobile_page #484

Merged
merged 11 commits into from
Feb 26, 2024
Prev Previous commit
Next Next commit
subscription row styles
  • Loading branch information
EduardZaydler committed Feb 19, 2024
commit 7951c06f94125afd9be1a7a810627327d21c112d
1 change: 1 addition & 0 deletions local_modules/styles/variables.less
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@
@gapSize: 5px;
@containerMaxWidth: 1200px;
@containerGap: 15px;
@breakpoint: 600px;
12 changes: 7 additions & 5 deletions src/Components/ContactInfo/ContactInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import ContactTypeIcon from "../ContactTypeIcon/ContactTypeIcon";

type Props = {
contact: Contact;
className?: string;
};

export default function ContactInfo(props: Props): React.ReactElement {
const { contact } = props;
export default function ContactInfo({ contact, className }: Props): React.ReactElement {
return (
<>
<ContactTypeIcon type={contact.type} /> {contact.value}
</>
<div className={className}>
<ContactTypeIcon type={contact.type} />
&nbsp;
<span>{contact.value}</span>
</div>
);
}
26 changes: 26 additions & 0 deletions src/Components/Mobile/MobileSettingsPage/MobileSettingsPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React, { FC } from "react";
import MobileHeader from "../MobileHeader/MobileHeader";
import { Sticky } from "@skbkontur/react-ui/components/Sticky";
import { getPageLink } from "../../../Domain/Global";
import ArrowChevronLeftIcon from "@skbkontur/react-icons/ArrowChevronLeft";
import SettingsContainer from "../../../Containers/SettingsContainer";
import { ISettingsContainerProps } from "../../../Containers/SettingsContainer";

export const MobileSettingsPage: FC<ISettingsContainerProps> = (props) => {
return (
<>
<MobileHeader>
<Sticky side="top">
<MobileHeader.HeaderBlock>
<MobileHeader.LeftButton
icon={<ArrowChevronLeftIcon />}
linkTo={getPageLink("index")}
/>
<MobileHeader.Title>Moira: Settings</MobileHeader.Title>
</MobileHeader.HeaderBlock>
</Sticky>
</MobileHeader>
<SettingsContainer {...props} />
</>
);
};
109 changes: 69 additions & 40 deletions src/Components/SubscriptionList/SubscriptionRow/SubscriptionRow.less
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
@import '~styles/variables.less';

.item {
cursor: pointer;

&:hover {
&:hover, &.enabled-cell:hover{
background-color: #f8f8f8;
}

Expand All @@ -15,8 +17,20 @@
border-bottom: 0;
}

.contact {
margin-right: 10px;
position: relative;

&::after {
content: "";
position: absolute;
top: 0;
right: calc(100% - 80px);
bottom: 0;
background-color: #f8f8f8;
opacity: 0;
}

&:hover::after {
opacity: 1;
}
}

Expand All @@ -28,57 +42,72 @@
background-color: #ffcece;
}

.tags-cell {
max-width: 350px;
}

@media screen and (max-width: 600px) {
.item {
max-height: 30px;
overflow: hidden;
};
td > div {
max-width: 60px;
max-height: 20px;
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(
to bottom right,
black 20%,
transparent,
);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 20px;

mask-image: linear-gradient(
to bottom right,
black 20%,
transparent
);
mask-repeat: no-repeat;
mask-size: 100% 20px;
}
}

.triggers-cell {
display: table-cell;
white-space: nowrap;
}

.contacts-cell {
width: 80%;
.contacts-content {
display: flex;
gap: 5px;
flex-wrap: wrap;
align-items: center;
}

.contact {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.enabled-cell {
min-width: 80px;
max-width: 80px;
width: 80px;
text-align: end;
}

.disabled-label {
overflow: hidden;
color: #D43517;
font-weight: 700;
}

.tooltip-cell {
width: 10px;
}
}

@media screen and (min-width: @breakpoint) {
.showMore-button-cell {
display: none;
}
}

@media screen and (max-width: @breakpoint) {
td > div {
FonDumik marked this conversation as resolved.
Show resolved Hide resolved
max-height: 20px;
overflow: hidden;
box-sizing: border-box;
max-width: 90px;
}

.contact > span:nth-child(2) {
display: none;
}

.triggers-cell {
display: table-cell;
white-space: nowrap;
max-width: 45px;
overflow: hidden;
text-overflow: ellipsis;
}

.expanded {
td > div {
max-height: 100%;
}

.contact > span:nth-child(2) {
display: inline-block;
}
}
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import React from "react";
import { Link, Gapped, Hint } from "@skbkontur/react-ui";
import React, { useState } from "react";
import { Link, Hint } from "@skbkontur/react-ui";
import { Contact, filterSubscriptionContacts } from "../../../Domain/Contact";
import { Subscription } from "../../../Domain/Subscription";
import ContactInfo from "../../ContactInfo/ContactInfo";
import TagGroup from "../../TagGroup/TagGroup";
import HelpTooltip from "../../HelpTooltip/HelpTooltip";
import queryString from "query-string";
import ArrowChevronUpIcon from "@skbkontur/react-icons/ArrowChevronUp";
import ArrowChevronDownIcon from "@skbkontur/react-icons/ArrowChevronDown";
import classNames from "classnames/bind";

import styles from "./SubscriptionRow.less";
Expand All @@ -23,10 +25,16 @@ export const SubscriptionRow: React.FC<SubscriptionRowProps> = ({
contacts,
onEditSubscription,
}) => {
const [isExpanded, setIsExpanded] = useState(false);

const toggleExpand = () => {
setIsExpanded(!isExpanded);
};

const getSubscriptionContacts = filterSubscriptionContacts(
contacts,
subscription
).map((x: Contact) => <ContactInfo key={x.id} contact={x} />);
).map((x: Contact) => <ContactInfo className={cn("contact")} key={x.id} contact={x} />);

const areAnyDisruptedSubs = getSubscriptionContacts.length === 0;

Expand All @@ -37,16 +45,34 @@ export const SubscriptionRow: React.FC<SubscriptionRowProps> = ({
}
)}`;

const handleCollapse = (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
toggleExpand();
event.stopPropagation();
};

const rowClassName = cn(
{
error: areAnyDisruptedSubs,
expanded: isExpanded,
},
"item"
);

return (
<tr
key={subscription.id}
className={cn("item", { error: areAnyDisruptedSubs })}
className={cn(rowClassName)}
onClick={() => onEditSubscription(subscription)}
>
<td className={cn("showMore-button-cell")}>
{isExpanded ? (
<ArrowChevronUpIcon onClick={(event) => handleCollapse(event)} />
) : (
<ArrowChevronDownIcon onClick={(event) => handleCollapse(event)} />
)}
</td>
<td className={cn("tags-cell")}>
<div>
<TagGroup tags={subscription.tags} />
</div>
<TagGroup tags={subscription.tags} />
</td>
<td className={cn("triggers-cell")}>
<Hint text="Show all associated triggers">
Expand All @@ -59,22 +85,24 @@ export const SubscriptionRow: React.FC<SubscriptionRowProps> = ({
</Link>
</Hint>
</td>
<td className={cn("contacts-cell")}>
<Gapped wrap gap={10}>
{getSubscriptionContacts}
</Gapped>
</td>
<td className={cn("enabled-cell")}>
{!subscription.enabled && <span className={cn("disabled-label")}>Disabled</span>}
<td>
<div className={cn("contacts-content")}>{getSubscriptionContacts}</div>
</td>
<td className={cn("tooltip-cell")}>
{areAnyDisruptedSubs && (
{!subscription.enabled && (
<td className={cn("enabled-cell")}>
<span className={cn("disabled-label")}>Disabled</span>
</td>
)}
{areAnyDisruptedSubs && (
<td className={cn("tooltip-cell")}>
(
<HelpTooltip trigger="hover">
It seems that this subscription is broken, please set up the delivery
channel.
</HelpTooltip>
)}
</td>
)
</td>
)}
</tr>
);
};
2 changes: 2 additions & 0 deletions src/Components/Tag/Tag.less
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
.title {
padding-right: 5px;
padding-left: 5px;
overflow: hidden;
text-overflow: ellipsis;

&.clickable {
cursor: pointer;
Expand Down
13 changes: 4 additions & 9 deletions src/Components/TagDropdownSelect/TagDropdownSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,8 @@ export default class TagDropdownSelect extends React.Component<Props, State> {
offsetY={1}
hasFixedWidth
>
<ScrollContainer maxHeight={300}>
<div
className={cn("tags-menu")}
style={{ width }}
ref={this.tagsRef}
onBlur={onBlur}
>
<div className={cn("tags-menu")} ref={this.tagsRef} onBlur={onBlur}>
<ScrollContainer maxHeight={300}>
{filtredTags.length > 0 || allowCreateNewTags ? (
<div className={cn("tag-list")}>
{filtredTags.map((tag, i) => (
Expand Down Expand Up @@ -107,8 +102,8 @@ export default class TagDropdownSelect extends React.Component<Props, State> {
No matched tags found.
</div>
)}
</div>
</ScrollContainer>
</ScrollContainer>
</div>
</DropdownContainer>
)}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/Containers/SettingsContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ import {
setTeamsAndTags,
setDisruptedSubs,
} from "../hooks/useSettingsContainerReducer";
interface Props extends RouteComponentProps<{ teamId?: string }> {
export interface ISettingsContainerProps extends RouteComponentProps<{ teamId?: string }> {
moiraApi: MoiraApi;
}

const SettingsContainer: FC<Props> = ({ moiraApi, match, history }) => {
const SettingsContainer: FC<ISettingsContainerProps> = ({ moiraApi, match, history }) => {
const teamId = match.params.teamId;
const [state, dispatch] = useSettingsContainerReducer();
const { loadData, getTeamOrUserData } = useLoadSettingsData(moiraApi, dispatch, teamId);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '~styles/variables.less';

.header {
font-size: 18px;
font-weight: 400;
Expand All @@ -8,7 +10,7 @@
display: grid;
grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));
grid-auto-flow: column;
gap: 5px;
grid-gap: 5px;
}

.row {
Expand All @@ -19,7 +21,7 @@
align-items: baseline;
}

@media (max-width: 600px) {
@media screen and (max-width: @breakpoint) {
.subscriptionBtnContainer {
grid-template-columns: 1fr;
grid-auto-flow: row;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,6 @@ export const SubscriptionListContainer: React.FC<Props> = (props) => {
<>
<div className={cn("row")}>
<h2 className={cn("header")}>Subscriptions</h2>

<div className={cn("subscriptionBtnContainer")}>
<Button
width={180}
Expand All @@ -182,9 +181,8 @@ export const SubscriptionListContainer: React.FC<Props> = (props) => {
>
Add subscription
</Button>

<TagDropdownSelect
width={"180px"}
width={180}
value={filterTags}
availableTags={availableTags}
onChange={handleFilterTagsChange}
Expand Down
Loading