refactor: dock panel style

close #2535
poooi · Jan 5, 2024 · a3f4cdf · a3f4cdf
1 parent 74b1220
commit a3f4cdf
Show file tree

Hide file tree

Showing 50 changed files with 339 additions and 416 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -134,7 +134,7 @@
     "request": "^2.88.2",
     "reselect": "^4.1.6",
     "semver": "^7.3.7",
-    "styled-components": "^5.3.5",
+    "styled-components": "^6.1.6",
     "tslib": "^2.4.0",
     "wanakana": "^5.0.2",
     "yargs": "^17.5.1"

diff --git a/views/components/etc/avatar.es b/views/components/etc/avatar.es
@@ -12,7 +12,7 @@ import {
   getSlotItemBackgroundPath,
 } from 'views/utils/ship-img'
 import classnames from 'classnames'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 const ShipAvatarContainer = styled.div`
   align-items: center;

diff --git a/views/components/etc/scroll-shadow.tsx b/views/components/etc/scroll-shadow.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react'
 import { compact } from 'lodash'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 interface ScrollShadowProps {
   children: React.ReactNode

diff --git a/views/components/etc/styled-components.ts b/views/components/etc/styled-components.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export const InfoTooltipEntry = styled.div`
   display: flex;

diff --git a/views/components/info/alert.tsx b/views/components/info/alert.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react'
 import i18next from 'views/env-parts/i18next'
 import { take } from 'lodash'
-import styled, { keyframes, css } from 'styled-components'
+import { styled, keyframes, css } from 'styled-components'
 import { CustomTag } from 'views/components/etc/custom-tag'
 import { ResizeSensor } from 'views/components/etc/resize-sensor'
 import { EventEmitter } from 'views/utils/event-emitter'

diff --git a/views/components/info/control.es b/views/components/info/control.es
@@ -10,7 +10,7 @@ import { connect } from 'react-redux'
 import { get, padStart } from 'lodash'
 import { gameRefreshPage, gameReload } from 'views/services/utils'
 import { withNamespaces, Trans } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 import { CustomTag } from 'views/components/etc/custom-tag'
 import { Tooltip } from 'views/components/etc/overlay'
 

diff --git a/views/components/info/map-reminder.es b/views/components/info/map-reminder.es
@@ -6,7 +6,7 @@ import { createSelector } from 'reselect'
 import { connect } from 'react-redux'
 import { get, map, zip, each } from 'lodash'
 import { withNamespaces } from 'react-i18next'
-import styled, { css, keyframes } from 'styled-components'
+import { styled, css, keyframes } from 'styled-components'
 import { rgba } from 'polished'
 import classNames from 'classnames'
 

diff --git a/views/components/info/toast.es b/views/components/info/toast.es
@@ -1,6 +1,6 @@
 import React, { createRef } from 'react'
 import { Position, OverlayToaster, Intent } from '@blueprintjs/core'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 import { connect } from 'react-redux'
 import { get } from 'lodash'
 

diff --git a/views/components/main/index.es b/views/components/main/index.es
@@ -5,7 +5,7 @@ import FontAwesome from 'react-fontawesome'
 import { connect } from 'react-redux'
 import { get, pick, isEqual, entries, fromPairs, map } from 'lodash'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 import { Responsive as ResponsiveReactGridLayout } from 'react-grid-layout'
 import { ResizeSensor } from '@blueprintjs/core'
 

diff --git a/views/components/main/parts/admiral-panel.es b/views/components/main/parts/admiral-panel.es
@@ -9,7 +9,7 @@ import { withNamespaces, Trans } from 'react-i18next'
 import i18next from 'views/env-parts/i18next'
 import { Tag, Position, Intent, Tooltip } from '@blueprintjs/core'
 import { compose } from 'redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { CountdownNotifierLabel } from './countdown-timer'
 import { configSelector, basicSelector } from 'views/utils/selectors'

diff --git a/views/components/main/parts/construction-panel.es b/views/components/main/parts/construction-panel.es
@@ -7,7 +7,7 @@ import { join as joinString, range, get, map } from 'lodash'
 import FA from 'react-fontawesome'
 import { withNamespaces } from 'react-i18next'
 import i18next from 'views/env-parts/i18next'
-import { Intent, Position, ResizeSensor } from '@blueprintjs/core'
+import { Intent, Position } from '@blueprintjs/core'
 
 import { Avatar } from 'views/components/etc/avatar'
 import { CountdownNotifierLabel } from './countdown-timer'
@@ -27,16 +27,6 @@ const EmptyDock = ({ state }) => (
   </EmptyDockWrapper>
 )
 
