diff --git a/src/main.tsx b/src/main.tsx index 1b20c8fc..9aa30187 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -47,6 +47,10 @@ function isBlank(s : string) : boolean { return (s == null || s == ""); } +function makeExternLink(url : string) : string { + return "https://extern?" + encodeURIComponent(url); +} + function getTodayStr() : string { return getDateStr(new Date()); } @@ -2131,6 +2135,7 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> { setSize_debounced : (width : number, height : number) => void; renderMode : OV = mobx.observable.box("normal", {name: "renderMode"}); + shareCopied : OV = mobx.observable.box(false, {name: "sw-shareCopied"}); constructor(props : any) { super(props); @@ -2217,6 +2222,19 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> { ); } + @boundMethod + copyShareLink() : void { + console.log("copy-share-link"); + mobx.action(() => { + this.shareCopied.set(true); + })(); + setTimeout(() => { + mobx.action(() => { + this.shareCopied.set(false); + })(); + }, 600) + } + render() { let {screen} = this.props; let win = this.getScreenLines(); @@ -2252,6 +2270,15 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> { + +
+ + + 0}> @@ -2392,7 +2419,9 @@ class ScreenTabs extends React.Component<{session : Session}, {}> {
this.handleSwitchScreen(screen.screenId)} onContextMenu={(event) => this.openScreenSettings(event, screen)}> - {screen.name.get()} + + + {screen.name.get()}
{renderCmdText(String(index+1))}
this.openScreenSettings(e, screen)} title="Settings" className="tab-gear">
diff --git a/src/model.ts b/src/model.ts index ac7febf3..3e38b945 100644 --- a/src/model.ts +++ b/src/model.ts @@ -5,7 +5,7 @@ import {debounce} from "throttle-debounce"; import {handleJsonFetchResponse, base64ToArray, genMergeData, genMergeDataMap, genMergeSimpleData, boundInt, isModKeyPress} from "./util"; import {TermWrap} from "./term"; import {v4 as uuidv4} from "uuid"; -import type {SessionDataType, LineType, RemoteType, HistoryItem, RemoteInstanceType, RemotePtrType, CmdDataType, FeCmdPacketType, TermOptsType, RemoteStateType, ScreenDataType, ScreenOptsType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, UIContextType, HistoryInfoType, HistoryQueryOpts, FeInputPacketType, TermWinSize, RemoteInputPacketType, FeStateType, ContextMenuOpts, RendererContext, RendererModel, PtyDataType, BookmarkType, ClientDataType, HistoryViewDataType, AlertMessageType, HistorySearchParams, FocusTypeStrs, ScreenLinesType, HistoryTypeStrs, RendererPluginType, WindowSize, ClientMigrationInfo} from "./types"; +import type {SessionDataType, LineType, RemoteType, HistoryItem, RemoteInstanceType, RemotePtrType, CmdDataType, FeCmdPacketType, TermOptsType, RemoteStateType, ScreenDataType, ScreenOptsType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, UIContextType, HistoryInfoType, HistoryQueryOpts, FeInputPacketType, TermWinSize, RemoteInputPacketType, FeStateType, ContextMenuOpts, RendererContext, RendererModel, PtyDataType, BookmarkType, ClientDataType, HistoryViewDataType, AlertMessageType, HistorySearchParams, FocusTypeStrs, ScreenLinesType, HistoryTypeStrs, RendererPluginType, WindowSize, ClientMigrationInfo, WebShareOpts} from "./types"; import {WSControl} from "./ws"; import {measureText, getMonoFontSize} from "./textmeasure"; import dayjs from "dayjs"; @@ -315,6 +315,8 @@ class Screen { setAnchor_debounced : (anchorLine : number, anchorOffset : number) => void; terminals : Record = {}; // cmdid => TermWrap renderers : Record = {}; // cmdid => RendererModel + shareMode : OV; + webShareOpts : OV; constructor(sdata : ScreenDataType) { this.sessionId = sdata.sessionid; @@ -331,11 +333,17 @@ class Screen { } this.termLineNumFocus = mobx.observable.box(0, {name: "termLineNumFocus"}); this.curRemote = mobx.observable.box(sdata.curremote, {name: "screen-curRemote"}); + this.shareMode = mobx.observable.box(sdata.sharemode, {name: "screen-shareMode"}); + this.webShareOpts = mobx.observable.box(sdata.webshareopts, {name: "screen-webShareOpts"}); } dispose() { } + isWebShare() : boolean { + return this.shareMode.get() == "web"; + } + mergeData(data : ScreenDataType) { if (data.sessionid != this.sessionId || data.screenid != this.screenId) { throw new Error("invalid screen update, ids don't match") @@ -350,6 +358,8 @@ class Screen { this.selectedLine.set(data.selectedline); this.focusType.set(data.focustype); this.refocusLine(data, oldFocusType, oldSelectedLine); + this.shareMode.set(data.sharemode); + this.webShareOpts.set(data.webshreopts); // do not update anchorLine/anchorOffset (only stored) })(); } @@ -2252,7 +2262,7 @@ class BookmarksModel { mobx.action(() => { this.copiedIndicator.set(null); })(); - }, 600) + }, 600); } mergeBookmarks(bmArr : BookmarkType[]) : void { diff --git a/src/sh2.less b/src/sh2.less index 6b7963c8..e2d9fc8c 100644 --- a/src/sh2.less +++ b/src/sh2.less @@ -131,6 +131,45 @@ body::-webkit-scrollbar { } } + .share-tag { + color: #ccc; + position: absolute; + top: 0; + left: 0; + background-color: darken(rgb(0, 177, 10), 20%); + padding: 2px 8px 2px 4px; + z-index: 11; + font-size: 12px; + border-bottom-right-radius: 5px; + + .share-tag-link { + display: none; + } + + &:hover { + padding: 20px; + + .share-tag-link { + display: block; + a { + color: #ccc; + } + } + + .share-tag-link a:hover { + color: white; + } + + .share-tag-link i:hover { + color: white; + } + + .share-tag-link i { + cursor: pointer; + } + } + } + .window-empty { display: flex; align-items: center; @@ -585,24 +624,6 @@ body::-webkit-scrollbar { max-height: 68px; } - .copied-indicator { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: white; - opacity: 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - pointer-events: none; - .mono-font(12px); - animation-name: fade-in-out; - animation-duration: 0.3s; - } - .use-button { flex-grow: 0; padding: 3px; @@ -2397,6 +2418,12 @@ input[type=checkbox] { background-color: @tab-black; } } + + .web-share-icon { + position: relative; + top: 1px; + margin-right: 3px; + } } .monofont-thin { @@ -3102,3 +3129,21 @@ input[type=checkbox] { padding: 4px 4px 4px 6px; } } + +.copied-indicator { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: white; + opacity: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + pointer-events: none; + .mono-font(12px); + animation-name: fade-in-out; + animation-duration: 0.3s; +} diff --git a/src/types.ts b/src/types.ts index 25944565..0451d69c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -481,4 +481,4 @@ type HistorySearchParams = { type RenderModeType = "normal" | "collapsed"; -export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdStartPacketType, CmdDataType, ScreenDataType, ScreenOptsType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, RemotePtrType, UIContextType, HistoryInfoType, HistoryQueryOpts, WatchScreenPacketType, TermWinSize, FeInputPacketType, RemoteInputPacketType, RemoteEditType, FeStateType, ContextMenuOpts, RendererContext, WindowSize, RendererModel, PtyDataType, BookmarkType, ClientDataType, PlaybookType, PlaybookEntryType, HistoryViewDataType, RenderModeType, AlertMessageType, HistorySearchParams, ScreenLinesType, FocusTypeStrs, HistoryTypeStrs, RendererOpts, RendererPluginType, SimpleBlobRendererComponent, RendererModelContainerApi, RendererModelInitializeParams, RendererOptsUpdate, ClientMigrationInfo}; +export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdStartPacketType, CmdDataType, ScreenDataType, ScreenOptsType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, RemotePtrType, UIContextType, HistoryInfoType, HistoryQueryOpts, WatchScreenPacketType, TermWinSize, FeInputPacketType, RemoteInputPacketType, RemoteEditType, FeStateType, ContextMenuOpts, RendererContext, WindowSize, RendererModel, PtyDataType, BookmarkType, ClientDataType, PlaybookType, PlaybookEntryType, HistoryViewDataType, RenderModeType, AlertMessageType, HistorySearchParams, ScreenLinesType, FocusTypeStrs, HistoryTypeStrs, RendererOpts, RendererPluginType, SimpleBlobRendererComponent, RendererModelContainerApi, RendererModelInitializeParams, RendererOptsUpdate, ClientMigrationInfo, WebShareOpts};