index.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/layout}">
  3. <head>
  4. <title>Inbox</title>
  5. </head>
  6. <body>
  7. <div layout:fragment="content">
  8. <script type="text/javascript" src="/js/messages-index.js" defer></script>
  9. <div class="ui container" id="MessagesPage">
  10. <br />
  11. <h1 class="ui celled header">
  12. Messages :: Inbox
  13. <button id="NewMessageButton" href="/messages/create/" class="ui green button right floated">
  14. <i class="envelope outline icon"></i>New Message
  15. </button>
  16. </h1>
  17. <br />
  18. <table class="ui very basic compact celled table">
  19. <thead>
  20. <th></th>
  21. <th>Message</th>
  22. <th>From</th>
  23. </thead>
  24. <tr v-for="message in messages">
  25. <td class="collapsing">
  26. <i :class="{ 'green' : message.delivered == false}" class="envelope icon"></i>
  27. </td>
  28. <td>
  29. <a v-bind:href="'/messages/'+ message.id">{{ message.title }}</a>
  30. </td>
  31. <td class="collapsing">
  32. <img class="ui avatar image" v-bind:src="'/image/' + message.sender.avatarId" />
  33. <span>{{ message.sender.username }}</span>
  34. </td>
  35. </tr>
  36. </table>
  37. </div>
  38. <!-- START new message modal -->
  39. <div class="ui modal" id="NewMessageModal">
  40. <i class="close icon"></i>
  41. <div class="header">
  42. New Message
  43. </div>
  44. <div class="ui form content">
  45. <div class="field">
  46. <div class="ui search">
  47. <div class="ui icon input">
  48. <input id="NewMessageUsername" class="prompt" type="text" placeholder="Search Username..." />
  49. <i class="user icon"></i>
  50. </div>
  51. <div class="results"></div>
  52. </div>
  53. </div>
  54. <div class="field">
  55. <label>Title</label>
  56. <div class="ui input">
  57. <input minlength="3" maxlength="128" id="NewMessageTitle" type="text" placeholder="Title" />
  58. </div>
  59. </div>
  60. <div class="field">
  61. <label>Message</label>
  62. <textarea id="NewMessageContent" placeholder="Message Content" minlength="3" maxlength="128"></textarea>
  63. </div>
  64. </div>
  65. <div class="actions">
  66. <div class="ui cancel button">Cancel</div>
  67. <div class="ui green button" id="SendNewMessageButton">Send Message</div>
  68. </div>
  69. </div>
  70. <!-- END new message modal -->
  71. </div>
  72. </body>
  73. </html>