-const getPanelDimension = (width) => {
-  if (width > 480) {
-    return 4
-  }
-  if (width > 240) {
-    return 2
-  }
-  return 1
-}
-
 const materials = [1, 2, 3, 4, 7]
 
 const getTagIntent = ({ isLSC }, timeRemaining) =>
@@ -67,131 +57,95 @@ export class ConstructionPanel extends Component {
     message: (names) => `${joinString(names, ', ')} ${i18next.t('main:built')}`,
   }
 
-  width = 250
-
-  state = {
-    dimension: 2,
-    displayShipName: true,
-  }
-
-  updateDimension = () => {
-    const dimension = getPanelDimension(this.width)
-    const displayShipName = !this.props.enableAvatar || this.width / dimension >= 145
-
-    if (dimension !== this.state.dimension || displayShipName !== this.state.displayShipName) {
-      this.setState({
-        dimension,
-        displayShipName,
-      })
-    }
-  }
-
   getDockShipName = (dockId, defaultValue) => {
     const id = get(this.props.constructions, [dockId, 'api_created_ship_id'])
     return id ? this.props.t(`resources:${this.props.$ships[id].api_name}`) : defaultValue
   }
 
-  handleResize = ([entry]) => {
-    this.width = entry.contentRect.width
-    this.updateDimension()
-  }
-
-  componentDidUpdate = (prevProps) => {
-    if (prevProps.enableAvatar !== this.props.enableAvatar) {
-      this.updateDimension()
-    }
-  }
-
   render() {
     const { constructions, canNotify, enableAvatar, editable } = this.props
-    const { dimension, displayShipName } = this.state
     return (
-      <ResizeSensor onResize={this.handleResize}>
-        <DockPanelCardWrapper elevation={editable ? 2 : 0} interactive={editable}>
-          <Panel>
-            {range(4).map((i) => {
-              const dock = get(constructions, i, { api_state: -1, api_complete_time: 0 })
-              const isInUse = dock.api_state > 0
-              const isLSC = isInUse && dock.api_item1 >= 1000
-              const dockName =
-                dock.api_state == -1
-                  ? this.props.t('main:Locked')
-                  : dock.api_state == 0
-                  ? this.props.t('main:Empty')
-                  : displayShipName
-                  ? this.getDockShipName(i, '???')
-                  : ''
-              const completeTime = isInUse ? dock.api_complete_time : -1
-              const tooltipTitleClassname = isLSC
-                ? { color: '#D9534F', fontWeight: 'bold' }
-                : undefined
-
-              return (
-                <PanelItemTooltip
-                  key={i}
-                  dimension={dimension}
-                  disabled={!isInUse}
-                  position={Position.TOP}
-                  wrapperTagName="div"
-                  className="panel-item-wrapper kdock-item-wrapper"
-                  targetTagName="div"
-                  targetClassName="panel-item kdock-item"
-                  content={
+      <DockPanelCardWrapper elevation={editable ? 2 : 0} interactive={editable}>
+        <Panel>
+          {range(4).map((i) => {
+            const dock = get(constructions, i, { api_state: -1, api_complete_time: 0 })
+            const isInUse = dock.api_state > 0
+            const isLSC = isInUse && dock.api_item1 >= 1000
+            const dockName =
+              dock.api_state == -1
+                ? this.props.t('main:Locked')
+                : dock.api_state == 0
+                ? this.props.t('main:Empty')
+                : this.getDockShipName(i, '???')
+            const completeTime = isInUse ? dock.api_complete_time : -1
+            const tooltipTitleClassname = isLSC
+              ? { color: '#D9534F', fontWeight: 'bold' }
+              : undefined
+
+            return (
+              <PanelItemTooltip
+                key={i}
+                disabled={!isInUse}
+                position={Position.TOP}
+                wrapperTagName="div"
+                className="panel-item-wrapper kdock-item-wrapper"
+                targetTagName="div"
+                targetClassName="panel-item kdock-item"
+                content={
+                  <>
+                    {
+                      <span style={tooltipTitleClassname}>
+                        {dockName}
+                        <br />
+                      </span>
+                    }
+                    {map(materials, (id, index) => (
+                      <span key={id}>
+                        <MaterialIcon materialId={id} className="material-icon" />
+                        {dock[`api_item${index + 1}`]}
+                      </span>
+                    ))}
+                  </>
+                }
+              >
+                <DockInnerWrapper>
+                  {enableAvatar && (
                     <>
-                      {
-                        <span style={tooltipTitleClassname}>
-                          {dockName}
-                          <br />
-                        </span>
-                      }
-                      {map(materials, (id, index) => (
-                        <span key={id}>
-                          <MaterialIcon materialId={id} className="material-icon" />
-                          {dock[`api_item${index + 1}`]}
-                        </span>
-                      ))}
+                      {dock.api_state > 0 ? (
+                        <Avatar
+                          height={20}
+                          mstId={get(constructions, [i, 'api_created_ship_id'])}
+                        />
+                      ) : (
+                        <EmptyDock state={dock.api_state} />
+                      )}
                     </>
-                  }
-                >
-                  <DockInnerWrapper>
-                    {enableAvatar && (
-                      <>
-                        {dock.api_state > 0 ? (
-                          <Avatar
-                            height={20}
-                            mstId={get(constructions, [i, 'api_created_ship_id'])}
-                          />
-                        ) : (
-                          <EmptyDock state={dock.api_state} />
-                        )}
-                      </>
-                    )}
-                    <DockName className="kdock-name">{dockName}</DockName>
-                    <CountdownNotifierLabel
-                      timerKey={`kdock-${i + 1}`}
-                      completeTime={completeTime}
-                      isLSC={isLSC}
-                      getLabelStyle={getTagIntent}
-                      getNotifyOptions={() =>
-                        canNotify &&
-                        completeTime >= 0 && {
-                          ...this.constructor.basicNotifyConfig,
-                          args: dockName,
-                          completeTime: completeTime,
-                        }
+                  )}
+                  <DockName className="kdock-name">{dockName}</DockName>
+                  <CountdownNotifierLabel
+                    timerKey={`kdock-${i + 1}`}
+                    completeTime={completeTime}
+                    isLSC={isLSC}
+                    getLabelStyle={getTagIntent}
+                    getNotifyOptions={() =>
+                      canNotify &&
+                      completeTime >= 0 && {
+                        ...this.constructor.basicNotifyConfig,
+                        args: dockName,
+                        completeTime: completeTime,
                       }
-                      isActive={isActive}
-                    />
-                  </DockInnerWrapper>
-                </PanelItemTooltip>
-              )
-            })}
-          </Panel>
-          <Watermark>
-            <FA name="industry" />
-          </Watermark>
-        </DockPanelCardWrapper>
-      </ResizeSensor>
+                    }
+                    isActive={isActive}
+                  />
+                </DockInnerWrapper>
+              </PanelItemTooltip>
+            )
+          })}
+        </Panel>
+        <Watermark>
+          <FA name="industry" />
+        </Watermark>
+      </DockPanelCardWrapper>
     )
   }
 }
