Merge pull request #183 from thematters/develop

Release: v1.2.0

.gitignore

@@ -100,3 +100,4 @@ yarn.lock
 
 # exclude sources.list
 sources.list
+*.rdb

CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 2019-04-02
+
+### Added
+
+- Editor: Embed - YouTube, Vimeo and JSFiddle #166
+- Editor: @user #169
+- Editor: SmartBreak #168 #170
+- About Page #180
+- OpenSearch #176
+
+# Changed
+
+- Fix notice dropdown positioning issue with max-height #167
+
 ## [1.1.1] - 2019-03-28
 
 ### Added

common/enums/keyCodes.ts

@@ -1,3 +1,8 @@
 export const KEYCODES = {
-  escape: 27
+  enter: 13,
+  escape: 27,
+  tab: 9,
+  up: 38,
+  down: 40,
+  v: 86
 }

common/styles/layouts/grids.css

@@ -92,3 +92,23 @@
     }
   }
 }
+
+/*
+ * Waffle
+ */
+@each $i in 1, 2, 3, 4 {
+  .l-waffle-$(i) {
+    /* prettier-ignore */
+    lost-column: 1/$(i);
+  }
+}
+@each $device in sm, md, lg, xl {
+  @media (--$(device)-up) {
+    @each $i in 1, 2, 3, 4 {
+      .l-waffle-$(device)-$(i) {
+        /* prettier-ignore */
+        lost-column: 1/$(i);
+      }
+    }
+  }
+}

common/styles/mixins/mixins.css

@@ -36,6 +36,14 @@
   justify-content: space-between;
 }
 
+@define-mixin font-serif {
+  font-family: var(--font-serif-tc);
+
+  &[lang='zh-hans'] {
+    font-family: var(--font-serif-sc);
+  }
+}
+
 @define-mixin border-bottom-grey {
   border-bottom: 1px solid var(--color-line-grey); /* fallback */
   border-bottom: 0.5px solid var(--color-line-grey);

common/styles/utils/content.article.css

@@ -7,6 +7,9 @@
   & :global(> * + *) {
     margin: var(--spacing-default) 0;
   }
+  & :global(> *:first-child) {
+    margin-top: 0;
+  }
   & :global(> *:last-child) {
     margin-bottom: var(--spacing-default);
   }
@@ -43,6 +46,26 @@
     }
   }
 
+  /* Embed
+   ========================================================================== */
+  & :global(figure[class*='embed']) {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-top: 56.25%;
+    background: var(--color-grey-lighter);
+
+    & iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
   /* Blockquote
    ========================================================================== */
   & :global(blockquote) {
@@ -107,24 +130,17 @@
     line-height: var(--line-height-article-heading);
   }
 
-  /* Paragraph
-   ========================================================================== */
-  & :global(> p) {
-    text-align: justify;
-    text-justify: inter-ideograph;
-  }
-
   /* Link
    ========================================================================== */
   & :global(a) {
-    color: var(--color-matters-gold);
+    color: var(--color-matters-green);
     border-bottom: 1px solid currentcolor;
     padding-bottom: 2px;
 
     &:hover,
     &:active,
     &:focus {
-      color: var(--color-matters-gold-hover);
+      color: var(--color-matters-green-hover);
     }
   }
   /* fix frequent misuse of links */
@@ -147,3 +163,9 @@
     border-bottom: 1px solid var(--color-line-grey-dark);
   }
 }
+
+.ql-editor {
+  & input.embed-clipboard {
+    line-height: 1.875;
+  }
+}

common/styles/utils/content.comment.css

@@ -102,24 +102,17 @@
     line-height: var(--line-height-article-heading);
   }
 
-  /* Paragraph
-   ========================================================================== */
-  & :global(> p) {
-    text-align: justify;
-    text-justify: inter-ideograph;
-  }
-
   /* Link
    ========================================================================== */
   & :global(a) {
-    color: var(--color-matters-gold);
+    color: var(--color-matters-green);
     border-bottom: 1px solid currentcolor;
     padding-bottom: 2px;
 
     &:hover,
     &:active,
     &:focus {
-      color: var(--color-matters-gold-hover);
+      color: var(--color-matters-green-hover);
     }
   }
   /* fix frequent misuse of links */

common/styles/variables/shadows.css

