add sensitive media toggle
This commit is contained in:
Nolan Lawson
parent
789b5f2f47
commit
c08e8f2d4d
|
|
@ -1,4 +1,5 @@
|
|||
<div class="status-media" style="grid-template-columns: repeat(auto-fit, minmax({{minMediaWidth}}px, 1fr));">
|
||||
<div class="status-media {{sensitive ? 'status-media-is-sensitive' : ''}}"
|
||||
style="grid-template-columns: repeat(auto-fit, minmax({{minMediaWidth}}px, 1fr));" >
|
||||
{{#each mediaAttachments as media}}
|
||||
<div class="status-media-container {{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}">
|
||||
{{#if media.type === 'video'}}
|
||||
|
|
@ -46,6 +47,11 @@
|
|||
justify-items: center;
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.status-media.status-media-is-sensitive {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.status-media-container {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
{{/if}}
|
||||
{{#if status.spoiler_text}}
|
||||
<div class="status-spoiler-button">
|
||||
<button type="button" on:click="onClickSpoilerButton()">Show more</button>
|
||||
<button type="button" on:click="onClickSpoilerButton()">{{spoilerShown ? 'Show less' : 'Show more'}}</button>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if !status.spoiler_text || spoilerShown}}
|
||||
|
|
@ -36,8 +36,33 @@
|
|||
{{{status.content}}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if originalMediaAttachments && originalMediaAttachments.length}}
|
||||
{{#if status.sensitive}}
|
||||
<button type="button"
|
||||
class="status-sensitive-media-button {{sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden'}}"
|
||||
aria-label="{{sensitiveShown ? 'Hide sensitive media' : 'Show sensitive media'}}"
|
||||
on:click="onClickSensitiveMediaButton()" >
|
||||
{{#if !sensitiveShown}}
|
||||
<div class="status-sensitive-media-warning">
|
||||
<span>
|
||||
Sensitive content. Click to show.
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="svg-wrapper">
|
||||
<svg>
|
||||
<use xlink:href="{{sensitiveShown ? '#fa-eye-slash' : '#fa-eye'}}" />
|
||||
</svg>
|
||||
</div>
|
||||
{{#if sensitiveShown}}
|
||||
<Media mediaAttachments="{{originalMediaAttachments}}" sensitive="{{status.sensitive}}"/>
|
||||
{{/if}}
|
||||
</button>
|
||||
{{else}}
|
||||
<Media mediaAttachments="{{originalMediaAttachments}}" sensitive="{{status.sensitive}}"/>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
<Toolbar :status />
|
||||
<Media mediaAttachments="{{originalMediaAttachments}}" />
|
||||
</article>
|
||||
|
||||
<style>
|
||||
|
|
@ -52,8 +77,8 @@
|
|||
"status-sidebar status-spoiler"
|
||||
"status-sidebar status-spoiler-button"
|
||||
"status-sidebar status-content"
|
||||
".............. status-toolbar"
|
||||
"status-media status-media";
|
||||
"status-media status-media"
|
||||
".............. status-toolbar";
|
||||
grid-template-columns: 58px 1fr;
|
||||
border-bottom: 1px solid var(--main-border);
|
||||
/* will-change: transform; */ /* TODO: is this necessary? */
|
||||
|
|
@ -165,7 +190,66 @@
|
|||
.status-boosted svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: var(--deemphasized-text-color)
|
||||
}
|
||||
|
||||
.status-sensitive-media-button {
|
||||
grid-area: status-media;
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
fill: var(--mask-svg-fill);
|
||||
}
|
||||
|
||||
.status-sensitive-media-button.status-sensitive-media-hidden {
|
||||
width: 100%;
|
||||
margin: 10px auto;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.status-sensitive-media-button .status-sensitive-media-warning {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--deemphasized-text-color);
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.status-sensitive-media-button .svg-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
z-index: 40;
|
||||
pointer-events: none;
|
||||
background: var(--mask-bg);
|
||||
}
|
||||
.status-sensitive-media-button.status-sensitive-media-shown .svg-wrapper {
|
||||
background: none;
|
||||
}
|
||||
.status-sensitive-media-button svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: var(--mask-svg-fill);
|
||||
border-radius: 2px;
|
||||
background: var(--mask-opaque-bg);
|
||||
margin: 1px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
.status-sensitive-media-button.status-sensitive-media-hidden svg {
|
||||
fill: var(--deemphasized-text-color);
|
||||
background: var(--mask-opaque-bg);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
|
@ -192,12 +276,16 @@
|
|||
},
|
||||
originalStatus: (status) => status.reblog ? status.reblog : status,
|
||||
originalAccount: (originalStatus) => originalStatus.account,
|
||||
originalMediaAttachments: (originalStatus) => originalStatus.media_attachments,
|
||||
originalMediaAttachments: (originalStatus) => originalStatus.media_attachments
|
||||
},
|
||||
methods: {
|
||||
onClickSpoilerButton() {
|
||||
this.set({spoilerShown: !this.get('spoilerShown')})
|
||||
this.fire('recalculateHeight')
|
||||
},
|
||||
onClickSensitiveMediaButton() {
|
||||
this.set({sensitiveShown: !this.get('sensitiveShown')})
|
||||
this.fire('recalculateHeight')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<use xlink:href="#fa-star" />
|
||||
</svg>
|
||||
</button>
|
||||
<button aria-label="More" type="button">
|
||||
<button aria-label="Show more actions" type="button">
|
||||
<svg>
|
||||
<use xlink:href="#fa-ellipsis-h" />
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -110,6 +110,17 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
|
|||
<path d="M896 128q209 0 385.5 103T1561 510.5 1664 896t-103 385.5-279.5 279.5T896 1664t-385.5-103T231 1281.5 128 896t103-385.5T510.5 231 896 128zm384 823q32-18 32-55t-32-55L736 521q-31-19-64-1-32 19-32 56v640q0 37 32 56 16 8 32 8 17 0 32-9z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="fa-eye" viewBox="0 0 1792 1792">
|
||||
<title>Show Sensitive Content</title>
|
||||
<path d="M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5T896 1280t-316.5-131.5T448 832q0-121 61-225-229 117-381 353 133 205 333.5 326.5T896 1408t434.5-121.5T1664 960zM944 576q0-20-14-34t-34-14q-125 0-214.5 89.5T592 832q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5T896 1536t-499.5-139T20 1029Q0 994 0 960t20-69q140-229 376.5-368T896 384t499.5 139T1772 891q20 35 20 69z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="fa-eye-slash" viewBox="0 0 1792 1792">
|
||||
<title>Hide Sensitive Content</title>
|
||||
<path d="M555 1335l78-141q-87-63-136-159t-49-203q0-121 61-225-229 117-381 353 167 258 427 375zm389-759q0-20-14-34t-34-14q-125 0-214.5 89.5T592 832q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm363-191q0 7-1 9-106 189-316 567t-315 566l-49 89q-10 16-28 16-12 0-134-70-16-10-16-28 0-12 44-87-143-65-263.5-173T20 1029Q0 998 0 960t20-69q153-235 380-371t496-136q89 0 180 17l54-97q10-16 28-16 5 0 18 6t31 15.5 33 18.5 31.5 18.5T1291 358q16 10 16 27zm37 447q0 139-79 253.5T1056 1250l280-502q8 45 8 84zm448 128q0 35-20 69-39 64-109 145-150 172-347.5 267T896 1536l74-132q212-18 392.5-137T1664 960q-115-179-282-294l63-112q95 64 182.5 153T1772 891q20 34 20 69z"/>
|
||||
</symbol>
|
||||
|
||||
|
||||
|
||||
</svg>
|
||||
<!-- The application will be rendered inside this element,
|
||||
|
|
|
|||
Loading…
Reference in New Issue