update translations

fix some more stuff
fix some themes

i18n/template-ssr.pot

@@ -290,6 +290,21 @@ msgstr ""
 msgid "Server error occured"
 msgstr ""
 
+#: src/routes/api/auth/verify.js:25
+#: src/routes/api/auth/verify.js:32
+msgid "Mail verification"
+msgstr ""
+
+#: src/routes/api/auth/verify.js:26
+msgid "You are now verified :)"
+msgstr ""
+
+#: src/routes/api/auth/verify.js:32
+msgid ""
+"Your mail verification code is invalid or already expired :(, please "
+"request a new one."
+msgstr ""
+
 #: src/routes/api/auth/register.js:31
 msgid "E-Mail already in use."
 msgstr ""
@@ -306,21 +321,6 @@ msgstr ""
 msgid "Failed to establish session after register :("
 msgstr ""
 
-#: src/routes/api/auth/verify.js:25
-#: src/routes/api/auth/verify.js:32
-msgid "Mail verification"
-msgstr ""
-
-#: src/routes/api/auth/verify.js:26
-msgid "You are now verified :)"
-msgstr ""
-
-#: src/routes/api/auth/verify.js:32
-msgid ""
-"Your mail verification code is invalid or already expired :(, please "
-"request a new one."
-msgstr ""
-
 #: src/routes/api/auth/logout.js:13
 msgid "You are not even logged in."
 msgstr ""

src/actions/index.js

@@ -815,7 +815,6 @@ export function hideAllWindowTypes(
   windowType: string,
   hide: boolean,
 ): Action {
-  console.log(`hideAllWindowTypes`, hide);
   return {
     type: 'HIDE_ALL_WINDOW_TYPE',
     windowType,

src/client.js

@@ -66,7 +66,9 @@ function init() {
 
     // assume that if one chat window is not hidden, all are
     let isRead = state.windows.showWindows
+      // eslint-disable-next-line max-len
       && state.windows.windows.find((win) => win.windowType === 'CHAT' && win.hidden === false)
+      // eslint-disable-next-line max-len
       && Object.values(state.windows.args).find((args) => args.chatChannel === channelId);
     isRead = isRead || state.windows.modal.open
       && state.windows.args[0].chatChannel === channelId;

src/components/ChannelContextMenu.jsx

@@ -33,14 +33,17 @@ const ChannelContextMenu = ({
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        event.stopPropagation();
         close();
       }
     };
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
+    document.addEventListener('click', handleClickOutside, {
+      capture: true,
+    });
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener('click', handleClickOutside, {
+        capture: true,
+      });
     };
   }, [wrapperRef]);
 

src/components/ChannelDropDown.jsx

@@ -42,6 +42,7 @@ const ChannelDropDown = ({
       && !wrapperRef.current.contains(event.target)
       && !buttonRef.current.contains(event.target)
     ) {
+      event.stopPropagation();
       setShow(false);
     }
   }, []);
@@ -56,12 +57,14 @@ const ChannelDropDown = ({
         const chType = (channels[chatChannel][1] === 1) ? 1 : 0;
         setType(chType);
       }
-      document.addEventListener('mousedown', handleClickOutside);
-      document.addEventListener('touchstart', handleClickOutside);
+      document.addEventListener('click', handleClickOutside, {
+        capture: true,
+      });
       window.addEventListener('resize', handleWindowResize);
     } else {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener('click', handleClickOutside, {
+        capture: true,
+      });
       window.removeEventListener('resize', handleWindowResize);
     }
   }, [show]);

src/components/ChatButton.jsx

