announcements should be edit capable

[alan-mj-lin]

@hchiam so right now lets say we have massive announcements at the top row. Is there a something we can do to make it so that it can just be edited, instead of having to delete everything and re-enterring all the previous information?

[alan-mj-lin]

my first thought is that we should be able to erxtract the html of a specific existing announcement and edit that way

[alan-mj-lin]

@hchiam all i did was make content editable in "addBlock" function so users can edit on screen. Let me know if you think there could be a more elegant solution

[hchiam]

@alan-mj-lin LGTM. It's an interesting quick fix. I didn't know about the contenteditable attribute before.

Possible reasons to instead try to store state and update the projection:

• if you want to keep your mouse on the "admin side", without the mouse ever showing on the wall projection (unless you turn off the projector, or project a different/3rd tab)
• if you're projecting a different/3rd tab, it might not show what you edited (so you'd have to resort to projecting the one you directly edited)

Neither reason is very compelling for this project though. I like your solution.

[alan-mj-lin]

@hchiam ok so we're good with this solution? I mean I further implement a feature that updates all the projection with the newly edited announcements by serving a page just for that purpose.

[hchiam]

@alan-mj-lin I think it's good already. Just test it out IRL to get a feel for how (in)convenient it really is. If you have other features to work on, this can wait.

[alan-mj-lin]

@hchiam I made a separate page for announcement edits so that people don't have to edit directly from the projection screen. Let me know what you think and feel free to suggest improvements.

[hchiam]

@alan-mj-lin Nice. I think there should be an icon to tell the user that they can edit the announcements. Maybe a padlock that's locked/unlocked.

[hchiam]

like this:

<i class="lock icon"></i>
<i class="lock open icon"></i>

$('.lock.icon').show();
$('.lock.open.icon').hide();

$('#edit').click(function() {
  $('.lock.icon').toggle();
  $('.lock.open.icon').toggle();
});

[alan-mj-lin]

feel free to work it in

[hchiam]

Try it out. Subtle, but I think helpful.

[alan-mj-lin]

@hchiam can you make it so that: if locked -> contenteditable = false if unlocked -> contenteditable = true ??

[hchiam]

@alan-mj-lin i simplified it so that the edit button only does one thing. Update locks, Edit unlocks.

[alan-mj-lin]

@hchiam great work man

[alan-mj-lin]

closing

[alan-mj-lin]

@hchiam i mad some changes for appearances sake. Right now, when you're in the edit window, hit the Esc key to bring up a list of actions. But just not quite sure how to make that instruction aware to users without interfering with the appearance right now.

[alan-mj-lin]

@hchiam Let me know what you think of what it is now and let me know if there's anything more we can do for this.

[hchiam]

@hchiam i mad some changes for appearances sake. Right now, when you're in the edit window, hit the Esc key to bring up a list of actions. But just not quite sure how to make that instruction aware to users without interfering with the appearance right now.

We can have a temporary "popup" that goes away after a few seconds. Not an actual alert(), just an HTML element that looks like a popup. setTimeout and a div with position: absolute; top: 50%; left: 50%; or position: fixed; top: 50%; left: 50%; I suggest 3 seconds so it's long enough that people can read it, but not so long that it's annoying.

Let me know if you want to take this on.

[alan-mj-lin]

I personally do not like the idea of a timed message. I prefer something that users can toggle on and off - I think that would make more sense. Perhaps it should start not displayed, and when users need help, they can bring it up.

[hchiam]

That idea sounds better. It's more ideal to show a message only when they need help. We'd have to detect when a user needs help, but I think that's actually feasible:

const userTriedToEditAnnouncement = userClickedText();
if (userTriedToEditAnnouncement && contentEditable == false) {
  showMessage();
}

[alan-mj-lin]

That code implies that help only shows when content is not editable - content is only not editable when Update is clicked meaning if a user needs help, this case will never happen haha.. I was really just thinking about adding a help button that displays a message. Much more simplistic.

[hchiam]

But when? Does the button continuously display, and then when you click on it, you get a message? And then would the button just say ? or How do i use this??

[alan-mj-lin]

No I was thinking it would just be an item in the sidebar, and people can bring it up whenever

[alan-mj-lin]

@hchiam I made some updates - theres a help button in the sidebar now, they can bring up the info message to see how to use it. I also made it so that the sidebar opens up when the mouse hangs to the left

[hchiam]

Nice. Only weird thing is when I click on the pencil icon, it doesn't trigger edit. Only the "Edit" text.

It's weird that the icon problem only happens for the pencil and not the other 2 icons.

[EDIT: I found the problem. There's an invisible div blocking mouse clicks.]

[hchiam]

@alan-mj-lin: Unless you want to clean up the code, I think this issue is ready to close.

[alan-mj-lin]

Ok awesome