Commit Graph

104 Commits

Author SHA1 Message Date
Stephen Burgess
cca41ea544 Replace inline styles with CSS classes (BEM) (#2338)
* fix(classnames): Status icon style classnames

Take out inline css and put into classnames for the following components: account, avatar, icon button, status action bar, notification.

* fix(status): Move styles from inline to classes for statuses

Move styles to classnames in components.scss for the following components:

display name
media gallery
status
status content
video player

* fix(classnames): Add classnames to rest of components

Take out inline styles and apply them to classnames in the sass for the following components:

button
column back button
slim column back button
collapsable column
dropdown menu
loading indicator
status list

* fix(classnames): Remove all non-dynamic inline styles

Components affected:

autosuggested
permalink
action bar
header
character counter
compose form
emoji dropdown
privacy dropdown
reply indicator
upload form
account auth
followers
getting started
column settings
mutes
settings
reblogs
status checkbox
report
action bar
status
card
boost modal
media modal
video modal

* fix(permalink): Do not lose classname

* fix(tests): Add space back in display name

* fix(status__wrapper): Remove duplicate css name

Remove incorrect style attribute. Remove style attribute all together. Cursor defaults to "auto" when not specified as 'default'.

* fix(nl): do not lose translations
2017-04-23 04:26:55 +02:00
Stephen Burgess
4cfc155560 Improve aria support - Columns and Navigation Drawer Icons (#2299)
* feat(aria): Add aria-labels to underlabelled tab nav items

The drawer tabs which control primary navigation are only labelled by a title which is not available to many screenreaders. Add an aria-label attribute to each link to improve readability with screenreaders. Organize link attributes so link target is first followed by classname.
Issue #1349

* feat(aria): Replace abstract aria role of section with region

Abstract aria roles such as section should not be used in content. Use non-abstract 'region' aria role instead. That role expects an aria-labelledby attribute with an id. Pass an ID to the column header. Remove the aria-label attribute on the ColumnHeader because the same value is output in plaintext as its child.
Issue #1349

* fix(aria): Remove aria-controls attribute until solution is found

Columns do not have wrappers, so these icons can't point to a column wrapper which it controls. Instead these icons function as triggers to show or hide individual columns.
#1349

* fix(typo): Remove type of aria-labelledby instead of aria-label
2017-04-22 17:30:35 +02:00
Akihiko Odaki
5357329454 Fix TabsBar update (#2300)
This change allows to update TabsBar according to route changes.
2017-04-22 17:29:02 +02:00
Yamagishi Kazutoshi
1948f9e767 Remove deprecated features at React v15.5 (#1905)
* Remove deprecated features at React v15.5

- [x] React.PropTypes
- [x] react-addons-pure-render-mixin
- [x] react-addons-test-utils

* Uncommented out & Add browserify_rails options

* re-add react-addons-shallow

* Fix syntax error from resolve conflicts

* follow up 59a77923b3
2017-04-21 20:05:35 +02:00
Ash Furrow
78af88e1f4 Hides superluous details on small screens (#2175)
* Hides superluous details on small screans.

* Addressed feedback from #2175.
2017-04-21 18:17:55 +02:00
Shel R
d2514445e1 Repair most egregious mistakes in onboarding modal (#1964)
* Repair most egregious mistakes

The deployed changes broke the pedagogy and curriculum built into the design of the onboarding modals, which had been reviewed and approved by various other contributors. While the changed layouts of the pages make some of the original decisions impossible to re-implement without substantial work, these changes should at least make the modals not outright terrible. 

The empty confusing description of Mastodon was replaced with an actual basic explanation of federation. The language was modified to be friendly and conversational again. Grammatical errors were fixed. The explanations of local and federated timelines were re-ordered to be in the direct that the menus go, top to bottom, and the sentence was re-added which explains that they are what "public timelines" refers to (since this phrasing is used elsewhere in the UI) and suggests the user use them to discover who to follow. A figure of the profile picture that lives above the compose box was padded to page two to serve as a landmark for less technically literate users to easily find the compose box and understand that the next page is moving upwards, so that they can find the search bar. 

Ideally, the elephant artwork should be either removed or replaced with something less depressing.  Room should be made to point users at the notifications column's settings icon because "how do I turn off the notification noise" is one of the most asked questions of new users and those icons are not easily noticeable. This last part may be made obsolete if the settings UI is later re-worked.

* Change copy

This commit addresses copy change suggestions made in the PR discussion

* Add periods to ends of sentences missing periods
* Made "Home" "Federated" "Local" and "Notifications" lowercase
* Separate explanation of "connecting" and the word "instance" into two sentences, to make the sentence less dense.
2017-04-20 18:20:40 +02:00
Yamagishi Kazutoshi
fdb2689a14 Fix PropTypes warning in OnboardingModal (#2191) 2017-04-20 13:22:54 +02:00
Ash Furrow
9a7ea7c870 Moves from hamburger icon to asterisk. (#2116) 2017-04-19 14:21:14 +02:00
JP DeVries
7525971561 Moving aria-label to div.column (#1769)
* Use landmark regions on columns

Closes mastodon#1720

* Moving aria-label to div.column
2017-04-18 17:21:25 +02:00
Eugen
6d70a80263 Onboarding modal (#1883)
* Basic onboarding modal that's shown to users once

* Lay out pages 2 through 5, add images, style modals (#1509)

* Lay out pages 2 through 5

Added images and laid out pages 2 through 5 in the jsx file. SCSS will
come, still working on just seeing if this works at all.

* Fix jsx errors, add images to modal pages, style modal pages

* Add animations to onboarding pager changes, improve wording and styling

* Finishing touches on the onboarding

* Add missing propTypes

* Update wording
2017-04-16 20:32:00 +02:00
abcang
90760eae4c fix regex filter (#1845)
* fix regex filter

* fixed br to linebreak and, stlip tags.

* change to send raw content

* changed to unescape in reducer
2017-04-16 16:33:38 +02:00
Zac Anger
f4045ba3d9 Add eslint-plugin-jsx-a11y (#1651)
* Add eslint-plugin-jsx-a11y.

* Fix npm script.

* Adjust npm scripts so test also runs lint.

* Fix existing lint errors.

* Don't break on a11y issues.

* Add role and tabIndex.

* Add vim and Mac files to .gitignore and .dockerignore.

* Handle htmlFor (partially), a that's actually a button.

* Fix missing tabIndex.

* Add cursor:pointer to load-more

* Revert change to load_more.

* Fixes based on review.

* Update yarn.lock.

* Don't try to install fsevents on Linux (hides warning noise).
2017-04-15 13:27:27 +02:00
Alda Marteau-Hardi
bddd36f260 Add a classname to the loading bar (#1826) 2017-04-15 13:17:54 +02:00
JP DeVries
1467515d3d Use landmark regions on columns (#1732)
Closes mastodon#1720
2017-04-14 11:12:59 +02:00
Eugen
c5afe573da Fix drag & drop overlay not appearing on firefox (#1721) 2017-04-13 22:21:34 +02:00
Eugen Rochko
5f8155482a Add overlay style to buttons, continue video after expanding it 2017-04-13 17:01:09 +02:00
blackle
00cc3066a2 Allow video to be expanded into lightbox 2017-04-13 09:09:45 -04:00
Isabelle Knott
1ea662963f Use shift+click instead of alt+click to bypass boost dialog (#1638) 2017-04-13 02:15:45 +02:00
Henry Smith
1921c5416b Fix console error when scrolling a column with no scrollable content (#1574) 2017-04-11 21:58:28 +02:00
Eugen Rochko
960181fd99 Fix look of the modals 2017-04-11 21:24:17 +02:00
blackle
01e5447e35 Add boost confirm modal 2017-04-10 22:35:55 -04:00
Eugen Rochko
a8c2e44fee Fix broken reference 2017-04-01 22:29:20 +02:00
Eugen Rochko
60ebfa182f Made modal system more generic 2017-04-01 22:11:28 +02:00
Eugen Rochko
13dfd8d109 Improve mobile tabs a little 2017-04-01 15:17:35 +02:00
Eugen Rochko
bf61bc1b96 Fix drag & drop overlay flickering 2017-03-31 11:48:25 +02:00
Eugen Rochko
bb7006bda1 Hide drag & drop area on drop event regardless of success 2017-03-28 14:17:24 +02:00
Eugen Rochko
d7c6c6dbe1 Fancier drag & drop indicator, emoji icon for emoji, upload progress (fix #295) 2017-03-24 03:55:45 +01:00
Eugen Rochko
caf5b8e975 Fix #431 - convert gif to webm during upload. Web UI treats them like it did
before. In the API, attachments now can be either image, video or gifv. Gifv
is to be treated like images in terms of behaviour, but are videos by file
type.
2017-03-04 23:02:24 +01:00
Eugen Rochko
2c50687279 Improve compose form performance, upgrade JS dependencies. LightingBox
now allows to cycle through multiple images
2017-02-26 01:23:44 +01:00
Eugen Rochko
c96fd24f48 Improve status reselect, do not display "load more" when no next link available 2017-02-22 16:30:09 +01:00
Eugen Rochko
974d712fbe Improve performance of compose form 2017-02-22 15:43:07 +01:00
Eugen Rochko
5997bb47a8 Fix #38 - Unread indicator when new content appears above the fold 2017-02-21 00:10:49 +01:00
Eugen
f338cc6c94 Fix scroll to top not registering because of wrong debounce usage 2017-02-20 19:01:47 +01:00
Eugen Rochko
4aa5ebe591 Split public timeline into "public timeline" which is local, and
"whole known network" which is what public timeline used to be

Only domain blocks with suspend severity will block PuSH subscriptions
Silenced accounts should not appear in conversations unless followed
2017-02-19 20:25:54 +01:00
Lorenz Diener
cbb962fd77 Move more colours to scss 2017-02-10 16:30:06 +00:00
Eugen Rochko
c424df5192 Progress on moving color styles to Sass 2017-02-09 01:20:09 +01:00
Eugen Rochko
b5bf807a34 Remove react-dnd as it was interfering with text selection. Move content
warning mentions preview into area where actual content would be
2017-02-05 04:11:14 +01:00
Eugen Rochko
fb6aa7ad5c Add tracking of delay to streaming API 2017-02-05 03:19:04 +01:00
Eugen Rochko
6cdcac1396 Fix #598 - arrow keys to navigate media; fix #481 - non-exact matches no longer
overshadow requirement for remote-lookup
2017-02-05 03:01:23 +01:00
Eugen Rochko
44fad0160f Add next/previous navigation in modal for media attachments 2017-02-05 02:48:11 +01:00
Eugen Rochko
21972bb398 No replies filter on home timeline no longer hides self-replies 2017-02-05 02:02:46 +01:00
Eugen Rochko
dbb7e5a644 Getting started on draggable columns 2017-02-05 01:58:25 +01:00
Eugen Rochko
1ee4a17f37 Add logging and filtering to the node.js streaming API 2017-02-02 13:56:14 +01:00
Eugen Rochko
7329fbd8a4 Fix up timeout, improve contrast on "show more", add responsive style
for extremely wide monitors
2017-01-26 18:48:56 +01:00
Eugen Rochko
d9022884c6 Smarter infinite scroll 2017-01-24 04:12:10 +01:00
Eugen Rochko
8aab692034 Less re-rendering 2017-01-23 21:40:48 +01:00
Eugen Rochko
46be4631ae Fix #222 - Update followers count when following/unfollowing
Also, since the root component connects to the stream that updates home/notification columns,
there is pretty much no case for refreshing those columns beyond initial load. So, move the
loading of those columns into the root component, to prevent unneccessary reloads when switching tabs
on mobile or resizing desktop window between mobile/desktop layouts
2017-01-19 10:54:18 +01:00
Eugen Rochko
6cf44ca92c Improve how the list entry Account component looks when target is blocked/follow is requested 2017-01-16 19:36:32 +01:00
Eugen Rochko
da5d366230 Fix #414 - Improve lightbox, add loading indicator 2017-01-16 12:04:02 +01:00
Eugen Rochko
18b11100e7 Fix issue when settings are not defined for column type 2017-01-10 17:33:32 +01:00