@@ -23,11 +23,11 @@ import {
  */
 const selectChatWindowStatus = (state) => [
   state.windows.showWindows,
-  state.windows.windows.find((win) => win.windowType === 'CHAT' && win.hidden === false) || (
-    state.windows.modal.open
-      && state.windows.modal.windowType === 'CHAT'
-  ),
-  state.windows.windows.find((win) => win.windowType === 'CHAT' && win.hidden === true),
+  state.windows.windows.find((win) => win.windowType === 'CHAT'
+    && win.hidden === false)
+  || (state.windows.modal.open && state.windows.modal.windowType === 'CHAT'),
+  state.windows.windows.find((win) => win.windowType === 'CHAT'
+    && win.hidden === true),
 ];
 
 const ChatButton = () => {
@@ -42,8 +42,10 @@ const ChatButton = () => {
 
   const chatNotify = useSelector((state) => state.audio.chatNotify);
   const channels = useSelector((state) => state.chat.channels);
-  const [unread, mute] = useSelector((state) => [state.chatRead.unread, state.chatRead.mute],
-    shallowEqual);
+  const [unread, mute] = useSelector((state) => [
+    state.chatRead.unread,
+    state.chatRead.mute,
+  ], shallowEqual);
 
   /*
    * almost the same as in ChannelDropDown

src/components/UserContextMenu.jsx

@@ -32,14 +32,17 @@ const UserContextMenu = () => {
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        event.stopPropagation();
         close();
       }
     };
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
+    document.addEventListener('click', handleClickOutside, {
+      capture: true,
+    });
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener('click', handleClickOutside, {
+        capture: true,
+      });
     };
   }, [wrapperRef]);
 

src/components/Window.jsx

@@ -7,6 +7,7 @@ import React, {
   useState, useCallback, useRef, useEffect,
 } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import { t } from 'ttag';
 
 import {
   moveWindow,
@@ -20,6 +21,7 @@ import {
 import useDrag from './hooks/drag';
 import COMPONENTS from './windows';
 
+// eslint-disable-next-line max-len
 const selectWindowById = (state, windowId) => state.windows.windows.find((win) => win.windowId === windowId);
 
 const Window = ({ id }) => {
@@ -46,27 +48,33 @@ const Window = ({ id }) => {
     dispatch(closeWindow(id));
   };
 
-  useDrag(
-    titleBarRef,
-    focus,
-    useCallback((xDiff, yDiff) => dispatch(moveWindow(id, xDiff, yDiff)), []),
-  );
-
-  useDrag(
-    resizeRef,
-    focus,
-    useCallback((xDiff, yDiff) => dispatch(resizeWindow(id, xDiff, yDiff)), []),
-  );
-
   const {
     width, height,
     xPos, yPos,
     windowType,
     title,
     open,
+    hidden,
   } = win;
 
+  useDrag(
+    titleBarRef,
+    focus,
+    useCallback((xDiff, yDiff) => dispatch(moveWindow(id, xDiff, yDiff)),
+      [hidden]),
+  );
+
+  useDrag(
+    resizeRef,
+    focus,
+    useCallback((xDiff, yDiff) => dispatch(resizeWindow(id, xDiff, yDiff)),
+      [hidden]),
+  );
+
   const onTransitionEnd = () => {
+    if (hidden) {
+      setRender(false);
+    }
     if (!open) {
       dispatch(removeWindow(id));
     }
@@ -74,17 +82,21 @@ const Window = ({ id }) => {
 
   useEffect(() => {
     window.setTimeout(() => {
-      if (open) setRender(true);
+      if (open && !hidden) setRender(true);
     }, 10);
-  }, [open]);
+  }, [open, hidden]);
 
   const Content = COMPONENTS[windowType];
 
-  console.log(`render window ${id}`);
+  if (!render && hidden) {
+    return null;
+  }
 
   return (
     <div
-      className={`window ${windowType}${(open && render) ? ' show' : ''}`}
+      className={`window ${windowType}${
+        (open && !hidden && render) ? ' show' : ''
+      }`}
       onTransitionEnd={onTransitionEnd}
       onClick={focus}
       style={{
@@ -100,30 +112,35 @@ const Window = ({ id }) => {
         <span
           className="win-topbtn"
           onClick={clone}
+          title={t`Clone`}
         >
           +
         </span>
         <span
           className="win-title"
           ref={titleBarRef}
+          title={t`Move`}
         >
           {title}
         </span>
         <span
           className="win-topbtn"
           onClick={maximize}
+          title={t`Maximize`}
         >
           ↑
         </span>
         <span
-          className="win-topbtn"
+          className="win-topbtn close"
           onClick={close}
+          title={t`Close`}
         >
           X
         </span>
       </div>
       <div
         className="win-resize"
+        title={t`Resize`}
         ref={resizeRef}
       >
         ▨

src/components/WindowManager.jsx

@@ -8,6 +8,7 @@ import { useSelector, shallowEqual } from 'react-redux';
 
 import Window from './Window';
 
+// eslint-disable-next-line max-len
 const selectWindowIds = (state) => state.windows.windows.map((win) => win.windowId);
 
 const WindowsRoot = () => {

src/components/hooks/drag.js

@@ -16,7 +16,6 @@ function useDrag(elRef, startHandler, diffHandler) {
     event.preventDefault();
     event.stopPropagation();
     startHandler();
-    console.log('startDrag');
 
     let {
       clientX: startX,
@@ -29,7 +28,6 @@ function useDrag(elRef, startHandler, diffHandler) {
         clientX: curX,
         clientY: curY,
       } = evt.touches ? evt.touches[0] : evt;
-      console.log(`drag by ${curX - startX} - ${curY - startY}`);
       diffHandler(curX - startX, curY - startY);
       startX = curX;
       startY = curY;
@@ -39,7 +37,6 @@ function useDrag(elRef, startHandler, diffHandler) {
     const stopDrag = (evt) => {
       evt.preventDefault();
       evt.stopPropagation();
-      console.log('stopDrag');
       document.removeEventListener('mousemove', drag);
       document.removeEventListener('touchmove', drag);
       document.removeEventListener('mouseup', stopDrag);
@@ -53,12 +50,18 @@ function useDrag(elRef, startHandler, diffHandler) {
 
   useEffect(() => {
     if (elRef && elRef.current) {
-      elRef.current.addEventListener('mousedown', startDrag, { passive: false });
-      elRef.current.addEventListener('touchstart', startDrag, { passive: false });
+      elRef.current.addEventListener('mousedown', startDrag, {
+        passive: false,
+      });
+      elRef.current.addEventListener('touchstart', startDrag, {
+        passive: false,
+      });
     }
     return () => {
-      elRef.current.removeEventListener('mousedown', startDrag);
-      elRef.current.removeEventListener('touchstart', startDrag);
+      if (elRef && elRef.current) {
+        elRef.current.removeEventListener('mousedown', startDrag);
+        elRef.current.removeEventListener('touchstart', startDrag);
+      }
     };
   }, [elRef, diffHandler]);
 }

src/components/windows/Chat.jsx

@@ -44,10 +44,11 @@ const Chat = ({
   ), [dispatch]);
 
   const ownName = useSelector((state) => state.user.name);
+  // eslint-disable-next-line max-len
   const isDarkMode = useSelector((state) => state.gui.style.indexOf('dark') !== -1);
   const fetching = useSelector((state) => state.fetching.fetchingChat);
   const { channels, messages, blocked } = useSelector((state) => state.chat);
-
+  // eslint-disable-next-line max-len
   const { chatChannel, inputMessage } = useSelector((state) => state.windows.args[windowId]);
 
   const { stayScrolled } = useStayScrolled(listRef, {

src/controls/PixelPainterControls.js

@@ -227,7 +227,6 @@ class PixelPlainterControls {
   onTouchStart(event: TouchEvent) {
     event.preventDefault();
     event.stopPropagation();
-    console.log('PixelPlainterControls touch start');
     document.activeElement.blur();
 
     this.clickTapStartTime = Date.now();
@@ -258,7 +257,6 @@ class PixelPlainterControls {
   onTouchEnd(event: TouchEvent) {
     event.preventDefault();
     event.stopPropagation();
-    console.log('PixelPlainterControls touch end');
 
     const { store } = this;
     if (event.touches.length === 0 && this.isClicking) {
@@ -295,7 +293,6 @@ class PixelPlainterControls {
   onTouchMove(event: TouchEvent) {
     event.preventDefault();
     event.stopPropagation();
-    console.log('PixelPlainterControls touch move');
 
     const multiTouch = (event.touches.length > 1);
 

src/reducers/contextMenu.js

@@ -32,19 +32,6 @@ export default function contextMenu(
       const {
         menuType, xPos, yPos, args,
       } = action;
-      // if the same context menu is already open, close it
-      if (state.menuOpen && state.menuType === menuType
-        && !(
-          Object.keys(state.args).length === Object.keys(args).length
-          && Object.keys(state.args).every(
-            (key) => state.args[key] === args[key],
-          )
-        )) {
-        return {
-          ...state,
-          menuOpen: false,
-        };
-      }
       return {
         ...state,
         menuType,

src/reducers/windows.js

@@ -97,6 +97,12 @@ export default function windows(
         };
       }
       const windowId = generateWindowId(state);
+      const {
+        innerWidth: screenWidth,
+        innerHeight: screenHeight,
+      } = window;
+      const width = Math.min(550, Math.floor(screenWidth * 0.75));
+      const height = Math.min(300, Math.floor(screenHeight * 0.75));
       return {
         ...state,
         windows: [
@@ -107,10 +113,10 @@ export default function windows(
             open: true,
             hidden: false,
             title,
-            width: 600,
-            height: 300,
-            xPos: 200,
-            yPos: 200,
+            width,
+            height,
+            xPos: Math.floor((screenWidth - width) / 2),
+            yPos: Math.floor((screenHeight - height) / 2),
             cloneable,
           },
         ],
@@ -203,7 +209,6 @@ export default function windows(
         windowType,
         hide,
       } = action;
-      console.log(`hideAllWindowTypes`, windowType, hide);
       const newWindows = state.windows.map((win) => {
         if (win.windowType !== windowType) return win;
         return {
@@ -267,7 +272,6 @@ export default function windows(
       ) {
         return state;
       }
-      console.log(`focus window ${windowId}`);
       const newWindows = oldWindows.filter((w) => w.windowId !== windowId);
       const win = oldWindows.find((w) => w.windowId === windowId);
       if (win) {
@@ -306,6 +310,12 @@ export default function windows(
       const windowId = generateWindowId(state);
       const { windowType, title } = state.modal;
       const cloneable = true;
+      const {
+        innerWidth: screenWidth,
+        innerHeight: screenHeight,
+      } = window;
+      const width = Math.min(550, Math.floor(screenWidth * 0.75));
+      const height = Math.min(300, Math.floor(screenHeight * 0.75));
       return {
         ...state,
         modal: {
@@ -320,10 +330,10 @@ export default function windows(
             open: true,
             hidden: false,
             title,
-            width: 600,
-            height: 300,
-            xPos: 200,
-            yPos: 200,
+            width,
+            height,
+            xPos: Math.floor((screenWidth - width) / 2),
+            yPos: Math.floor((screenHeight - height) / 2),
             cloneable,
           },
         ],

src/styles/default.css

@@ -129,7 +129,7 @@ tr:nth-child(even) {
 
 .window {
   position: fixed;
-  background-color: rgba(226, 226, 226, 0.92);
+  background-color: rgba(252, 252, 252, 0.95);
   border: solid black;
   border-width: thin;
   overflow: hidden;
@@ -146,14 +146,22 @@ tr:nth-child(even) {
 }
 
 .win-title {
+  border: solid black;
+  border-width: thin;
+  background-color: #e8e8e8;
   cursor: move;
   flex-grow: 1;
-  line-height: 19px;
+  line-height: 17px;
+  height: 17px;
   margin: 2px;
   padding-left: 10px;
   font-size: 15px;
 }
 
+.win-title:hover {
+  background-color: #e4e4e4;
+}
+
 .win-topbtn {
   border: solid black;
   border-width: thin;
@@ -168,6 +176,14 @@ tr:nth-child(even) {
   font-weight: bold;
 }
 
+.win-topbtn:hover {
+  background-color: #d7d7d7;
+}
+
+.win-topbtn.close:hover {
+  background-color: #f29696;
+}
+
 .win-resize {
   position: absolute;
   bottom: -4px;

src/styles/theme-arkeros.css

@@ -22,6 +22,10 @@ tr:nth-child(odd) {
   color: #ff91a6;
 }
 
+.window {
+  background: linear-gradient(1deg,#61dcea ,#ffb1e1,#ecffec,#fff9b1,#61dcea);
+}
+
 .actionbuttons:hover, .menu > div:hover, .channeldd, .contextmenu {
   background: linear-gradient(160deg, #61dcea , #ffb1e1, #ecffec, #ffb1e1, #61dcea);
 }

src/styles/theme-dark-round.css

@@ -30,9 +30,25 @@ tr:nth-child(even) {
   background-color: #505050;
 }
 
-.chatbox {
-  background-color: rgba(59, 59, 59, 0.8);
-  border-radius: 8px;
+.window {
+  background-color: rgba(59, 59, 59, 0.98);
+  border-radius: 5px;
+}
+
+.win-title {
+  background-color: #c1c1c1;
+}
+
+.win-title:hover {
+  background-color: #dedede;
+}
+
+.win-topbtn {
+  background-color: #a6a4a4;
+}
+
+.win-topbtn:hover {
+  background-color: #8b8b8b;
 }
 
 .channeldd, .contextmenu {
@@ -102,12 +118,12 @@ tr:nth-child(even) {
   color: hsla(220, 100%, 95.3%, 0.6);
 }
 
-.ModalClose {
+.ModalClose, .ModalRestore {
   background-color: #55555d;
   border-color: #dcddde;
 }
 
-.ModalClose:hover {
+.ModalClose:hover, .ModalRestore:hover {
   background-color: #6f6f75;
 }
 

src/styles/theme-dark-sstraight.css

@@ -30,11 +30,28 @@ tr:nth-child(even) {
   background-color: #505050;
 }
 
-.chatbox {
-  background-color: rgba(59, 59, 59, 0.8);
+.window {
+  background-color: rgba(59, 59, 59, 0.98);
   border-radius: 4px;
 }
 
+.win-title {
+  background-color: #c1c1c1;
+  color: #8a5007;
+}
+
+.win-title:hover {
+  background-color: #dedede;
+}
+
+.win-topbtn {
+  background-color: #a6a4a4;
+}
+
+.win-topbtn:hover {
+  background-color: #8b8b8b;
+}
+
 .channeldd, .contextmenu {
   background-color: #353535;
   color: #efefef;
@@ -106,12 +123,12 @@ tr:nth-child(even) {
   color: hsla(220, 100%, 95.3%, 0.6);
 }
 
-.ModalClose {
+.ModalClose, .ModalRestore {
   background-color: #55555d;
   border-color: #dcddde;
 }
 
-.ModalClose:hover {
+.ModalClose:hover, .ModalRestore:hover {
   background-color: #6f6f75;
 }
 

src/styles/theme-dark.css

@@ -30,8 +30,24 @@ tr:nth-child(even) {
   background-color: #505050;
 }
 
-.chatbox {
-  background-color: rgba(59, 59, 59, 0.8);
+.window {
+  background-color: rgba(59, 59, 59, 0.98);
+}
+
+.win-title {
+  background-color: #c1c1c1;
+}
+
+.win-title:hover {
+  background-color: #dedede;
+}
+
+.win-topbtn {
+  background-color: #a6a4a4;
+}
+
+.win-topbtn:hover {
+  background-color: #8b8b8b;
 }
 
 .actionbuttons, .coorbox, .onlinebox, .cooldownbox, .palettebox, #historyselect {
@@ -87,12 +103,12 @@ tr:nth-child(even) {
   color: hsla(220, 100%, 95.3%, 0.6);
 }
 
-.ModalClose {
+.ModalClose, .ModalRestore {
   background-color: #55555d;
   border-color: #dcddde;
 }
 
-.ModalClose:hover {
+.ModalClose:hover, .ModalRestore:hover {
   background-color: #6f6f75;
 }
 

src/styles/theme-light-round.css

@@ -1,7 +1,11 @@
-.chatbox, .channeldd, .contextmenu {
+.channeldd, .contextmenu {
   border-radius: 8px;
 }
 
+.window {
+  border-radius: 5px;
+}
+
 .chntop {
   margin-top: 4px;
 }