New layout/more functionality

[AlexHalb]

New layout in vue.js based off

• Slideout design
• Main design
• Colors

Also adds quite a bit of new functionality.

Closed issues

* Closes #5 * Closes #6 * Closes #7 * Closes #8 * Closes #10 * Closes #11 * Closes #12 * Closes #13 * Closes #14 * Closes #15 * Closes #16 * Closes #17 * Coses #18 * Closes #19 * Closes #20 * Closes #21 * Closes #23 * Closes #26 * Closes #27 * Closes #29 * Closes #38 * Closes #41 * Closes #49 * Closes #51 * Closes #53 * Closes #62 * Closes #79 * Closes #82 This also includes issues currently fixed and issues resolved in the vue-rewrite branch. Apologies, I know this list is painfully verbose. Github only recognizes issues as being linked to a PR if they are prefixed with closes/resolved/fixes for every issue and they have to all be in the PR description.

[AlexHalb]

Here's a list of the functionality of the toolbar (also, before I forget, here's a screenshot)

• When emoticon buttons clicked, the emoticon is inserted at the cursor position
• When a markdown button is clicked, the markdown formatting is inserted at the cursor position. The cursor is moved in between the formatting
• Clicking emoticon or markdown buttons in the main menu opens up their respective submenus
• Clicking the X button in the submenu closes it
• There's a help button in the main menu
• When text is highlighted and a markdown button is clicked, the selected text is wrapped in the markdown formatting
• When text is highlighted and the link button is clicked, the text goes in the proper field and the cursor is moved to the URL field
• When text that is a URL is highlighted, the selection goes in the URL field and the cursor is moved to the text field
• The markdown functions are
  1. Bold
  2. Italics
  3. Bold italics
  4. Strikethrough
  5. Code
  6. Link
  7. Action
• The emoticons are
  1. Thumbs up
  2. Thumbs down
  3. Happy face
  4. Sad face
  5. Angry face
  6. Face crying tears of joy
  7. Silly face
  8. Thinking face
  9. Surprised face
• Markdown shortcuts or emoticon shortcuts can be disabled in the settings tab
• The toolbar itself can be disabled in the settings tab
• The main content adjusts its height when the toolbar height changes
• The input field and toolbar are cohesive
• The input field is distinguishable from the toolbar
• The colors used are the same as those used everywhere else
• It works
• It doesn't break anything (that I know of)(yet)

What I still want/need to implement

• [x] Toolbar settings save to localStorage
• [x] Custom emoticons replace some of the less used ones
• [x] Animate toolbar changes
• [x] Whatever I can't think of that needs to get done

[luxaritas]

• Chat should not be able to be positioned outside of the screen. Instead, once it hits the edge, it should "dock" and slide along that edge. When docked to the bottom of the screen, minimization should cause the window to shrink down to the bottom of the screen. When docked to a side, the minimized bar should be vertical instead of horizontal and likewise shrink to the edge.

[AlexHalb]

For the builtin browser resizer, that's something I can only hide on webkit browsers (-webkit::resizer is the pseudo-class I believe). The restrictive min and max sizes are mostly arbitrary. The minimum size is somewhat large so everything fits properly (mainly in the settings menu). The maximum size could be removed entirely, as there isn't really any reason for it. The profile picture does display for the user cards, it just takes a while to load (if you're not seeing them, it's likely because the chat doesn't parse UIDs from the old chat correctly and sets them as anonymous).

[aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa4]

amaziong!

[luxaritas]

Finally merging, will take care of further adjustments outside of PR