@@ -0,0 +1,9 @@
+/* @styled-jsx=global */
+
+:root {
+  --shadow-light: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
+  --shadow-default: 0 4px 12px 0 rgba(0, 0, 0, 0.05),
+    0 1px 4px 0 rgba(0, 0, 0, 0.08);
+  --shadow-dark: 0 12px 24px 0 rgba(0, 0, 0, 0.12),
+    0 4px 12px 0 rgba(0, 0, 0, 0.05);
+}

common/styles/vendors/quill.bubble.css

@@ -64,8 +64,7 @@
 .ql-bubble .ql-toolbar {
   background: var(--background-color);
   border: solid 1px var(--border-color);
-  box-shadow: 0 12px 24px 0 var(--border-color),
-    0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 1px 4px 0 var(--border-color);
+  box-shadow: var(--shadow-dark);
   border-radius: var(--spacing-xx-tight);
 
   &:after {

common/styles/vendors/tippy.css

@@ -1,13 +1,5 @@
 /* @styled-jsx=global */
 
-:root {
-  --shadow-light: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
-  --shadow-default: 0 4px 12px 0 rgba(0, 0, 0, 0.05),
-    0 1px 4px 0 rgba(0, 0, 0, 0.08);
-  --shadow-dark: 0 12px 24px 0 rgba(0, 0, 0, 0.12),
-    0 4px 12px 0 rgba(0, 0, 0, 0.05);
-}
-
 /**
  * reset
  * https://github.com/atomiks/tippyjs/blob/master/src/scss/index.scss

common/utils/dom.ts

@@ -41,11 +41,23 @@ const copyToClipboard = (str: string) => {
   document.body.removeChild(el)
 }
 
+const getAttributes = (name: string, str: string): string[] | [] => {
+  const re = new RegExp(`${name}="(.*?)"`, 'g')
+  const matches = []
+  let match = re.exec(str)
+  while (match) {
+    matches.push(match[1])
+    match = re.exec(str)
+  }
+  return matches.filter(m => !!m)
+}
+
 export const dom = {
   $,
   $$,
   getWindowHeight,
   getWindowWidth,
   offset,
-  copyToClipboard
+  copyToClipboard,
+  getAttributes
 }

common/utils/validator.ts

@@ -35,6 +35,8 @@ export const isValidStrictPassword = (password: string): boolean => {
  *
  * @see https://mattersnews.slack.com/archives/G8877EQMS/p1546446430005500
  */
+export const REGEXP_DISPLAY_NAME = /^[A-Za-z0-9\u4E00-\u9FFF\u3400-\u4DFF\uF900-\uFAFF\u2e80-\u33ffh]*$/
+
 export const isValidDisplayName = (name: string): boolean => {
   if (
     !name ||
@@ -43,9 +45,7 @@ export const isValidDisplayName = (name: string): boolean => {
   ) {
     return false
   }
-  return /^[A-Za-z0-9\u4E00-\u9FFF\u3400-\u4DFF\uF900-\uFAFF\u2e80-\u33ffh]*$/.test(
-    name
-  )
+  return REGEXP_DISPLAY_NAME.test(name)
 }
 
 /**

components/ArticleDigest/FeatureDigest/styles.css

@@ -19,7 +19,7 @@
 
 .content-container {
   position: relative;
-  margin: -8rem 0 var(--spacing-x-loose) 0;
+  margin: -7.5rem 0 var(--spacing-x-loose) 0;
   padding: 0;
   background: var(--color-white);
 

components/CommentDigest/FooterActions/UpvoteButton.tsx

@@ -101,7 +101,7 @@ const UpvoteButton = ({
       optimisticResponse={{
         voteComment: {
           id: comment.id,
-          myVote: null,
+          myVote: 'up',
           __typename: 'Comment'
         }
       }}

components/Dropdown/UserList/index.tsx

@@ -8,12 +8,10 @@ import styles from './styles.css'
 const DropdownUserList = ({
   users,
   onClick,
-  hideDropdown,
   loading
 }: {
   users: UserDigestBriefDescUser[]
   onClick: (user: UserDigestBriefDescUser) => void
-  hideDropdown: () => void
   loading?: boolean
 }) => {
   if (loading) {
@@ -40,7 +38,6 @@ const DropdownUserList = ({
               type="button"
               onClick={() => {
                 onClick(user)
-                hideDropdown()
               }}
             >
               <UserDigest.BriefDesc user={user} />