Merge pull request #2205 from pixelfed/staging

Update PostComponent, hide edit button after 24 hours. Fixes #2188

CHANGELOG.md

@@ -39,6 +39,7 @@
 - Updated Inbox, move expensive HTTP Signature validation to job queue ([f2ae45e5a](https://github.com/pixelfed/pixelfed/commit/f2ae45e5a))
 - Updated MomentUI, fix bugs and improve UI ([90b89cb8](https://github.com/pixelfed/pixelfed/commit/90b89cb8))
 - Updated PostComponent, improve embed model. Fixes ([#2189](https://github.com/pixelfed/pixelfed/issues/2189)) ([b12e504e](https://github.com/pixelfed/pixelfed/commit/b12e504e))
+- Updated PostComponent, hide edit button after 24 hours. Fixes [#2188](https://github.com/pixelfed/pixelfed/issues/2188)) ([a1fee6a2](https://github.com/pixelfed/pixelfed/commit/a1fee6a2))
 
 
 ## [v0.10.9 (2020-04-17)](https://github.com/pixelfed/pixelfed/compare/v0.10.8...v0.10.9)

public/mix-manifest.json

@@ -18,14 +18,14 @@
     "/js/hashtag.js": "/js/hashtag.js?id=e6b41cab117cb03c7d2a",
     "/js/loops.js": "/js/loops.js?id=ac610897b12207c829b9",
     "/js/mode-dot.js": "/js/mode-dot.js?id=1225a9aac7a93d5d232f",
-    "/js/profile.js": "/js/profile.js?id=106eaa081ed38eaefd87",
+    "/js/profile.js": "/js/profile.js?id=e79efae4ec8262cb3503",
     "/js/profile-directory.js": "/js/profile-directory.js?id=611af669221ad8be3068",
     "/js/quill.js": "/js/quill.js?id=00f2dca2463b3c9d3920",
     "/js/rempos.js": "/js/rempos.js?id=219479dc2456e6b5959e",
     "/js/rempro.js": "/js/rempro.js?id=750317b23c9c1b3b7ede",
     "/js/search.js": "/js/search.js?id=2d76d7d28de3b4691bc7",
-    "/js/status.js": "/js/status.js?id=c1b099f001f24d81c417",
+    "/js/status.js": "/js/status.js?id=1739558fb9826962d544",
     "/js/story-compose.js": "/js/story-compose.js?id=18ed9fcdfed5eb63d113",
     "/js/theme-monokai.js": "/js/theme-monokai.js?id=3b6e62701f12b717cc5c",
-    "/js/timeline.js": "/js/timeline.js?id=8228cee82c077c873e5f"
+    "/js/timeline.js": "/js/timeline.js?id=cd2a51d2743fcf8d8afc"
 }

resources/assets/js/components/PostComponent.vue

@@ -42,7 +42,7 @@
                   </div>
                   <div v-if="ownerOrAdmin()">
                     <a class="dropdown-item font-weight-bold" href="#" v-on:click.prevent="toggleCommentVisibility">{{ showComments ? 'Disable' : 'Enable'}} Comments</a>
-                    <a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
+                    <a v-if="canEdit" class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
                     <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost(status)">Delete</a>
                   </div>
                 </div>
@@ -108,7 +108,7 @@
                           </span>
                           <span v-if="ownerOrAdmin()">
                             <a class="dropdown-item font-weight-bold" href="#" v-on:click.prevent="toggleCommentVisibility">{{ showComments ? 'Disable' : 'Enable'}} Comments</a>
-                            <a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
+                            <a v-if="canEdit" class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
                             <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost">Delete</a>
                           </span>
                         </div>
@@ -675,7 +675,8 @@ export default {
             ctxEmbedShowCaption: true,
             ctxEmbedShowLikes: false,
             ctxEmbedCompactMode: false,
-            layout: this.profileLayout
+            layout: this.profileLayout,
+            canEdit: false
           }
     },
     watch: {
@@ -773,6 +774,13 @@ export default {
                   self.showComments = true;
                   this.fetchComments();
                 }
+                if(this.ownerOrAdmin()) {
+                  let od = new Date(this.status.created_at).getTime() + (1 * 24 * 60 * 60 * 1000);
+                  let now = new Date().getTime();
+                  if(od > now) {
+                    this.canEdit = true;
+                  }
+                }
                 this.loaded = true;
             }).catch(error => {
               swal('Oops!', 'An error occured, please try refreshing the page.', 'error');

resources/assets/js/components/Profile.vue

@@ -518,7 +518,7 @@
 	size="md"
 	body-class="p-2 rounded">
 	<div>
-		<textarea class="form-control disabled" rows="1" style="border: 1px solid #efefef; font-size: 14px; line-height: 12px; height: 37px; margin: 0 0 7px; resize: none; white-space: nowrap;" v-model="ctxEmbedPayload"></textarea>
+		<textarea class="form-control disabled text-monospace" rows="6" style="overflow-y:hidden;border: 1px solid #efefef; font-size: 12px; line-height: 18px; margin: 0 0 7px;resize:none;" v-model="ctxEmbedPayload" disabled=""></textarea>
 		<hr>
 		<button :class="copiedEmbed ? 'btn btn-primary btn-block btn-sm py-1 font-weight-bold disabed': 'btn btn-primary btn-block btn-sm py-1 font-weight-bold'" @click="ctxCopyEmbed" :disabled="copiedEmbed">{{copiedEmbed ? 'Embed Code Copied!' : 'Copy Embed Code'}}</button>
 		<p class="mb-0 px-2 small text-muted">By using this embed, you agree to our <a href="/site/terms">Terms of Use</a></p>
@@ -1215,7 +1215,8 @@
 			},
 
 			showEmbedProfileModal() {
-				this.ctxEmbedPayload = window.App.util.embed.profile(this.profile.url)
+				this.ctxEmbedPayload = window.App.util.embed.profile(this.profile.url);
+				this.$refs.visitorContextMenu.hide();
 				this.$refs.embedModal.show();
 			},
 

resources/assets/js/components/Timeline.vue

@@ -430,7 +430,29 @@
 	size="md"
 	body-class="p-2 rounded">
 	<div>
-		<textarea class="form-control disabled" rows="1" style="border: 1px solid #efefef; font-size: 14px; line-height: 12px; height: 37px; margin: 0 0 7px; resize: none; white-space: nowrap;" v-model="ctxEmbedPayload"></textarea>
+		<div class="form-group">
+			<textarea class="form-control disabled text-monospace" rows="8" style="overflow-y:hidden;border: 1px solid #efefef; font-size: 12px; line-height: 18px; margin: 0 0 7px;resize:none;" v-model="ctxEmbedPayload" disabled=""></textarea>
+		</div>
+		<div class="form-group pl-2 d-flex justify-content-center">
+			<div class="form-check mr-3">
+				<input class="form-check-input" type="checkbox" v-model="ctxEmbedShowCaption" :disabled="ctxEmbedCompactMode == true">
+				<label class="form-check-label font-weight-light">
+					Show Caption
+				</label>
+			</div>
+			<div class="form-check mr-3">
+				<input class="form-check-input" type="checkbox" v-model="ctxEmbedShowLikes" :disabled="ctxEmbedCompactMode == true">
+				<label class="form-check-label font-weight-light">
+					Show Likes
+				</label>
+			</div>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" v-model="ctxEmbedCompactMode">
+				<label class="form-check-label font-weight-light">
+					Compact Mode
+				</label>
+			</div>
+		</div>
 		<hr>
 		<button :class="copiedEmbed ? 'btn btn-primary btn-block btn-sm py-1 font-weight-bold disabed': 'btn btn-primary btn-block btn-sm py-1 font-weight-bold'" @click="ctxCopyEmbed" :disabled="copiedEmbed">{{copiedEmbed ? 'Embed Code Copied!' : 'Copy Embed Code'}}</button>
 		<p class="mb-0 px-2 small text-muted">By using this embed, you agree to our <a href="/site/terms">Terms of Use</a></p>
@@ -603,9 +625,35 @@
 				showTips: true,
 				userStory: false,
 				replySending: false,
+				ctxEmbedShowCaption: true,
+				ctxEmbedShowLikes: false,
+				ctxEmbedCompactMode: false,
+			}
+		},
+		watch: {
+			ctxEmbedShowCaption: function (n,o) {
+				if(n == true) {
+					this.ctxEmbedCompactMode = false;
+				}
+				let mode = this.ctxEmbedCompactMode ? 'compact' : 'full';
+				this.ctxEmbedPayload = window.App.util.embed.post(this.ctxMenuStatus.url, this.ctxEmbedShowCaption, this.ctxEmbedShowLikes, mode);
+			},
+			ctxEmbedShowLikes: function (n,o) {
+				if(n == true) {
+					this.ctxEmbedCompactMode = false;
+				}
+				let mode = this.ctxEmbedCompactMode ? 'compact' : 'full';
+				this.ctxEmbedPayload = window.App.util.embed.post(this.ctxMenuStatus.url, this.ctxEmbedShowCaption, this.ctxEmbedShowLikes, mode);
+			},
+			ctxEmbedCompactMode: function (n,o) {
+				if(n == true) {
+					this.ctxEmbedShowCaption = false;
+					this.ctxEmbedShowLikes = false;
+				}
+				let mode = this.ctxEmbedCompactMode ? 'compact' : 'full';
+				this.ctxEmbedPayload = window.App.util.embed.post(this.ctxMenuStatus.url, this.ctxEmbedShowCaption, this.ctxEmbedShowLikes, mode);
 			}
 		},
-
 		beforeMount() {
 			this.fetchProfile();
 			this.fetchTimelineApi();
@@ -1349,6 +1397,9 @@
 
 			ctxCopyEmbed() {
 				navigator.clipboard.writeText(this.ctxEmbedPayload);
+				this.ctxEmbedShowCaption = true;
+				this.ctxEmbedShowLikes = false;
+				this.ctxEmbedCompactMode = false;
 				this.$refs.ctxEmbedModal.hide();
 			},