csasq/cit-is-bot-backend
csasq/cit-is-bot-backend
1
0
Форкнуть 0
Код Задачи 8 Запросы на слияние Действия Пакеты Projects Релизы Вики Активность

Разработано несколько компонентов веб-интерфейса

Просмотр исходного кода
Этот коммит содержится в:
Глеб Иваницкий 2024-08-18 00:35:25 +03:00
родитель 1e22d40d19
Коммит 0c4bf26478
8 изменённых файлов: 174 добавлений и 45 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
frontend/src/activities/MainActivity.js
Просмотреть файл

@ -12,7 +12,7 @@ const bottomBar = (
)
const floatingActionButton = (
<md-fab id="create-poll-button" label="Создать опрос">
<md-fab label="Создать опрос">
<md-icon slot="icon">add</md-icon>
</md-fab>
)

12
frontend/src/components/Card.css Обычный файл
Просмотреть файл

@ -0,0 +1,12 @@
.card {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
background-color: var(--md-sys-color-surface-container);
border-radius: 1rem;
}
.card > * {
flex-shrink: 0;
}

11
frontend/src/components/Card.js Обычный файл
Просмотреть файл

@ -0,0 +1,11 @@
import './Card.css'
export default function Card({
children,
}) {
return (
<div className="card">
{children}
</div>
)
}

8
frontend/src/components/FullScreenDialog.css
Просмотреть файл

@ -23,14 +23,16 @@
scale: 0;
}
.full-screen-dialog > .content {
.full-screen-dialog > .scaffold > .content {
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
overflow-y: auto;
}
.full-screen-dialog > .content > * {
padding: 1rem;
.full-screen-dialog > .scaffold > .content > * {
flex-shrink: 0;
}

23
frontend/src/components/FullScreenDialog.js
Просмотреть файл

@ -1,10 +1,17 @@
import '@material/web/iconbutton/icon-button.js'
import '@material/web/icon/icon.js'
import '@material/web/button/filled-button'
import '@material/web/fab/fab'
import '@material/web/icon/icon'
import Scaffold from './Scaffold'
import TopAppBar from './TopAppBar'
import './FullScreenDialog.css'
import React from "react";
const floatingActionButton = (
<md-fab>
<md-icon slot="icon">add</md-icon>
</md-fab>
)
export default function ({
setEditPoll,
@ -13,10 +20,12 @@ export default function ({
}) {
return (
<div className={`full-screen-dialog ${classList}`}>
<TopAppBar onDismissRequest={() => setEditPoll(false)} />
<div className="content">
{children}
</div>
<Scaffold
topBar={
<TopAppBar onDismissRequest={() => setEditPoll(false)}/>
}
floatingActionButton={floatingActionButton}
content={children} />
</div>
)
}

1
frontend/src/components/NavigationBar.css
Просмотреть файл

@ -1,6 +1,7 @@
nav {
display: flex;
flex-direction: column;
padding-bottom: .5rem;
background-color: var(--md-sys-color-surface-container-high);
}

39
frontend/src/screens/PollsScreen.css
Просмотреть файл

@ -0,0 +1,39 @@
label,
.messages-title,
.title {
color: var(--md-sys-color-on-surface);
}
label {
display: flex;
align-items: center;
}
.messages-title {
margin: 1rem 0;
}
.title:not(:first-child) {
margin-top: 1rem;
}
.poll-options {
display: flex;
flex-direction: column;
}
.poll-options > .poll-option {
flex-shrink: 0;
display: flex;
align-items: center;
}
.poll-options > .poll-option > .option-text {
flex-grow: 1;
flex-shrink: 1;
}
.poll-options > .poll-option > .option-action {
flex-shrink: 0;
margin-left: 1rem;
}

117
frontend/src/screens/PollsScreen.js
Просмотреть файл

@ -1,14 +1,15 @@
import React, {useEffect, useState} from "react"
import React, {useEffect, useState} from 'react'
import '@material/web/textfield/outlined-text-field'
import '@material/web/fab/fab'
import '@material/web/icon/icon'
import '@material/web/select/outlined-select'
import '@material/web/select/select-option'
import '@material/web/list/list'
import '@material/web/list/list-item'
import '@material/web/iconbutton/filled-icon-button'
import '@material/web/checkbox/checkbox'
import FullScreenDialog from "../components/FullScreenDialog"
import PollListItem from "../components/PollListItem"
import PollListItem from '../components/PollListItem'
import FullScreenDialog from '../components/FullScreenDialog'
import Card from '../components/Card'
import './PollsScreen.css'
@ -102,33 +103,87 @@ export default function PollsScreen() {
</md-outlined-select>
<section id="poll-messages">
<div className="md-typescale-title-medium">Сообщения</div>
<md-list>
<md-list-item>
Fruits
</md-list-item>
<md-divider></md-divider>
<md-list-item>
Apple
</md-list-item>
<md-list-item>
Banana
</md-list-item>
<md-list-item>
<div slot="headline">Cucumber</div>
<div slot="supporting-text">Cucumbers are long green fruits that are just as long as this
multi-line description
<div className="messages-title md-typescale-title-medium">Сообщения</div>
<Card>
<div className="title md-typescale-title-small">Сообщение 1</div>
<md-outlined-select label="Тип" value="poll" required="required">
<md-icon slot="leading-icon">attach_file</md-icon>
<md-select-option value="text">
<div slot="headline">Текст</div>
</md-select-option>
<md-select-option value="poll">
<div slot="headline">Опрос</div>
</md-select-option>
<md-select-option value="image">
<div slot="headline">Изображение</div>
</md-select-option>
<md-select-option value="video">
<div slot="headline">Видео</div>
</md-select-option>
<md-select-option value="audio">
<div slot="headline">Аудио</div>
</md-select-option>
<md-select-option value="file">
<div slot="headline">Файл</div>
</md-select-option>
</md-outlined-select>
<md-outlined-text-field
label="Вопрос"
value=""
required="required">
<md-icon slot="leading-icon">contact_support</md-icon>
</md-outlined-text-field>
<div className="title md-typescale-title-small">Варианты ответа</div>
<div className="poll-options">
<div className="poll-option">
<md-outlined-text-field
class="option-text"
label="Добавить ответ"
value=""
required="required" />
<md-filled-icon-button class="option-action">
<md-icon>arrow_forward</md-icon>
</md-filled-icon-button>
</div>
</md-list-item>
<md-list-item
type="link"
href="https://google.com/search?q=buy+kiwis&tbm=shop"
target="_blank">
<div slot="headline">Shop for Kiwis</div>
<div slot="supporting-text">This will link you out in a new tab</div>
<md-icon slot="end">open_in_new</md-icon>
</md-list-item>
</md-list>
</div>
<div className="title md-typescale-title-small">Настройки</div>
<label className="md-typescale-body-large">
<md-checkbox touch-target="wrapper"></md-checkbox>
Анонимное голосование
</label>
<label className="md-typescale-body-large">
<md-checkbox touch-target="wrapper"></md-checkbox>
Выбор нескольких ответов
</label>
<label className="md-typescale-body-large">
<md-checkbox touch-target="wrapper"></md-checkbox>
Не уведомлять получателей
</label>
</Card>
</section>
</FullScreenDialog>