apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(polls): Update ux according to design

Browse Source
pull/10152/head jitsi-meet_6478
Vlad Piersec 4 years ago committed by vp8x8
parent ebb0a206f1
commit 2855642fc3
4 changed files with 141 additions and 154 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 274
      css/_polls.scss
  2. 9
      react/features/polls/components/web/PollAnswer.js
  3. 8
      react/features/polls/components/web/PollCreate.js
  4. 4
      react/features/polls/components/web/PollsPane.js

274
css/_polls.scss
Unescape View File

@ -1,5 +1,7 @@
.poll-dialog {
font-size: 1rem;
font-size: 14px;
font-weight: 400;
line-height: 20px;
h1, span, li, strong {
color: #bce;
@ -16,28 +18,52 @@
}
.poll-header {
padding: 8px 16px;
margin-bottom: 8px;
}
.poll-answer-container{
padding: 8px;
.poll-answer-container {
background: #3D3D3D;
border-radius: 3px;
margin-bottom: 8px;
@media (max-width: 580px) {
&> span {
padding: 8px 0;
}
svg {
margin-top: 6px;
}
}
}
.poll-answer-option {
font-weight: 400;
display: block;
margin: 4px;
@media (max-width: 580px) {
font-size: 16px;
margin: 11px 8px
}
}
.poll-answer-field-list, .poll-answer-list, .poll-result-list {
list-style-type: none;
padding: 0 16px;
padding: 0;
margin: 0;
}
.poll-answer-field-list {
padding: 0 16px;
}
ol.poll-result-list {
margin-bottom: 1.5em;
}
.poll-result-list > li {
margin-bottom: 8px;
margin-bottom: 16px;
}
.poll-answer-field {
@ -60,7 +86,7 @@ ol.poll-result-list {
.poll-create-container .jsYMHu {
background: #292929;
border-color: #808090;
color: white // #808090
color: #fff // #808090
}
.poll-add-button {
@ -72,7 +98,7 @@ ol.poll-result-list {
.poll-remove-option-button {
background: 0 0;
border: none;
color: #8B8B8B;
color: #E04757;
padding-left: 0;
}
@ -85,7 +111,7 @@ ol.poll-result-list {
.poll-icon-button, .poll-drag-handle {
.jitsi-icon svg {
fill: #bce;
fill: #929292;
}
}
@ -94,6 +120,7 @@ ol.poll-result-list {
border: none;
cursor: grab;
padding-left: 8;
padding-top: 8px;
display: flex;
}
@ -105,13 +132,12 @@ ol.poll-result-list {
}
.poll-question {
font-size: 1.2em;
font-size: 16px;
font-weight: 600;
margin-bottom: 0.5em;
margin-bottom: 16px;
}
.poll-answer-voters {
font-size: 1em;
font-weight: lighter;
list-style-type: none;
border: #616161 solid 1px;
@ -191,29 +217,40 @@ ol.poll-result-list {
display: flex;
flex-direction: row;
justify-content: space-between;
}
a.poll-detail-link, a.poll-change-vote-link {
color: #246FE5;
cursor: pointer;
text-decoration: none;
a.poll-detail-link, a.poll-change-vote-link {
color: #669AEC;
cursor: pointer;
font-weight: 600;
text-decoration: none;
&:hover {
color: #669AEC;
}
&:visited {
color: #669AEC;
}
}
}
.polls-pane-content {
display: flex;
flex-direction: column;
font-weight: 600;
height: 85%;
align-items: stretch;
height: calc(100% - 102px);
position: relative;
@media (max-width: 580px) {
height: calc(100% - 32px);
}
}
.pane-content{
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.empty-pane-icon {
@ -228,37 +265,41 @@ a.poll-detail-link, a.poll-change-vote-link {
}
.empty-pane-message {
color: #fff;
padding: 0 16px;
text-align: center;
}
.poll-results, .poll-answer {
background: #292929;
border-radius: 8px;
border: 1px solid #666666;
margin: 16px;
padding: 16px;
word-break: break-word;
}
.poll-results {
color: white;
color: #fff;
}
.poll-answer {
h1, strong ,span {
color: white;
color: #fff;
}
}
.poll-results, .poll-answer {
margin-bottom: 16px;
background: #292929;
border-radius: 8px;
padding: 12px 8px;
border-width: thin;
border-style: solid;
border-color: #616161;
word-break: break-word;
}
.poll-create-label {
color: white;
margin-bottom: 4;
color: #C2C2C2;
display: flex;
font-weight: 400;
margin-bottom: 4;
}
.expandable-input{
line-height: 18px;
resize: none;
width: 100%;
height: 40px;
@ -272,23 +313,26 @@ a.poll-detail-link, a.poll-change-vote-link {
}
.poll-container {
box-sizing: border-box;
flex: 1;
font-size: 14px;
font-weight: 600;
height: calc(100% - 88px);
line-height: 20px;
overflow-y: auto;
position: relative;
padding: 16px;
& > * + *:not(.ignore-child) {
margin-top: 16px;
}
&::-webkit-scrollbar {
display: none;
@media (max-width: 580px) {
height: calc(100% - 102px);
}
}
.poll-create-header {
color: #fff;
font-size: 20px;
line-height: 28px;
margin: 20px 16px;
font-weight: 600;
}
@ -297,98 +341,45 @@ a.poll-detail-link, a.poll-change-vote-link {
padding: 8px 0;
}
.poll-footer {
display: flex;
justify-content: flex-end;
padding: 8px 16px;
height: 40px;
align-items: stretch;
& > *:not(:last-child) {
margin-right: 16px;
}
.poll-create-footer {
background-color: #141414;
bottom: 0;
position: absolute;
width: calc(100% - 32px);
}
.poll-primary-button {
align-items: center;
background-color: #0056E0;
border: 0;
border-radius: 6px;
display: flex;
font-weight: unset;
justify-content: center;
font-size: 15px;
flex: 1;
&:hover {
background-color: #246FE5;
}
&:active {
background-color: #0045B3;
}
&:focus {
background-color: #0045B3;
border: 3px solid #99BBF3;
}
&:disabled {
background-color: #00225A;
color: #858585;
}
& > *:not(:last-child) {
margin-right: 8px;
}
.poll-footer {
display: flex;
justify-content: space-between;
padding: 0 16px 16px 16px;
}
.poll-secondary-button {
align-items: center;
background-color: #3D3D3D;
border: 0;
border-radius: 6px;
display: flex;
font-weight: unset;
justify-content: center;
font-size: 15px;
height: 40px;
width: 100%;
&:hover {
background-color: #525252;
}
&:active {
background-color: #292929;
}
.poll-answer-footer {
padding: 8px 0 0 0;
}
&:focus {
background-color: #292929;
border: 3px solid #858585;
}
.poll-button {
align-items: center;
border: 0;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
display: flex;
justify-content: center;
min-height: 40px;
width: 100%;
&:disabled {
background-color: #141414;
color: #858585;
}
&:disabled {
cursor: initial;
}
& > *:not(:last-child) {
margin-right: 8px;
}
@media (max-width: 580px) {
min-height: 48px;
}
}
.poll-small-primary-button {
align-items: center;
.poll-button-primary {
background-color: #0056E0;
border: 0;
border-radius: 6px;
display: flex;
font-weight: unset;
justify-content: center;
font-size: 15px;
height: 40px;
width: 50%;
&:hover {
background-color: #246FE5;
@ -406,25 +397,11 @@ a.poll-detail-link, a.poll-change-vote-link {
&:disabled {
background-color: #00225A;
color: #858585;
cursor: default;
}
& > *:not(:last-child) {
margin-right: 8px;
}
}
.poll-small-secondary-button {
align-items: center;
.poll-button-secondary {
background-color: #3D3D3D;
border: 0;
border-radius: 6px;
display: flex;
font-weight: unset;
justify-content: center;
font-size: 15px;
height: 40px;
width: 50%;
&:hover {
background-color: #525252;
@ -443,8 +420,19 @@ a.poll-detail-link, a.poll-change-vote-link {
background-color: #141414;
color: #858585;
}
}
& > *:not(:last-child) {
margin-right: 8px;
}
.poll-button-short {
max-width: 132px;
}
.poll-button-shortest {
max-width: 117px;
}
.poll-button-short,
.poll-button-shortest {
@media (max-width: 580px) {
min-width: 49%;
}
}

9
react/features/polls/components/web/PollAnswer.js
Unescape View File

@ -33,7 +33,7 @@ const PollAnswer = (props: AbstractProps) => {
<Checkbox
isChecked = { checkBoxStates[index] }
key = { index }
label = { <span>{ answer.name }</span> }
label = { <span className = 'poll-answer-option'>{ answer.name }</span> }
// eslint-disable-next-line react/jsx-no-bind
onChange = { ev => setCheckbox(index, ev.target.checked) }
size = 'large' />
@ -41,22 +41,21 @@ const PollAnswer = (props: AbstractProps) => {
))
}
</ol>
<div className = { 'poll-footer' }>
<div className = 'poll-footer poll-answer-footer' >
<button
aria-label = { t('polls.answer.skip') }
className = { 'poll-small-secondary-button' }
className = 'poll-button poll-button-secondary poll-button-shortest'
onClick = { skipAnswer } >
<span>{t('polls.answer.skip')}</span>
</button>
<button
aria-label = { t('polls.answer.submit') }
className = 'poll-small-primary-button'
className = 'poll-button poll-button-primary poll-button-shortest'
disabled = { isSubmitAnswerDisabled(checkBoxStates) }
onClick = { submitAnswer }>
<span>{t('polls.answer.submit')}</span>
</button>
</div>
</div>
);
};

8
react/features/polls/components/web/PollCreate.js
Unescape View File

@ -212,7 +212,7 @@ const PollCreate = (props: AbstractProps) => {
<div className = 'poll-add-button'>
<button
aria-label = { 'Add option' }
className = { 'poll-secondary-button' }
className = 'poll-button poll-button-secondary'
onClick = { () => {
addAnswer();
requestFocus(answers.length);
@ -222,17 +222,17 @@ const PollCreate = (props: AbstractProps) => {
</button>
</div>
</div>
<div className = 'poll-footer'>
<div className = 'poll-footer poll-create-footer'>
<button
aria-label = { t('polls.create.cancel') }
className = 'poll-small-secondary-button'
className = 'poll-button poll-button-secondary poll-button-short'
onClick = { () => setCreateMode(false) }
type = 'button' >
<span>{t('polls.create.cancel')}</span>
</button>
<button
aria-label = { t('polls.create.send') }
className = 'poll-small-primary-button'
className = 'poll-button poll-button-primary poll-button-short'
disabled = { isSubmitDisabled }
type = 'submit' >
<span>{t('polls.create.send')}</span>

4
react/features/polls/components/web/PollsPane.js
Unescape View File

@ -19,10 +19,10 @@ const PollsPane = (props: AbstractProps) => {
<div className = { 'poll-container' } >
<PollsList />
</div>
<div className = { 'poll-footer' }>
<div className = 'poll-footer poll-create-footer'>
<button
aria-label = { t('polls.create.create') }
className = { 'poll-primary-button' }
className = 'poll-button poll-button-primary'
// eslint-disable-next-line react/jsx-no-bind
onClick = { onCreate } >
<span>{t('polls.create.create')}</span>

Write Preview
Loading…
Cancel
Save