Visual bug fixes for v1.29

app/menu.js

@@ -27,6 +27,7 @@ exports.createTemplate = (options, messages) => {
       submenu: [
         {
           label: messages.mainMenuSettings.message,
+          accelerator: 'CommandOrControl+,',
           click: showSettings,
         },
         {

main.js

@@ -243,9 +243,6 @@ function createWindow() {
   if (!_.isNumber(windowOptions.height) || windowOptions.height < MIN_HEIGHT) {
     windowOptions.height = DEFAULT_HEIGHT;
   }
-  if (!_.isBoolean(windowOptions.maximized)) {
-    delete windowOptions.maximized;
-  }
   if (!_.isBoolean(windowOptions.autoHideMenuBar)) {
     delete windowOptions.autoHideMenuBar;
   }
@@ -270,10 +267,10 @@ function createWindow() {
 
   // Create the browser window.
   mainWindow = new BrowserWindow(windowOptions);
-  if (windowOptions.maximized) {
+  if (windowConfig && windowConfig.maximized) {
     mainWindow.maximize();
   }
-  if (windowOptions.fullscreen) {
+  if (windowConfig && windowConfig.fullscreen) {
     mainWindow.setFullScreen(true);
   }
 

stylesheets/_modules.scss

@@ -750,9 +750,12 @@
 
 .module-message__link-preview {
   @include button-reset;
+  display: block;
 
   margin-left: -12px;
   margin-right: -12px;
+  width: calc(100% + 24px);
+
   margin-top: -10px;
   margin-bottom: 5px;
   border-top-left-radius: 16px;
@@ -1033,6 +1036,9 @@
   // Because this is absolutely positioned, we 100% is too big, take it down by parent
   //   padding sizes.
   padding-right: 24px;
+
+  // This is so all clicks go right through to the underlying image.
+  pointer-events: none;
 }
 
 .module-message__metadata__date {
@@ -1325,6 +1331,9 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   @include light-theme {
     background-color: $color-white;
   }
+  @include ios-theme {
+    background-color: $color-white;
+  }
   @include dark-theme {
     background-color: $color-gray-02;
   }
@@ -1717,6 +1726,9 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   padding-right: 8px;
 
   background-color: $color-white-alpha-80;
+  @include dark-theme {
+    background-color: $color-white-alpha-20;
+  }
   @include ios-theme {
     background-color: $color-signal-blue-tint-alpha-50;
   }
@@ -2920,7 +2932,6 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 .module-conversation-list-item__unread-count {
   text-align: center;
 
-  padding-top: 1px;
   padding-left: 3px;
   padding-right: 3px;
 
@@ -3141,6 +3152,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   @include button-reset;
 
   // Ensures that the border of the item sticks tight to the inner contents
+  width: 100%;
   line-height: 0;
   border-radius: 50%;
 
@@ -3282,7 +3294,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 .module-avatar__label--80 {
   width: 80px;
   font-size: 40px;
-  line-height: 82px;
+  line-height: 80px;
 }
 
 .module-avatar__icon--80 {
@@ -3545,7 +3557,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 1;
+  z-index: 2;
 }
 
 .module-image__border-overlay--with-click-handler {
@@ -3627,7 +3639,7 @@ button.module-image__border-overlay:hover {
   );
   position: absolute;
   bottom: 0;
-  z-index: 2;
+  z-index: 1;
   left: 0;
   right: 0;
 }

test/app/fixtures/menu-windows-linux-setup.json

@@ -14,6 +14,7 @@
         "type": "separator"
       },
       {
+        "accelerator": "CommandOrControl+,",
         "label": "Preferences…",
         "click": null
       },

test/app/fixtures/menu-windows-linux.json

@@ -3,6 +3,7 @@
     "label": "&File",
     "submenu": [
       {
+        "accelerator": "CommandOrControl+,",
         "label": "Preferences…",
         "click": null
       },

ts/components/Avatar.md

@@ -3,19 +3,49 @@
 ```jsx
 <util.ConversationContext theme={util.theme} ios={util.ios}>
   <Avatar
-    size={28}
-    color="pink"
-    name="John Smith"
+    size={80}
+    color="blue"
+    avatarPath={util.gifObjectUrl}
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={52}
+    color="blue"
     avatarPath={util.gifObjectUrl}
     conversationType="direct"
     i18n={util.i18n}
   />
   <Avatar
     size={28}
-    color="pink"
-    name="Puppies"
+    color="blue"
     avatarPath={util.gifObjectUrl}
-    conversationType="group"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <hr />
+  <Avatar
+    size={80}
+    color="blue"
+    avatarPath={util.gifObjectUrl}
+    conversationType="direct"
+    onClick={() => console.log('onClick')}
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={52}
+    color="blue"
+    avatarPath={util.gifObjectUrl}
+    conversationType="direct"
+    onClick={() => console.log('onClick')}
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="blue"
+    avatarPath={util.gifObjectUrl}
+    conversationType="direct"
+    onClick={() => console.log('onClick')}
     i18n={util.i18n}
   />
 </util.ConversationContext>
@@ -39,13 +69,6 @@
     conversationType="direct"
     i18n={util.i18n}
   />
-  <Avatar
-    size={28}
-    color="red"
-    name="Puppies"
-    conversationType="group"
-    i18n={util.i18n}
-  />
 </util.ConversationContext>
 ```
 
@@ -63,6 +86,59 @@
 </util.ConversationContext>
 ```
 
+### Letters
+
+```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <Avatar
+    size={80}
+    color="blue"
+    name="One"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={52}
+    color="blue"
+    name="One"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="blue"
+    name="One"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <hr />
+  <Avatar
+    size={80}
+    color="blue"
+    name="One"
+    conversationType="direct"
+    onClick={() => console.log('onClick')}
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={52}
+    color="blue"
+    name="One"
+    conversationType="direct"
+    onClick={() => console.log('onClick')}
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="blue"
+    name="One"
+    conversationType="direct"
+    onClick={() => console.log('onClick')}
+    i18n={util.i18n}
+  />
+</util.ConversationContext>
+```
+
 ### Note to self
 
 ```jsx

ts/components/ConversationListItem.tsx

@@ -6,6 +6,7 @@ import { MessageBody } from './conversation/MessageBody';
 import { Timestamp } from './conversation/Timestamp';
 import { ContactName } from './conversation/ContactName';
 import { TypingAnimation } from './conversation/TypingAnimation';
+import { cleanId } from './_util';
 
 import { LocalizerType } from '../types/Util';
 
@@ -33,10 +34,6 @@ export type PropsData = {
   };
 };
 
-export function cleanId(id: string): string {
-  return id.replace(/[^\u0020-\u007e\u00a0-\u00ff]/g, '_');
-}
-
 type PropsHousekeeping = {
   i18n: LocalizerType;
   style?: Object;

ts/components/LeftPane.tsx

@@ -3,7 +3,6 @@ import { AutoSizer, List } from 'react-virtualized';
 import { debounce } from 'lodash';
 
 import {
-  cleanId,
   ConversationListItem,
   PropsData as ConversationListItemPropsType,
 } from './ConversationListItem';
@@ -12,6 +11,7 @@ import {
   SearchResults,
 } from './SearchResults';
 import { LocalizerType } from '../types/Util';
+import { cleanId } from './_util';
 
 export interface PropsType {
   conversations?: Array<ConversationListItemPropsType>;

ts/components/SearchResults.tsx

@@ -11,11 +11,11 @@ import { Intl } from './Intl';
 import { Emojify } from './conversation/Emojify';
 import { Spinner } from './Spinner';
 import {
-  cleanId,
   ConversationListItem,
   PropsData as ConversationListItemPropsType,
 } from './ConversationListItem';
 import { StartNewConversation } from './StartNewConversation';
+import { cleanId } from './_util';
 
 import { LocalizerType } from '../types/Util';
 

ts/components/ShortcutGuide.tsx

@@ -21,8 +21,8 @@ type KeyType =
   | 'A'
   | 'C'
   | 'D'
-  | 'E'
   | 'F'
+  | 'J'
   | 'L'
   | 'M'
   | 'P'
@@ -84,7 +84,7 @@ const NAVIGATION_SHORTCUTS: Array<ShortcutType> = [
   },
   {
     description: 'Keyboard--open-emoji-chooser',
-    keys: ['commandOrCtrl', 'shift', 'E'],
+    keys: ['commandOrCtrl', 'shift', 'J'],
   },
   {
     description: 'Keyboard--open-sticker-chooser',

ts/components/_util.ts

@@ -0,0 +1,5 @@
+// A separate file so this doesn't get picked up by StyleGuidist over real components
+
+export function cleanId(id: string): string {
+  return id.replace(/[^\u0020-\u007e\u00a0-\u00ff]/g, '_');
+}

ts/components/conversation/Image.tsx

@@ -162,7 +162,6 @@ export class Image extends React.Component<Props> {
             alt={i18n('imageCaptionIconAlt')}
           />
         ) : null}
-        {overlay}
         {closeButton ? (
           <button
             onClick={(e: React.MouseEvent<{}>) => {
@@ -199,6 +198,7 @@ export class Image extends React.Component<Props> {
             {overlayText}
           </div>
         ) : null}
+        {overlay}
       </div>
     );
   }

ts/components/emoji/EmojiButton.tsx

@@ -94,7 +94,7 @@ export const EmojiButton = React.memo(
             return;
           }
 
-          if (ctrlOrCommand && shiftKey && (key === 'e' || key === 'E')) {
+          if (ctrlOrCommand && shiftKey && (key === 'j' || key === 'J')) {
             event.stopPropagation();
             event.preventDefault();
 

ts/util/lint/exceptions.json

@@ -7533,7 +7533,7 @@
     "rule": "React-createRef",
     "path": "ts/components/LeftPane.js",
     "line": "        this.listRef = react_1.default.createRef();",
-    "lineNumber": 14,
+    "lineNumber": 15,
     "reasonCategory": "usageTrusted",
     "updated": "2019-11-05T01:14:21.081Z",
     "reasonDetail": "Used for focus management"
@@ -7578,7 +7578,7 @@
     "rule": "React-createRef",
     "path": "ts/components/SearchResults.js",
     "line": "        this.listRef = react_1.default.createRef();",
-    "lineNumber": 25,
+    "lineNumber": 26,
     "reasonCategory": "usageTrusted",
     "updated": "2019-08-09T00:44:31.008Z",
     "reasonDetail": "SearchResults needs to interact with its child List directly"