@electerm/electerm-react 5.5.9 → 5.5.25

package/client/components/sidebar/sidebar-panel.jsx

@@ -20,7 +20,7 @@ import {
 const e = window.translate
 
 export default memo(function SidebarPanel (props) {
-  const { sidebarPanelTab, pinned } = props
+  const { sidebarPanelTab, pinned, isMobile } = props
   const { store } = window
   const [openSelectModal, setOpenSelectModal] = useState(false)
   const prps = {
@@ -81,6 +81,22 @@ export default memo(function SidebarPanel (props) {
       </Tooltip>
     ]
   }
+  // No pin control on mobile: the panel spans the viewport there, so there is
+  // nothing to dock it beside, and the control row is tight enough that the
+  // pin would crowd the icons it shares it with.
+  function renderPinIcon () {
+    if (isMobile) {
+      return null
+    }
+    return (
+      <Tooltip title={e('pin')}>
+        <PushpinOutlined
+          {...prps1}
+          onClick={store.handlePin}
+        />
+      </Tooltip>
+    )
+  }
   return (
     <div
       className='sidebar-panel bookmarks-panel animate-fast'
@@ -100,12 +116,9 @@ export default memo(function SidebarPanel (props) {
           {
             renderExpandIcons()
           }
-          <Tooltip title={e('pin')}>
-            <PushpinOutlined
-              {...prps1}
-              onClick={store.handlePin}
-            />
-          </Tooltip>
+          {
+            renderPinIcon()
+          }
           <CloseOutlined
             {...prps}
             onClick={store.handleCloseSidebar}

package/client/components/spice/spice-session.jsx

@@ -9,11 +9,10 @@ import {
 import {
   ReloadOutlined
 } from '@ant-design/icons'
-import {
-  Spin
-} from 'antd'
 import * as ls from '../../common/safe-local-storage'
 import RemoteFloatControl from '../common/remote-float-control'
+import RemoteSessionShell from '../common/remote-session-shell'
+import { eventToRemotePos } from '../common/remote-pointer'
 import SwitchLabel from '../common/switch'
 import './spice.styl'
 
@@ -53,24 +52,19 @@ export default class SpiceSession extends PureComponent {
   }
 
   // The spice client sends event.offsetX/offsetY to the remote as-is, but when
-  // the canvas is CSS-scaled (scaleViewport or the lib's maxWidth/maxHeight),
-  // those are display pixels instead of remote surface pixels. On high
-  // resolution remote screens the pointer then only reaches the top-left
-  // region. Convert display coords to surface coords (the canvas box is
-  // letterboxed by object-fit: contain) before the lib's handlers run.
+  // the canvas is CSS-scaled (fit mode), those are display pixels instead of
+  // remote surface pixels. On high resolution remote screens the pointer then
+  // only reaches the top-left region. Convert display coords to surface coords
+  // before the lib's handlers run (same mapping as rdp, see remote-pointer.js).
   handleMouseScaleFix = (e) => {
     const canvas = this.domRef.current?.querySelector('canvas')
     if (!canvas || !canvas.width || !canvas.height) return
-    const rect = canvas.getBoundingClientRect()
-    if (!rect.width || !rect.height) return
-    const scale = Math.min(rect.width / canvas.width, rect.height / canvas.height)
-    const x = (e.clientX - rect.left - (rect.width - canvas.width * scale) / 2) / scale
-    const y = (e.clientY - rect.top - (rect.height - canvas.height * scale) / 2) / scale
+    const { x, y } = eventToRemotePos(e, canvas, canvas.width, canvas.height)
     Object.defineProperty(e, 'offsetX', {
-      value: Math.max(0, Math.min(x, canvas.width - 1))
+      value: x
     })
     Object.defineProperty(e, 'offsetY', {
-      value: Math.max(0, Math.min(y, canvas.height - 1))
+      value: y
     })
   }
 
@@ -123,13 +117,30 @@ export default class SpiceSession extends PureComponent {
   }
 
   calcCanvasSize = () => {
-    const { width, height } = this.props
+    const { width, height } = this.viewSize || {}
+    if (width && height) {
+      return { width, height }
+    }
+    const { width: w, height: h } = this.props
     return {
-      width: width - 10,
-      height: height - 80
+      width: w - 10,
+      height: h - 80
     }
   }
 
+  // fullscreen always fills the screen, the per tab setting only applies
+  // windowed; the switch is not reachable in fullscreen anyway
+  getFit = () => {
+    if (this.props.fullscreen) {
+      return true
+    }
+    return !!this.state.scaleViewport
+  }
+
+  handleViewportResize = (width, height) => {
+    this.viewSize = { width, height }
+  }
+
   handleSendCtrlAltDel = () => {
     if (this.spiceConn && window.spiceHtml5?.sendCtrlAltDel) {
       window.spiceHtml5.sendCtrlAltDel(this.spiceConn)
@@ -163,12 +174,7 @@ export default class SpiceSession extends PureComponent {
     }
   }
 
-  renderControl = () => {
-    const contrlProps = this.getControlProps({
-      fixedPosition: false,
-      showExitFullscreen: false,
-      className: 'mg1l'
-    })
+  renderControlLeft = () => {
     const scaleProps = {
       checked: this.state.scaleViewport,
       onChange: this.handleScaleViewChange,
@@ -176,22 +182,30 @@ export default class SpiceSession extends PureComponent {
       className: 'mg1l'
     }
     return (
-      <div className='pd1 fix session-v-info'>
-        <div className='fleft'>
-          <ReloadOutlined
-            onClick={this.handleReInit}
-            className='mg2r mg1l pointer'
-          />
-          {this.renderInfo()}
-          <SwitchLabel
-            {...scaleProps}
-          />
-        </div>
-        <div className='fright'>
-          {this.props.fullscreenIcon()}
-          <RemoteFloatControl {...contrlProps} />
-        </div>
-      </div>
+      <>
+        <ReloadOutlined
+          onClick={this.handleReInit}
+          className='mg2r mg1l pointer'
+        />
+        {this.renderInfo()}
+        <SwitchLabel
+          {...scaleProps}
+        />
+      </>
+    )
+  }
+
+  renderControlRight = () => {
+    const contrlProps = this.getControlProps({
+      fixedPosition: false,
+      showExitFullscreen: false,
+      className: 'mg1l'
+    })
+    return (
+      <>
+        {this.props.fullscreenIcon()}
+        <RemoteFloatControl {...contrlProps} />
+      </>
     )
   }
 
@@ -298,41 +312,24 @@ export default class SpiceSession extends PureComponent {
   }
 
   render () {
-    const { width: w, height: h } = this.props
-    const { loading, scaleViewport } = this.state
-    const { width: innerWidth, height: innerHeight } = this.calcCanvasSize()
-    const wrapperStyle = {
-      width: innerWidth + 'px',
-      height: innerHeight + 'px',
-      overflow: scaleViewport ? 'hidden' : 'auto'
-    }
-    const cls = `spice-session-wrap session-v-wrap${scaleViewport ? ' scale-viewport' : ''}`
+    const { loading } = this.state
     const contrlProps = this.getControlProps()
-    const sessProps = {
-      className: cls,
-      style: {
-        width: w + 'px',
-        height: h + 'px'
-      }
-    }
     return (
-      <Spin spinning={loading}>
+      <RemoteSessionShell
+        loading={loading}
+        fit={this.getFit()}
+        wrapClassName='spice-session-wrap'
+        onViewportResize={this.handleViewportResize}
+        controlLeft={this.renderControlLeft()}
+        controlRight={this.renderControlRight()}
+        floatControl={<RemoteFloatControl {...contrlProps} />}
+      >
         <div
-          {...sessProps}
-        >
-          {this.renderControl()}
-          <RemoteFloatControl {...contrlProps} />
-          <div
-            style={wrapperStyle}
-            className='spice-scroll-wrapper s-scroll-wrapper'
-          >
-            <div
-              ref={this.domRef}
-              id={this.screenId}
-            />
-          </div>
-        </div>
-      </Spin>
+          className='spice-session-mount'
+          id={this.screenId}
+          ref={this.domRef}
+        />
+      </RemoteSessionShell>
     )
   }
 }

package/client/components/spice/spice.styl

@@ -1,29 +1,20 @@
+// SPICE only styling — the session layout (control bar, viewport, fit mode)
+// lives in the shared remote session shell: common/remote-session-shell.styl
 .spice-session-wrap
-  display: flex
-  flex-direction: column
-  align-items: center
-  .session-v-info
-    position: relative
-    width: 100%
-    z-index: 300
-  &.scale-viewport
-    .spice-scroll-wrapper
+  // fit: the mount box fills the viewport and the canvas (sized by the spice
+  // client to the remote resolution) is scaled to it, keeping the ratio.
+  // !important because the client writes the surface size into the mount box
+  // inline style (`screen_id` height = surface height).
+  &.fit
+    .spice-session-mount
+      width 100% !important
+      height 100% !important
       display flex
       align-items center
       justify-content center
-      > div
-        width 100% !important
-        height 100% !important
-        display flex
-        align-items center
-        justify-content center
       canvas
         width 100% !important
         height 100% !important
         max-width 100% !important
         max-height 100% !important
         object-fit contain
-.spice-scroll-wrapper
-  position relative
-  background var(--main)
-  z-index 299

package/client/components/terminal/shortcut-bar.styl

@@ -81,6 +81,20 @@
     bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px))
   .remote-monitor-bar
     bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px) + 36px)
+  // the right panel stacks on the footer exactly like the monitor bar, so it
+  // needs the same lift. Pinned is excluded: a pinned panel is a full-height
+  // dock and owns bottom 0. Mobile is excluded as well: there the panel is a
+  // full-screen drawer that covers the footer on purpose (mobile.styl).
+  &:not(.is-mobile)
+    .right-side-panel:not(.right-side-panel-pinned)
+      bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px) + 36px)
+  // A pinned panel is still a dock, but it yields to the shortcut bar rather
+  // than the other way round: the bar is z-index 400 and spans the full
+  // viewport width by design (it ignores the left sidebar too), so it would
+  // otherwise paint over the dock's bottom edge. The dock stops above the bar
+  // only — the footer sits beside the dock, not below it.
+  .right-side-panel.right-side-panel-pinned
+    bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px))
   .qm-wrap-tooltip
     bottom calc(var(--footer-stack-height, 36px) + var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px))
 

package/client/components/terminal/unix-timestamp-tooltip.jsx

@@ -1,11 +1,14 @@
 /**
  * Global tooltip that detects Unix timestamps in terminal selections
  * and displays their human-readable date/time near the cursor.
+ * Clicking the tooltip (or its copy icon) copies the formatted string.
  * Registered via refsStatic as 'unix-timestamp-tooltip'.
  */
 
 import { Component } from 'react'
+import { CopyOutlined } from '@ant-design/icons'
 import { refsStatic } from '../common/ref'
+import { copy } from '../../common/clipboard'
 
 export default class UnixTimestampTooltip extends Component {
   state = {
@@ -56,6 +59,24 @@ export default class UnixTimestampTooltip extends Component {
     }
   }
 
+  handleHide = () => {
+    this.setState({ visible: false })
+  }
+
+  /**
+   * Copy on mousedown instead of click: pressing the tooltip collapses the
+   * document selection, and the terminal drops its (DOM backed) selection on
+   * that change, which would unmount this tooltip before a click could land.
+   * preventDefault also keeps the terminal selection and focus untouched.
+   * The whole tooltip is the hit area, the icon is just the affordance.
+   */
+  handleCopy = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    copy(this.state.text)
+    this.handleHide()
+  }
+
   render () {
     const { visible, x, y, text } = this.state
     if (!visible) {
@@ -63,6 +84,10 @@ export default class UnixTimestampTooltip extends Component {
     }
     return (
       <div
+        className='unix-timestamp-tooltip pointer'
+        title={window.translate('copy')}
+        onMouseDown={this.handleCopy}
+        onMouseLeave={this.handleHide}
         style={{
           position: 'fixed',
           left: x,
@@ -73,12 +98,13 @@ export default class UnixTimestampTooltip extends Component {
           borderRadius: 4,
           fontSize: 12,
           whiteSpace: 'nowrap',
-          pointerEvents: 'none',
           transform: 'translateX(-50%)',
+          userSelect: 'none',
           zIndex: 9999
         }}
       >
         {text}
+        <CopyOutlined style={{ marginLeft: 6 }} />
       </div>
     )
   }

package/client/components/terminal-info/terminal-info.styl

@@ -2,6 +2,9 @@
   color var(--text-dark)
   &:hover
     color var(--text)
+  // panel open: stay lit (after :hover so the "on" state survives hovering)
+  &.active
+    color var(--success)
 .terminal-info-section,
 .right-side-panel-content > .remote-monitor-details
   padding 10px 0

package/client/components/theme/terminal-theme-list.styl

@@ -1,3 +1,6 @@
 
 .theme-item.current
   border-left 3px solid var(--success)
+
+.list-item-apply-previewing
+  color var(--success)

package/client/components/theme/theme-ai-editor.jsx

@@ -190,7 +190,7 @@ export default function ThemeAiEditor (props) {
   const textAreaProps = {
     value: description,
     onChange: ev => setDescription(ev.target.value),
-    placeholder: e('createThemeByAI'),
+    placeholder: e('description'),
     autoSize: { minRows: 4, maxRows: 8 },
     disabled: loading || disabled
   }
@@ -223,7 +223,7 @@ export default function ThemeAiEditor (props) {
       <div className='pd1t'>
         <Space>
           <Button {...generateBtnProps}>
-            {e('generate')}
+            {e('submit')}
           </Button>
           <HelpIcon link='https://github.com/electerm/electerm/wiki/Create-theme-by-AI' />
         </Space>

package/client/components/theme/theme-form.jsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react'
-import { Button, Input, Form, Tabs, Flex } from 'antd'
+import { Button, Input, Form, Flex } from 'antd'
 import {
   BgColorsOutlined,
   FontSizeOutlined,
@@ -14,15 +14,16 @@ import {
   validThemeProps,
   requiredThemeProps
 } from '../../common/terminal-theme'
-import { defaultTheme, defaultThemeLight } from '../../common/theme-defaults'
+import { defaultThemeId, defaultThemeLightId } from '../../common/theme-defaults'
 import generate from '../../common/uid'
 import { isAIDisabled } from '../../common/ai-feature'
 import Link from '../common/external-link'
 import InputAutoFocus from '../common/input-auto-focus'
+import ResponsiveTabs from '../common/responsive-tabs'
 import ThemePicker from './theme-editor'
 import ThemeAiEditor from './theme-ai-editor'
 import Upload from '../common/upload'
-// import './theme-form.styl'
+import './theme-form.styl'
 
 const { TextArea } = Input
 const FormItem = Form.Item
@@ -155,6 +156,7 @@ export default function ThemeForm (props) {
         <FormItem>
           <span className='mg1r'>src:</span>
           <Link
+            className='wordbreak'
             to={url}
           >{url}
           </Link>
@@ -270,41 +272,36 @@ export default function ThemeForm (props) {
     themeName,
     themeText: convertThemeToText(props.formData)
   }
-  const isDefaultTheme = id === defaultTheme().id || id === defaultThemeLight().id
+  const isDefaultTheme = id === defaultThemeId || id === defaultThemeLightId
   const disabled = readonly || isDefaultTheme
   const pickerProps = {
     onChange: onPickerChange,
     themeText: txt,
     disabled
   }
+  // icon + label, the label text is hidden by css on narrow screens so the
+  // three editor tabs always fit, the title keeps it discoverable
+  function renderTabLabel (icon, text) {
+    return (
+      <span className='theme-editor-tab' title={text}>
+        {icon}
+        <span className='theme-editor-tab-text'>{text}</span>
+      </span>
+    )
+  }
   const tabItems = [
     {
       key: 'theme-editor-color-picker',
-      label: (
-        <span>
-          <BgColorsOutlined className='mg1r' />
-          {e('editWithColorPicker')}
-        </span>
-      )
+      label: renderTabLabel(<BgColorsOutlined className='mg1r' />, e('editWithColorPicker'))
     },
     {
       key: 'theme-editor-txt',
-      label: (
-        <span>
-          <FontSizeOutlined className='mg1r' />
-          {e('editWithTextEditor')}
-        </span>
-      )
+      label: renderTabLabel(<FontSizeOutlined className='mg1r' />, e('editWithTextEditor'))
     },
     ...(!isAIDisabled()
       ? [{
           key: 'theme-editor-ai',
-          label: (
-            <span>
-              <RobotOutlined className='mg1r' />
-              AI
-            </span>
-          )
+          label: renderTabLabel(<RobotOutlined className='mg1r' />, 'AI')
         }]
       : [])
   ]
@@ -365,7 +362,7 @@ export default function ThemeForm (props) {
             </Button>
           </Upload>
         </Flex>
-        <Tabs {...tabsProps} />
+        <ResponsiveTabs {...tabsProps} />
         {
           editor === 'theme-editor-txt'
             ? renderTxt()

package/client/components/theme/theme-form.styl

@@ -1,10 +1,8 @@
-.theme-editor-txt
-  .editor-u-textarea
-    display block !important
-  .editor-u-picker
-    display none !important
-.theme-editor-color-picker
-  .editor-u-textarea
-    display none !important
-  .editor-u-picker
-    display block !important
+// setting panel > UI themes > theme form
+//
+// The three editor tabs need ~395px for their translated labels ("Edit with
+// color picker" / "Edit with text editor" / "AI") while a 320px phone leaves
+// the panel only ~257px. Below the app's mobile breakpoint (600px, see
+// constants.js) ResponsiveTabs replaces the bar with a single "current tab +
+// dropdown" selector (common/responsive-tabs.jsx), so the labels stay readable
+// everywhere instead of being collapsed to icons.

package/client/components/theme/theme-list-item.jsx

@@ -2,13 +2,13 @@
  * theme list render
  */
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   CheckCircleOutlined,
+  CloseOutlined,
   PlusOutlined,
   SunOutlined,
-  MoonOutlined,
-  EyeOutlined
+  MoonOutlined
 } from '@ant-design/icons'
 import { Tag, Tooltip, Button, Space } from 'antd'
 import classnames from 'classnames'
@@ -30,46 +30,72 @@ export default function ThemeListItem (props) {
   const [tooltipVisible, setTooltipVisible] = useState(false)
   const [isPreviewing, setIsPreviewing] = useState(false)
 
-  function handleClickApply () {
-    setTooltipVisible(false)
-    setIsPreviewing(false)
-    delete window.originalTheme
+  function startPreview () {
+    // keep the very first original, hopping between themes must never
+    // overwrite it with a theme that is itself only a preview
+    if (!window.originalTheme) {
+      window.originalTheme = store.config.theme
+    }
     store.setTheme(item.id)
+    setIsPreviewing(true)
   }
 
-  function handleClickPreview () {
-    if (!isPreviewing) {
-      // Store current theme ID before changing
-      const currentTheme = window.store.config.theme
-      window.originalTheme = currentTheme
-      // Apply the preview theme
-      store.setTheme(item.id)
-      setIsPreviewing(true)
+  function cancelPreview () {
+    if (window.originalTheme) {
+      store.setTheme(window.originalTheme)
+      delete window.originalTheme
     }
+    setIsPreviewing(false)
   }
 
-  function handleTooltipVisibleChange (visible) {
-    setTooltipVisible(visible)
-    if (!visible && isPreviewing) {
-      // Restore original theme when tooltip closes during preview
+  useEffect(() => {
+    return () => {
+      // leaving the list mid preview (switching settings tab, filtering the
+      // list, ...) must not leave the user stuck on a theme never applied
       if (window.originalTheme) {
         store.setTheme(window.originalTheme)
         delete window.originalTheme
       }
-      setIsPreviewing(false)
+    }
+  }, [])
+
+  function handleClickApply () {
+    delete window.originalTheme
+    setIsPreviewing(false)
+    setTooltipVisible(false)
+    store.setTheme(item.id)
+  }
+
+  function handleClickCancel () {
+    cancelPreview()
+    setTooltipVisible(false)
+  }
+
+  function handleTooltipVisibleChange (visible) {
+    setTooltipVisible(visible)
+    // opening the popup is the preview itself; every other way of closing it
+    // (click elsewhere, esc, clicking the icon again) rolls the preview back
+    if (visible) {
+      startPreview()
+    } else {
+      cancelPreview()
     }
   }
 
+  function handleClickApplyIcon (e) {
+    // previewing must not also load the theme into the edit form
+    e.stopPropagation()
+  }
+
   function renderTooltipContent () {
     return (
       <Space.Compact>
         <Button
           size='small'
-          icon={<EyeOutlined />}
-          onClick={handleClickPreview}
-          type={isPreviewing ? 'primary' : 'default'}
+          icon={<CloseOutlined />}
+          onClick={handleClickCancel}
         >
-          {e('preview')}
+          {e('cancel')}
         </Button>
         <Button
           size='small'
@@ -96,7 +122,15 @@ export default function ThemeListItem (props) {
         placement='top'
       >
         <CheckCircleOutlined
-          className='pointer list-item-apply'
+          className={
+            classnames(
+              'pointer list-item-apply',
+              {
+                'list-item-apply-previewing': isPreviewing
+              }
+            )
+          }
+          onClick={handleClickApplyIcon}
         />
       </Tooltip>
     )