Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Change mute, block and domain block confirmations in web UI (#29576)

Browse source
This commit is contained in:
Eugen Rochko 2024-03-15 18:36:41 +01:00 • committed by GitHub
parent be7a68b095
commit ec19d0a14b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 620 additions and 349 deletions
Download patch file Download diff file Expand all files Collapse all files

223
app/javascript/styles/mastodon/components.scss
View file

@ -106,17 +106,17 @@
}
&.button-secondary {
color: $ui-button-secondary-color;
color: $highlight-text-color;
background: transparent;
padding: 6px 17px;
border: 1px solid $ui-button-secondary-border-color;
border: 1px solid $highlight-text-color;
&:active,
&:focus,
&:hover {
border-color: $ui-button-secondary-focus-background-color;
color: $ui-button-secondary-focus-color;
background-color: $ui-button-secondary-focus-background-color;
border-color: lighten($highlight-text-color, 4%);
color: lighten($highlight-text-color, 4%);
background-color: transparent;
text-decoration: none;
}
@ -5480,6 +5480,10 @@ a.status-card {
pointer-events: auto;
user-select: text;
display: flex;
@media screen and (max-width: $no-gap-breakpoint) {
margin-top: auto;
}
}
.video-modal .video-player {
@ -5811,6 +5815,145 @@ a.status-card {
margin-inline-start: 10px;
}
.safety-action-modal {
width: 600px;
flex-direction: column;
&__top,
&__bottom {
display: flex;
gap: 8px;
padding: 24px;
flex-direction: column;
background: var(--modal-background-color);
backdrop-filter: var(--background-filter);
border: 1px solid var(--modal-border-color);
}
&__top {
border-radius: 16px 16px 0 0;
border-bottom: 0;
gap: 16px;
}
&__bottom {
border-radius: 0 0 16px 16px;
border-top: 0;
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 0;
border-bottom: 0;
padding-bottom: 32px;
}
}
&__header {
display: flex;
gap: 16px;
align-items: center;
font-size: 14px;
line-height: 20px;
color: $darker-text-color;
&__icon {
border-radius: 64px;
background: $ui-highlight-color;
color: $white;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
.icon {
width: 24px;
height: 24px;
}
}
h1 {
font-size: 22px;
line-height: 28px;
color: $primary-text-color;
}
}
&__bullet-points {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 16px;
line-height: 24px;
& > div {
display: flex;
gap: 16px;
align-items: center;
}
&__icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
.icon {
width: 24px;
height: 24px;
}
}
}
&__field-group {
display: flex;
flex-direction: column;
label {
display: flex;
gap: 16px;
align-items: center;
font-size: 16px;
line-height: 24px;
height: 32px;
padding: 0 12px;
}
}
&__bottom {
padding-top: 0;
&__collapsible {
display: none;
flex-direction: column;
gap: 16px;
}
&.active {
background: var(--modal-background-variant-color);
padding-top: 24px;
.safety-action-modal__bottom__collapsible {
display: flex;
}
}
}
&__actions {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
.link-button {
padding: 10px 12px;
font-weight: 600;
}
}
}
.boost-modal,
.confirmation-modal,
.report-modal,
@ -7113,7 +7256,8 @@ a.status-card {
display: flex;
}
.radio-button {
.radio-button,
.check-box {
font-size: 14px;
position: relative;
display: inline-flex;
@ -7132,17 +7276,19 @@ a.status-card {
}
&__input {
display: block;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 2px solid $secondary-text-color;
box-sizing: border-box;
width: 18px;
height: 18px;
width: 20px;
height: 20px;
flex: 0 0 auto;
border-radius: 50%;
&.checked {
border-color: $secondary-text-color;
border-color: $ui-highlight-color;
&::before {
position: absolute;
@ -7151,9 +7297,31 @@ a.status-card {
content: '';
display: block;
border-radius: 50%;
width: 10px;
height: 10px;
background: $secondary-text-color;
width: 12px;
height: 12px;
background: $ui-highlight-color;
}
}
.icon {
width: 18px;
height: 18px;
}
}
}
.check-box {
&__input {
width: 18px;
height: 18px;
border-radius: 2px;
&.checked {
background: $ui-highlight-color;
color: $white;
&::before {
display: none;
}
}
}
@ -8632,22 +8800,36 @@ noscript {
}
}
.safety-action-modal,
.interaction-modal {
max-width: 90vw;
width: 600px;
background: var(--modal-background-color);
border: 1px solid var(--modal-border-color);
border-radius: 8px;
}
.interaction-modal {
overflow: visible;
position: relative;
display: block;
padding: 40px;
border-radius: 16px;
background: var(--modal-background-color);
backdrop-filter: var(--background-filter);
border: 1px solid var(--modal-border-color);
padding: 24px;
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 16px 16px 0 0;
border-bottom: 0;
padding-bottom: 32px;
}
h3 {
font-size: 22px;
line-height: 33px;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
p {
@ -8668,7 +8850,9 @@ noscript {
&__icon {
color: $highlight-text-color;
margin: 0 5px;
display: flex;
align-items: center;
justify-content: center;
}
&__lead {
@ -8701,6 +8885,7 @@ noscript {
border: 0;
padding: 15px - 4px 15px - 6px;
flex: 1 1 auto;
min-width: 0;
&::placeholder {
color: lighten($darker-text-color, 4%);

11
app/javascript/styles/mastodon/variables.scss
View file

@ -46,10 +46,10 @@ $ui-button-focus-background-color: $blurple-600 !default;
$ui-button-focus-outline-color: $blurple-400 !default;
$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
$ui-button-secondary-color: $grey-100 !default;
$ui-button-secondary-border-color: $grey-100 !default;
$ui-button-secondary-focus-background-color: $grey-600 !default;
$ui-button-secondary-focus-color: $white !default;
$ui-button-secondary-color: $blurple-500 !default;
$ui-button-secondary-border-color: $blurple-500 !default;
$ui-button-secondary-focus-border-color: $blurple-300 !default;
$ui-button-secondary-focus-color: $blurple-300 !default;
$ui-button-tertiary-color: $blurple-300 !default;
$ui-button-tertiary-border-color: $blurple-300 !default;
@ -98,7 +98,8 @@ $font-monospace: 'mastodon-font-monospace' !default;
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
--modal-background-color: #{darken($ui-base-color, 4%)};
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
--modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
--modal-border-color: #{lighten($ui-base-color, 4%)};
--background-border-color: #{lighten($ui-base-color, 4%)};
--background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);