You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

393 lines
7.0 KiB

Web Push Notifications (#3243) * feat: Register push subscription * feat: Notify when mentioned * feat: Boost, favourite, reply, follow, follow request * feat: Notification interaction * feat: Handle change of public key * feat: Unsubscribe if things go wrong * feat: Do not send normal notifications if push is enabled * feat: Focus client if open * refactor: Move push logic to WebPushSubscription * feat: Better title and body * feat: Localize messages * chore: Fix lint errors * feat: Settings * refactor: Lazy load * fix: Check if push settings exist * feat: Device-based preferences * refactor: Simplify logic * refactor: Pull request feedback * refactor: Pull request feedback * refactor: Create /api/web/push_subscriptions endpoint * feat: Spec PushSubscriptionController * refactor: WebPushSubscription => Web::PushSubscription * feat: Spec Web::PushSubscription * feat: Display first media attachment * feat: Support direction * fix: Stuff broken while rebasing * refactor: Integration with session activations * refactor: Cleanup * refactor: Simplify implementation * feat: Set VAPID keys via environment * chore: Comments * fix: Crash when no alerts * fix: Set VAPID keys in testing environment * fix: Follow link * feat: Notification actions * fix: Delete previous subscription * chore: Temporary logs * refactor: Move migration to a later date * fix: Fetch the correct session activation and misc bugs * refactor: Move migration to a later date * fix: Remove follow request (no notifications) * feat: Send administrator contact to push service * feat: Set time-to-live * fix: Do not show sensitive images * fix: Reducer crash in error handling * feat: Add badge * chore: Fix lint error * fix: Checkbox label overlap * fix: Check for payload support * fix: Rename action "type" (crash in latest Chrome) * feat: Action to expand notification * fix: Lint errors * fix: Unescape notification body * fix: Do not allow boosting if the status is hidden * feat: Add VAPID keys to the production sample environment * fix: Strip HTML tags from status * refactor: Better error messages * refactor: Handle browser not implementing the VAPID protocol (Samsung Internet) * fix: Error when target_status is nil * fix: Handle lack of image * fix: Delete reference to invalid subscriptions * feat: Better error handling * fix: Unescape HTML characters after tags are striped * refactor: Simpify code * fix: Modify to work with #4091 * Sort strings alphabetically * i18n: Updated Polish translation it annoys me that it's not fully localized :P * refactor: Use current_session in PushSubscriptionController * fix: Rebase mistake * fix: Set cacheName to mastodon * refactor: Pull request feedback * refactor: Remove logging statements * chore(yarn): Fix conflicts with master * chore(yarn): Copy latest from master * chore(yarn): Readd offline-plugin * refactor: Use save! and update! * refactor: Send notifications async * fix: Allow retry when push fails * fix: Save track for failed pushes * fix: Minify sw.js * fix: Remove account_id from fabricator
7 years ago
  1. body.rtl {
  2. direction: rtl;
  3. .column-header > button {
  4. text-align: right;
  5. padding-left: 0;
  6. padding-right: 15px;
  7. }
  8. .landing-page__logo {
  9. margin-right: 0;
  10. margin-left: 20px;
  11. }
  12. .landing-page .features-list .features-list__row .visual {
  13. margin-left: 0;
  14. margin-right: 15px;
  15. }
  16. .column-link__icon,
  17. .column-header__icon {
  18. margin-right: 0;
  19. margin-left: 5px;
  20. }
  21. .compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
  22. margin-right: 0;
  23. margin-left: 4px;
  24. }
  25. .navigation-bar__profile {
  26. margin-left: 0;
  27. margin-right: 8px;
  28. }
  29. .search__input {
  30. padding-right: 10px;
  31. padding-left: 30px;
  32. }
  33. .search__icon .fa {
  34. right: auto;
  35. left: 10px;
  36. }
  37. .column-header__buttons {
  38. left: 0;
  39. right: auto;
  40. margin-left: -15px;
  41. margin-right: 0;
  42. }
  43. .column-inline-form .icon-button {
  44. margin-left: 0;
  45. margin-right: 5px;
  46. }
  47. .column-header__links .text-btn {
  48. margin-left: 10px;
  49. margin-right: 0;
  50. }
  51. .account__avatar-wrapper {
  52. float: right;
  53. }
  54. .column-header__back-button {
  55. padding-left: 5px;
  56. padding-right: 0;
  57. }
  58. .column-header__setting-arrows {
  59. float: left;
  60. }
  61. .setting-toggle__label {
  62. margin-left: 0;
  63. margin-right: 8px;
  64. }
  65. .setting-meta__label {
  66. float: left;
  67. }
  68. .status__avatar {
  69. left: auto;
  70. right: 10px;
  71. }
  72. .status,
  73. .activity-stream .status.light {
  74. padding-left: 10px;
  75. padding-right: 68px;
  76. }
  77. .status__info .status__display-name,
  78. .activity-stream .status.light .status__display-name {
  79. padding-left: 25px;
  80. padding-right: 0;
  81. }
  82. .activity-stream .pre-header {
  83. padding-right: 68px;
  84. padding-left: 0;
  85. }
  86. .status__prepend {
  87. margin-left: 0;
  88. margin-right: 68px;
  89. }
  90. .status__prepend-icon-wrapper {
  91. left: auto;
  92. right: -26px;
  93. }
  94. .activity-stream .pre-header .pre-header__icon {
  95. left: auto;
  96. right: 42px;
  97. }
  98. .account__avatar-overlay-overlay {
  99. right: auto;
  100. left: 0;
  101. }
  102. .column-back-button--slim-button {
  103. right: auto;
  104. left: 0;
  105. }
  106. .status__relative-time,
  107. .activity-stream .status.light .status__header .status__meta {
  108. float: left;
  109. }
  110. .activity-stream .detailed-status.light .detailed-status__display-name > div {
  111. float: right;
  112. margin-right: 0;
  113. margin-left: 10px;
  114. }
  115. .activity-stream .detailed-status.light .detailed-status__meta span > span {
  116. margin-left: 0;
  117. margin-right: 6px;
  118. }
  119. .status__action-bar {
  120. &__counter {
  121. margin-right: 0;
  122. margin-left: 11px;
  123. .status__action-bar-button {
  124. margin-right: 0;
  125. margin-left: 4px;
  126. }
  127. }
  128. }
  129. .status__action-bar-button {
  130. float: right;
  131. margin-right: 0;
  132. margin-left: 18px;
  133. }
  134. .status__action-bar-dropdown {
  135. float: right;
  136. }
  137. .privacy-dropdown__dropdown {
  138. margin-left: 0;
  139. margin-right: 40px;
  140. }
  141. .privacy-dropdown__option__icon {
  142. margin-left: 10px;
  143. margin-right: 0;
  144. }
  145. .detailed-status__display-avatar {
  146. margin-right: 0;
  147. margin-left: 10px;
  148. float: right;
  149. }
  150. .detailed-status__favorites,
  151. .detailed-status__reblogs {
  152. margin-left: 0;
  153. margin-right: 6px;
  154. }
  155. .fa-ul {
  156. margin-left: 0;
  157. margin-left: 2.14285714em;
  158. }
  159. .fa-li {
  160. left: auto;
  161. right: -2.14285714em;
  162. }
  163. .admin-wrapper {
  164. direction: rtl;
  165. }
  166. .admin-wrapper .sidebar ul a i.fa,
  167. a.table-action-link i.fa {
  168. margin-right: 0;
  169. margin-left: 5px;
  170. }
  171. .simple_form .check_boxes .checkbox label {
  172. padding-left: 0;
  173. padding-right: 25px;
  174. }
  175. .simple_form .input.with_label.boolean label.checkbox {
  176. padding-left: 25px;
  177. padding-right: 0;
  178. }
  179. .simple_form .check_boxes .checkbox input[type="checkbox"],
  180. .simple_form .input.boolean input[type="checkbox"] {
  181. left: auto;
  182. right: 0;
  183. }
  184. .simple_form .input.radio_buttons .radio {
  185. left: auto;
  186. right: 0;
  187. }
  188. .simple_form .input.radio_buttons .radio > label {
  189. padding-right: 28px;
  190. padding-left: 0;
  191. }
  192. .simple_form .input-with-append .input input {
  193. padding-left: 142px;
  194. padding-right: 0;
  195. }
  196. .simple_form .input.boolean label.checkbox {
  197. left: auto;
  198. right: 0;
  199. }
  200. .simple_form .input.boolean .label_input,
  201. .simple_form .input.boolean .hint {
  202. padding-left: 0;
  203. padding-right: 28px;
  204. }
  205. .simple_form .label_input__append {
  206. right: auto;
  207. left: 3px;
  208. &::after {
  209. right: auto;
  210. left: 0;
  211. background-image: linear-gradient(to left, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
  212. }
  213. }
  214. .simple_form select {
  215. background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat left 8px center / auto 16px;
  216. }
  217. .table th,
  218. .table td {
  219. text-align: right;
  220. }
  221. .filters .filter-subset {
  222. margin-right: 0;
  223. margin-left: 45px;
  224. }
  225. .landing-page .header-wrapper .mascot {
  226. right: 60px;
  227. left: auto;
  228. }
  229. .landing-page__call-to-action .row__information-board {
  230. direction: rtl;
  231. }
  232. .landing-page .header .hero .floats .float-1 {
  233. left: -120px;
  234. right: auto;
  235. }
  236. .landing-page .header .hero .floats .float-2 {
  237. left: 210px;
  238. right: auto;
  239. }
  240. .landing-page .header .hero .floats .float-3 {
  241. left: 110px;
  242. right: auto;
  243. }
  244. .landing-page .header .links .brand img {
  245. left: 0;
  246. }
  247. .landing-page .fa-external-link {
  248. padding-right: 5px;
  249. padding-left: 0 !important;
  250. }
  251. .landing-page .features #mastodon-timeline {
  252. margin-right: 0;
  253. margin-left: 30px;
  254. }
  255. @media screen and (min-width: 631px) {
  256. .column,
  257. .drawer {
  258. padding-left: 5px;
  259. padding-right: 5px;
  260. &:first-child {
  261. padding-left: 5px;
  262. padding-right: 10px;
  263. }
  264. }
  265. .columns-area > div {
  266. .column,
  267. .drawer {
  268. padding-left: 5px;
  269. padding-right: 5px;
  270. }
  271. }
  272. }
  273. .public-layout {
  274. .header {
  275. .nav-button {
  276. margin-left: 8px;
  277. margin-right: 0;
  278. }
  279. }
  280. .public-account-header__tabs {
  281. margin-left: 0;
  282. margin-right: 20px;
  283. }
  284. }
  285. .landing-page__information {
  286. .account__display-name {
  287. margin-right: 0;
  288. margin-left: 5px;
  289. }
  290. .account__avatar-wrapper {
  291. margin-left: 12px;
  292. margin-right: 0;
  293. }
  294. }
  295. .card__bar .display-name {
  296. margin-left: 0;
  297. margin-right: 15px;
  298. text-align: right;
  299. }
  300. .fa-chevron-left::before {
  301. content: "\F054";
  302. }
  303. .fa-chevron-right::before {
  304. content: "\F053";
  305. }
  306. .column-back-button__icon {
  307. margin-right: 0;
  308. margin-left: 5px;
  309. }
  310. .column-header__setting-arrows .column-header__setting-btn:last-child {
  311. padding-left: 0;
  312. padding-right: 10px;
  313. }
  314. .simple_form .input.radio_buttons .radio > label input {
  315. left: auto;
  316. right: 0;
  317. }
  318. }