diff --git a/views/components/main/parts/expedition-panel.es b/views/components/main/parts/expedition-panel.es
@@ -7,7 +7,7 @@ import { connect } from 'react-redux'
 import { withNamespaces } from 'react-i18next'
 import i18next from 'views/env-parts/i18next'
 import { Position, Intent, Tooltip } from '@blueprintjs/core'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import { CountdownNotifierLabel } from './countdown-timer'
 import {

diff --git a/views/components/main/parts/mini-ship/index.es b/views/components/main/parts/mini-ship/index.es
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 import { get, memoize } from 'lodash'
 import { createSelector } from 'reselect'
 import { Button, ResizeSensor } from '@blueprintjs/core'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { PaneBodyMini, LBViewMini } from './mini-ship-pane'
 import { LandbaseButton } from '../../../ship-parts/landbase-button'

diff --git a/views/components/main/parts/mini-ship/mini-ship-item.es b/views/components/main/parts/mini-ship/mini-ship-item.es
@@ -8,7 +8,7 @@ import { isEqual, pick, omit, memoize, get } from 'lodash'
 import FontAwesome from 'react-fontawesome'
 import { withNamespaces } from 'react-i18next'
 import { Tag, ProgressBar, Intent, Position, Tooltip } from '@blueprintjs/core'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import { StatusLabel } from 'views/components/ship-parts/statuslabel'
 import { LandbaseSlotitems } from 'views/components/ship/slotitems'

diff --git a/views/components/main/parts/mini-ship/mini-ship-pane.es b/views/components/main/parts/mini-ship/mini-ship-pane.es
@@ -5,7 +5,7 @@ import React, { Fragment } from 'react'
 import { get } from 'lodash'
 import { withNamespaces } from 'react-i18next'
 import { compose } from 'redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { FleetStat } from 'views/components/ship-parts/fleet-stat'
 import ScrollShadow from 'views/components/etc/scroll-shadow'