diff --git a/.storybook/examples/basic/resize.stories.tsx b/.storybook/examples/basic/resize.stories.tsx index dc58eab..7edf99d 100644 --- a/.storybook/examples/basic/resize.stories.tsx +++ b/.storybook/examples/basic/resize.stories.tsx @@ -74,6 +74,7 @@ export const ResizeSheets = () => { sheetResize: "horizontal", sheetHeight: 500, sheetWidth: 500, + showFormulaBar: false, }} /> @@ -95,6 +96,7 @@ export const ResizeSheets = () => { sheetResize: "none", sheetHeight: 500, sheetWidth: 500, + showFormulaBar: false, }} /> diff --git a/e2e/search.spec.ts b/e2e/search.spec.ts index fb584c6..67454e3 100644 --- a/e2e/search.spec.ts +++ b/e2e/search.spec.ts @@ -3,14 +3,14 @@ import { test, expect } from '@playwright/test'; test('search and next', async ({ page }) => { await page.goto('http://localhost:5233/iframe.html?id=basic--large&viewMode=story'); - const searchBox = page.locator('.gs-searchbox'); + const searchBar = page.locator('.gs-search-bar'); const progress = page.locator('.gs-search-progress'); - expect(await searchBox.count()).toBe(0); + expect(await searchBar.count()).toBe(0); await page.keyboard.down('Control'); await page.keyboard.press('f'); - expect(await searchBox.count()).toBe(1); + expect(await searchBar.count()).toBe(1); expect(await progress.textContent()).toBe('0 / 0'); await page.keyboard.up('Control'); @@ -44,5 +44,5 @@ test('search and next', async ({ page }) => { expect(await a1000.getAttribute('class')).toContain('gs-choosing'); await page.keyboard.press('Escape'); - expect(await searchBox.count()).toBe(0); + expect(await searchBar.count()).toBe(0); }); diff --git a/src/components/GridSheet.tsx b/src/components/GridSheet.tsx index 23f1f1b..1f36482 100644 --- a/src/components/GridSheet.tsx +++ b/src/components/GridSheet.tsx @@ -15,7 +15,6 @@ import { functions } from '../formula/mapping'; import { Context } from '../store'; import { reducer as defaultReducer } from '../store/actions'; -import { SearchBox } from './SearchBox'; import { Editor } from './Editor'; import { StoreInitializer } from './StoreInitializer'; import { Resizer } from './Resizer'; @@ -28,6 +27,7 @@ import { x2c, y2r } from '../lib/converters'; import { embedStyle } from '../styles/embedder'; import { useSheetContext } from './SheetProvider'; import { FormulaBar } from './FormulaBar'; +import { SearchBar } from './SearchBar'; export function GridSheet({ initialCells: initialData, @@ -42,7 +42,7 @@ export function GridSheet({ const [prevSheetName, setPrevSheetName] = React.useState(sheetName); const rootRef = React.useRef(null); const mainRef = React.useRef(null); - const searchInputRef = React.useRef(null); + const searchInputRef = React.useRef(null); const editorRef = React.useRef(null); const largeEditorRef = React.useRef(null); const tabularRef = React.useRef(null); @@ -114,6 +114,7 @@ export function GridSheet({ entering: false, matchingCells: [], matchingCellIndex: 0, + searchCaseSensitive: false, editingOnEnter: true, showAddress: true, contextMenuPosition: { y: -1, x: -1 }, @@ -176,8 +177,7 @@ export function GridSheet({ return (
- {showFormulaBar && } - + {typeof store.searchQuery === 'undefined' ? showFormulaBar && : }
{ + const { store, dispatch } = React.useContext(Context); + const { + rootRef, + editorRef, + searchInputRef, + tabularRef, + searchQuery, + searchCaseSensitive, + matchingCellIndex, + matchingCells, + table, + } = store; + + const matchingCell = matchingCells[matchingCellIndex]; + React.useEffect(() => { + if (!matchingCell) { + return; + } + const point = a2p(matchingCell); + if (typeof point === 'undefined') { + return; + } + smartScroll(table, tabularRef.current, point); + }, [searchQuery, matchingCellIndex, searchCaseSensitive]); + + if (typeof searchQuery === 'undefined') { + return null; + } + if (rootRef.current === null) { + return null; + } + return ( + + ); +}; diff --git a/src/components/SearchBox.tsx b/src/components/SearchBox.tsx deleted file mode 100644 index 31974cc..0000000 --- a/src/components/SearchBox.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { a2p } from '../lib/converters'; -import React from 'react'; - -import { Context } from '../store'; -import { setSearchQuery, search } from '../store/actions'; -import { smartScroll } from '../lib/virtualization'; -import { Fixed } from './Fixed'; - -export const SearchBox: React.FC = () => { - const { store, dispatch } = React.useContext(Context); - const { rootRef, editorRef, searchInputRef, tabularRef, searchQuery, matchingCellIndex, matchingCells, table } = - store; - - const matchingCell = matchingCells[matchingCellIndex]; - React.useEffect(() => { - if (!matchingCell) { - return; - } - const point = a2p(matchingCell); - if (typeof point === 'undefined') { - return; - } - smartScroll(table, tabularRef.current, point); - }, [searchQuery, matchingCellIndex]); - - if (typeof searchQuery === 'undefined') { - return null; - } - if (rootRef.current === null) { - return null; - } - const diff = rootRef.current.offsetLeft + rootRef.current.offsetWidth - window.innerWidth; - return ( - 0 ? diff : 20, - }} - > -
- dispatch(setSearchQuery(e.target.value))} - onKeyDown={(e) => { - if (e.key === 'Escape') { - const el = editorRef?.current; - if (el) { - el.focus(); - } - dispatch(setSearchQuery(undefined)); - } - if (e.key === 'f' && (e.ctrlKey || e.metaKey)) { - e.preventDefault(); - return false; - } - if (e.key !== 'Enter') { - return true; - } - - dispatch(search(e.shiftKey ? -1 : 1)); - return false; - }} - /> -
{ - const input = e.currentTarget.previousSibling as HTMLInputElement; - input?.nodeName === 'INPUT' && input.focus(); - }} - > - {matchingCells.length === 0 ? 0 : matchingCellIndex + 1} / {matchingCells.length} -
-
- - - ); -}; diff --git a/src/components/svg/Base.tsx b/src/components/svg/Base.tsx new file mode 100644 index 0000000..95d1131 --- /dev/null +++ b/src/components/svg/Base.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +export interface IconProps { + style?: React.CSSProperties; + color?: string; + size?: number; +} + +interface BaseProps extends IconProps { + children?: React.ReactNode; +} + +// https://tabler.io/icons + +export const Base = ({ style, size = 24, children }: BaseProps) => { + return ( + + {children} + + ); +}; diff --git a/src/components/svg/CloseIcon.tsx b/src/components/svg/CloseIcon.tsx new file mode 100644 index 0000000..554aa29 --- /dev/null +++ b/src/components/svg/CloseIcon.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { type IconProps, Base } from './Base'; + +// https://tabler.io/icons + +export const CloseIcon = ({ style, color = 'none', size = 24 }: IconProps) => { + return ( + + + + + + ); +}; diff --git a/src/components/svg/SearchIcon.tsx b/src/components/svg/SearchIcon.tsx new file mode 100644 index 0000000..488f887 --- /dev/null +++ b/src/components/svg/SearchIcon.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { type IconProps, Base } from './Base'; + +// https://tabler.io/icons + +export const SearchIcon = ({ style, color = 'none', size = 24 }: IconProps) => { + return ( + + + + + + ); +}; diff --git a/src/store/actions.ts b/src/store/actions.ts index 4d02b92..a228dd5 100644 --- a/src/store/actions.ts +++ b/src/store/actions.ts @@ -62,6 +62,19 @@ class SetSearchQueryAction extends CoreAction { } export const setSearchQuery = new SetSearchQueryAction().bind(); +class SetSearchCaseSensitiveAction extends CoreAction { + reduce(store: StoreType, payload: T): StoreType { + const searchCaseSensitive = payload; + const { table } = store; + return { + ...store, + ...initSearchStatement(table, { ...store, searchCaseSensitive }), + searchCaseSensitive, + }; + } +} +export const setSearchCaseSensitive = new SetSearchCaseSensitiveAction().bind(); + class SetEditingCellAction extends CoreAction { reduce(store: StoreType, payload: T): StoreType { return { diff --git a/src/store/helpers.ts b/src/store/helpers.ts index 0e7ca62..0322a53 100644 --- a/src/store/helpers.ts +++ b/src/store/helpers.ts @@ -62,7 +62,7 @@ export const shouldTracking = (operation: string) => { }; export const initSearchStatement = (table: Table, store: StoreType) => { - const { searchQuery } = store; + const { searchQuery, searchCaseSensitive } = store; let { choosing } = store; if (!searchQuery) { return { matchingCells: [] }; @@ -70,8 +70,10 @@ export const initSearchStatement = (table: Table, store: StoreType) => { const matchingCells: Address[] = []; for (let y = 1; y <= table.bottom; y++) { for (let x = 1; x <= table.right; x++) { - const s = table.stringify({ y, x }, undefined, true); - if (s.indexOf(searchQuery) !== -1) { + const v = table.stringify({ y, x }, undefined, true); + const s = searchCaseSensitive ? v : v.toLowerCase(); + const q = searchCaseSensitive ? searchQuery : searchQuery.toLowerCase(); + if (s.indexOf(q) !== -1) { matchingCells.push(`${x2c(x)}${y2r(y)}`); } } diff --git a/src/styles/editor.less b/src/styles/editor.less index 2a6beab..34273a3 100644 --- a/src/styles/editor.less +++ b/src/styles/editor.less @@ -80,10 +80,10 @@ .gs-selecting-address { display: table-cell; vertical-align: middle; - width: 50px; + width: 60px; color: rgba(200, 200, 200); font-size: 13px; - padding-left: 5px; + text-align: center; } .gs-fx { @@ -95,6 +95,7 @@ font-family: cursive; text-align: center; border-left: solid 1px rgba(128, 128, 128, 0.5); + font-size: 15px; } .gs-editor-hl { z-index: 0; diff --git a/src/styles/minified.ts b/src/styles/minified.ts index 95db45a..85251c6 100644 --- a/src/styles/minified.ts +++ b/src/styles/minified.ts @@ -1,3 +1,3 @@ // yarn generate-style -export const LAST_MODIFIED = 1731597252; -export const CSS = `.gs-root1{display:inline-block;max-width:100%;overflow:auto;font-family:"SF Pro Text","SF Pro Icons","Helvetica Neue",Helvetica,Arial,Meiryo,sans-serif}.gs-root1 .gs-main{overflow:hidden;position:relative;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box}.gs-root1 .gs-resizing{width:100%;height:100%;position:absolute;background-color:rgba(0,127,255,.08);top:0;left:0;z-index:2}.gs-root1 .gs-line{position:relative;top:0;left:0;border:dotted 1px #07f;box-sizing:border-box}.gs-root1 .gs-line span{font-size:10px;padding:3px;background-color:#07f;color:#fff;margin:0;position:absolute;top:0;left:0}.gs-fixed{position:fixed;top:0;left:0;z-index:1}.gs-root1[data-mode=light]{background-color:#e2e2e2;color:#000}.gs-root1[data-mode=light] .gs-main{background-color:#e2e2e2;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd}.gs-root1[data-mode=light] .gs-tabular{background-color:#e2e2e2}.gs-root1[data-mode=light] .gs-formula-bar{background-color:#efefef}.gs-root1[data-mode=light] .gs-formula-bar-editor-inner{color:#555}.gs-root1[data-mode=light] .gs-cell{border-top:solid 1px #ddd;border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-adjuster{background-color:#ddd}.gs-root1[data-mode=light] .gs-tabular-inner{background-color:#f7f7f7}.gs-root1[data-mode=light] .gs-th{background-color:#efefef;color:#666}.gs-root1[data-mode=light] .gs-th.gs-selecting{background-color:#d2d2d2}.gs-root1[data-mode=light] .gs-th.gs-choosing{background-color:#bbb}.gs-root1[data-mode=light] .gs-th.gs-th-selecting{background-color:#555;color:#fff}.gs-root1[data-mode=light] .gs-th-top .gs-th-inner{border-top:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-top .gs-th-inner-wrap{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left .gs-th-inner{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left .gs-th-inner-wrap{border-top:solid 1px #ddd}.gs-editor[data-mode=light].gs-editing textarea{caret-color:#000}.gs-editor[data-mode=light].gs-editing .gs-editor-hl{background-color:#f7f7f7;color:#000}.gs-root1[data-mode=dark]{background-color:#5a5a5a;color:#eee}.gs-root1[data-mode=dark] .gs-main{background-color:#3f3f3f;border-right:solid 1px #5a5a5a;border-bottom:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-tabular{background-color:#3f3f3f}.gs-root1[data-mode=dark] .gs-formula-bar{background-color:#4f4f4f}.gs-root1[data-mode=dark] .gs-formula-bar-editor-inner{color:#bbb}.gs-root1[data-mode=dark] .gs-cell{border-top:solid 1px #5a5a5a;border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-adjuster{background-color:#5a5a5a}.gs-root1[data-mode=dark] .gs-tabular-inner{background-color:#212121}.gs-root1[data-mode=dark] .gs-large-editor textarea{color:#eee;caret-color:#eee}.gs-root1[data-mode=dark] .gs-th{background-color:#4f4f4f;color:#eee}.gs-root1[data-mode=dark] .gs-th.gs-selecting{background-color:#606060}.gs-root1[data-mode=dark] .gs-th.gs-choosing{background-color:#777}.gs-root1[data-mode=dark] .gs-th.gs-th-selecting{background-color:#aaa;color:#444}.gs-root1[data-mode=dark] .gs-th-top .gs-th-inner{border-top:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-top .gs-th-inner-wrap{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left .gs-th-inner{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left .gs-th-inner-wrap{border-top:solid 1px #5a5a5a}.gs-editor[data-mode=dark].gs-editing textarea{caret-color:#eee}.gs-editor[data-mode=dark].gs-editing .gs-editor-hl{background-color:#212121;color:#eee}.gs-cell{padding:0;margin:0;box-sizing:border-box;position:relative;font-size:13px;letter-spacing:1px;line-height:24px}.gs-cell .gs-cell-inner-wrap.gs-selecting{background-color:rgba(0,128,255,.2)}.gs-cell.gs-copying textarea:focus{outline:solid 1px #07f}.gs-cell.gs-selecting{z-index:1}.gs-cell.gs-selecting .gs-cell-inner{background-color:rgba(0,128,255,.2)}.gs-cell.gs-selecting .gs-cell-label{display:block}.gs-cell.gs-choosing{margin-top:-1px;margin-left:-1px;z-index:1}.gs-cell.gs-choosing.gs-editing{color:transparent}.gs-cell.gs-choosing .gs-cell-label{display:block}.gs-cell .gs-formula-error-triangle{position:absolute;top:0;right:0;border-top:3px solid rgba(200,0,0,.9);border-right:3px solid rgba(200,0,0,.9);border-bottom:3px solid transparent;border-left:3px solid transparent;z-index:1}.gs-cell .gs-cell-label{font-size:8px;font-weight:400;font-style:normal;font-family:math,monospace,serif;letter-spacing:1px;line-height:14px;position:absolute;top:0;right:0;background-color:rgba(0,128,255,.2);color:rgba(255,255,255,.6);padding:0 2px;display:none;opacity:.7}.gs-cell .gs-cell-inner-wrap{width:100%;height:100%;position:absolute;top:0;left:0}.gs-cell .gs-cell-inner{width:100%;height:100%;overflow:hidden;display:flex;box-sizing:border-box;border:none!important}.gs-cell .gs-cell-rendered{overflow:hidden;white-space:pre-wrap;cursor:auto;word-wrap:break-word;word-break:break-all;padding:0 2px}.gs-cell .gs-cell-rendered>*{position:relative}.gs-cell .gs-cell-rendered>.backface{z-index:0}.gs-cell .gs-autofill-drag{background-color:#07f;position:absolute;width:7px;height:7px;bottom:0;right:0;margin-right:-3.5px;margin-bottom:-3.5px;cursor:crosshair;z-index:1}.gs-th[data-x="1"] .gs-th-inner-wrap{border-left:none}.gs-th[data-y="1"] .gs-th-inner-wrap{border-top:none}.gs-cell[data-x="1"]{border-left:none}.gs-cell[data-y="1"]{border-top:none}.gs-contextmenu-modal{width:100%;height:100vh;z-index:3}.gs-contextmenu{z-index:3;position:fixed;background-color:#fff;padding:5px 0;border-radius:5px;box-shadow:rgba(60,64,67,.3) 0 1px 2px 0,rgba(60,64,67,.15) 0 1px 3px 1px}.gs-contextmenu ul{min-width:250px;color:#555;margin:0;padding:0}.gs-contextmenu li{padding:5px 10px;list-style-type:none;display:flex}.gs-contextmenu li.gs-enabled{cursor:pointer}.gs-contextmenu li.gs-enabled:hover{background-color:#eee}.gs-contextmenu li.gs-disabled{opacity:.5;cursor:not-allowed}.gs-contextmenu li.gs-menu-divider{background-color:#aaa;margin:10px 0;padding:0;height:1px}.gs-contextmenu li .gs-menu-name{flex:1;font-size:15px;letter-spacing:1px}.gs-contextmenu li .gs-menu-shortcut{font-size:10px;line-height:15px;color:#999;width:15px}.gs-contextmenu li .gs-menu-shortcut:before{content:"("}.gs-contextmenu li .gs-menu-shortcut:after{content:")"}.gs-contextmenu li .gs-menu-shortcut .gs-menu-underline{text-decoration:underline}.gs-editor-hl{padding:0 2px!important;position:absolute;font-family:monospace,Arial;font-size:12px;line-height:24px;letter-spacing:1px}.gs-formula-bar-editor-inner{position:relative}.gs-editor{opacity:0;z-index:-1}.gs-editor .gs-editor-inner{position:relative}.gs-editor .gs-editor-hl{box-sizing:content-box;border:solid 2px #07f;margin:-2px -1px}.gs-editor textarea{width:100%;padding:0 2px!important;position:absolute;font-size:12px;font-family:monospace,Arial;line-height:24px;letter-spacing:1px;top:0;left:0;border:none;outline:0;background-color:transparent;color:transparent;resize:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;overflow:hidden;cursor:default;white-space:pre;height:auto}.gs-editor.gs-editing{z-index:3;opacity:1}.gs-editor.gs-editing .gs-cell-label{pointer-events:none;font-family:math,monospace,serif;position:absolute;top:0;right:0;margin-top:-15px;margin-right:-2px;padding:0 2px;font-size:10px;background-color:rgba(0,119,255,.75);color:#fff;z-index:1}.gs-formula-bar{width:100%;display:table;align-items:center;justify-content:center;border-top:solid 1px rgba(128,128,128,.3);border-left:solid 1px rgba(128,128,128,.3);border-right:solid 1px rgba(128,128,128,.3);box-sizing:border-box}.gs-formula-bar .gs-selecting-address{display:table-cell;vertical-align:middle;width:50px;color:rgba(200,200,200);font-size:13px;padding-left:5px}.gs-formula-bar .gs-fx{display:table-cell;vertical-align:middle;width:30px;color:rgba(200,200,200);font-style:italic;font-family:cursive;text-align:center;border-left:solid 1px rgba(128,128,128,.5)}.gs-formula-bar .gs-editor-hl{z-index:0;overflow-y:auto;box-sizing:border-box;white-space:pre-wrap;word-break:break-all}.gs-formula-bar textarea{display:table-cell;position:relative;z-index:1;width:100%;vertical-align:bottom;color:transparent;border:none;background-color:transparent;padding:0 2px;box-sizing:border-box;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-size:12px;font-family:monospace,Arial;height:24px;line-height:24px;min-height:24px;letter-spacing:1px;resize:vertical;caret-color:rgba(128,128,128);white-space:pre-wrap;word-break:break-all}.gs-token-type-INVALID_REF{color:red}.gs-token-type-VALUE.gs-token-entity-type-boolean,.gs-token-type-VALUE.gs-token-entity-type-number{color:#39f}.gs-token-type-VALUE.gs-token-entity-type-string{color:#090}.gs-adjuster{padding:0}.gs-tabular{overflow:auto;display:block;box-sizing:border-box;overscroll-behavior-x:contain}.gs-tabular-inner>table{table-layout:fixed;border-collapse:collapse}.gs-th{z-index:2;padding:0;position:sticky;font-size:13px;font-weight:400;box-sizing:border-box;vertical-align:top}.gs-th .gs-resizer{position:absolute;border-color:transparent;box-sizing:border-box;z-index:2}.gs-th .gs-resizer:hover{background-color:#07f}.gs-th .gs-resizer.gs-protected{display:none}.gs-th-inner{height:100%;box-sizing:border-box;vertical-align:middle;overflow:hidden;display:flex;align-items:center;justify-content:center}.gs-th-inner-wrap{height:100%;box-sizing:border-box}.gs-th-top{top:0;overflow:hidden}.gs-th-top .gs-resizer{top:0;right:0;width:3px;cursor:e-resize}.gs-th-top .gs-resizer.gs-dragging{border-right-style:dotted;height:1000000px!important;cursor:e-resize}.gs-th-left{left:0;overflow:hidden;min-width:30px}.gs-th-left .gs-resizer{left:0;bottom:0;height:3px;cursor:n-resize}.gs-th-left .gs-resizer.gs-dragging{border-bottom-style:dotted;width:1000000px!important;cursor:n-resize}.gs-th-top.gs-th-left{top:0;left:0;z-index:3}.gs-search{width:300px;box-shadow:rgba(60,64,67,.3) 0 1px 2px 0,rgba(60,64,67,.15) 0 1px 3px 1px;display:flex;background-color:#fdfdfd;border:solid 2px #eee;border-radius:5px;padding:10px;position:fixed;top:10px;right:10px;z-index:5}.gs-search .gs-searchbox{display:flex;position:relative;border:solid 2px #07f;border-radius:5px;flex:1}.gs-search .gs-searchbox input[type=text]{padding:5px;background-color:transparent;border:none;outline:0;z-index:1;flex:1}.gs-search .gs-search-progress{color:#999;padding:6px 3px;font-size:13px;text-align:right}.gs-search .gs-search-close{margin:6px 5px;cursor:pointer;color:#ddd;width:50px;text-align:center}`; +export const LAST_MODIFIED = 1731743514; +export const CSS = `.gs-root1{display:inline-block;max-width:100%;overflow:auto;font-family:"SF Pro Text","SF Pro Icons","Helvetica Neue",Helvetica,Arial,Meiryo,sans-serif}.gs-root1 .gs-main{overflow:hidden;position:relative;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box}.gs-root1 .gs-resizing{width:100%;height:100%;position:absolute;background-color:rgba(0,127,255,.08);top:0;left:0;z-index:2}.gs-root1 .gs-line{position:relative;top:0;left:0;border:dotted 1px #07f;box-sizing:border-box}.gs-root1 .gs-line span{font-size:10px;padding:3px;background-color:#07f;color:#fff;margin:0;position:absolute;top:0;left:0}.gs-fixed{position:fixed;top:0;left:0;z-index:1}.gs-root1[data-mode=light]{background-color:#e2e2e2;color:#000}.gs-root1[data-mode=light] .gs-main{background-color:#e2e2e2;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd}.gs-root1[data-mode=light] .gs-tabular{background-color:#e2e2e2}.gs-root1[data-mode=light] .gs-formula-bar{background-color:#efefef}.gs-root1[data-mode=light] .gs-formula-bar-editor-inner{color:#555}.gs-root1[data-mode=light] .gs-cell{border-top:solid 1px #ddd;border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-adjuster{background-color:#ddd}.gs-root1[data-mode=light] .gs-tabular-inner{background-color:#f7f7f7}.gs-root1[data-mode=light] .gs-th{background-color:#efefef;color:#666}.gs-root1[data-mode=light] .gs-th.gs-selecting{background-color:#d2d2d2}.gs-root1[data-mode=light] .gs-th.gs-choosing{background-color:#bbb}.gs-root1[data-mode=light] .gs-th.gs-th-selecting{background-color:#555;color:#fff}.gs-root1[data-mode=light] .gs-th-top .gs-th-inner{border-top:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-top .gs-th-inner-wrap{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left .gs-th-inner{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left .gs-th-inner-wrap{border-top:solid 1px #ddd}.gs-root1[data-mode=light] .gs-search-bar{color:rgba(0,0,0,.3)}.gs-editor[data-mode=light].gs-editing textarea{caret-color:#000}.gs-editor[data-mode=light].gs-editing .gs-editor-hl{background-color:#f7f7f7;color:#000}.gs-root1[data-mode=dark]{background-color:#5a5a5a;color:#eee}.gs-root1[data-mode=dark] .gs-main{background-color:#3f3f3f;border-right:solid 1px #5a5a5a;border-bottom:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-tabular{background-color:#3f3f3f}.gs-root1[data-mode=dark] .gs-formula-bar{background-color:#4f4f4f}.gs-root1[data-mode=dark] .gs-formula-bar-editor-inner{color:#bbb}.gs-root1[data-mode=dark] .gs-cell{border-top:solid 1px #5a5a5a;border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-adjuster{background-color:#5a5a5a}.gs-root1[data-mode=dark] .gs-tabular-inner{background-color:#212121}.gs-root1[data-mode=dark] .gs-large-editor textarea{color:#eee;caret-color:#eee}.gs-root1[data-mode=dark] .gs-th{background-color:#4f4f4f;color:#eee}.gs-root1[data-mode=dark] .gs-th.gs-selecting{background-color:#606060}.gs-root1[data-mode=dark] .gs-th.gs-choosing{background-color:#777}.gs-root1[data-mode=dark] .gs-th.gs-th-selecting{background-color:#aaa;color:#444}.gs-root1[data-mode=dark] .gs-th-top .gs-th-inner{border-top:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-top .gs-th-inner-wrap{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left .gs-th-inner{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left .gs-th-inner-wrap{border-top:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-search-bar textarea{color:#eee;caret-color:#eee}.gs-root1[data-mode=dark] .gs-search-bar{color:rgba(255,255,255,.3)}.gs-editor[data-mode=dark].gs-editing textarea{caret-color:#eee}.gs-editor[data-mode=dark].gs-editing .gs-editor-hl{background-color:#212121;color:#eee}.gs-cell{padding:0;margin:0;box-sizing:border-box;position:relative;font-size:13px;letter-spacing:1px;line-height:24px}.gs-cell .gs-cell-inner-wrap.gs-selecting{background-color:rgba(0,128,255,.2)}.gs-cell.gs-copying textarea:focus{outline:solid 1px #07f}.gs-cell.gs-selecting{z-index:1}.gs-cell.gs-selecting .gs-cell-inner{background-color:rgba(0,128,255,.2)}.gs-cell.gs-selecting .gs-cell-label{display:block}.gs-cell.gs-choosing{margin-top:-1px;margin-left:-1px;z-index:1}.gs-cell.gs-choosing.gs-editing{color:transparent}.gs-cell.gs-choosing .gs-cell-label{display:block}.gs-cell .gs-formula-error-triangle{position:absolute;top:0;right:0;border-top:3px solid rgba(200,0,0,.9);border-right:3px solid rgba(200,0,0,.9);border-bottom:3px solid transparent;border-left:3px solid transparent;z-index:1}.gs-cell .gs-cell-label{font-size:8px;font-weight:400;font-style:normal;font-family:math,monospace,serif;letter-spacing:1px;line-height:14px;position:absolute;top:0;right:0;background-color:rgba(0,128,255,.2);color:rgba(255,255,255,.6);padding:0 2px;display:none;opacity:.7}.gs-cell .gs-cell-inner-wrap{width:100%;height:100%;position:absolute;top:0;left:0}.gs-cell .gs-cell-inner{width:100%;height:100%;overflow:hidden;display:flex;box-sizing:border-box;border:none!important}.gs-cell .gs-cell-rendered{overflow:hidden;white-space:pre-wrap;cursor:auto;word-wrap:break-word;word-break:break-all;padding:0 2px}.gs-cell .gs-cell-rendered>*{position:relative}.gs-cell .gs-cell-rendered>.backface{z-index:0}.gs-cell .gs-autofill-drag{background-color:#07f;position:absolute;width:7px;height:7px;bottom:0;right:0;margin-right:-3.5px;margin-bottom:-3.5px;cursor:crosshair;z-index:1}.gs-th[data-x="1"] .gs-th-inner-wrap{border-left:none}.gs-th[data-y="1"] .gs-th-inner-wrap{border-top:none}.gs-cell[data-x="1"]{border-left:none}.gs-cell[data-y="1"]{border-top:none}.gs-contextmenu-modal{width:100%;height:100vh;z-index:3}.gs-contextmenu{z-index:3;position:fixed;background-color:#fff;padding:5px 0;border-radius:5px;box-shadow:rgba(60,64,67,.3) 0 1px 2px 0,rgba(60,64,67,.15) 0 1px 3px 1px}.gs-contextmenu ul{min-width:250px;color:#555;margin:0;padding:0}.gs-contextmenu li{padding:5px 10px;list-style-type:none;display:flex}.gs-contextmenu li.gs-enabled{cursor:pointer}.gs-contextmenu li.gs-enabled:hover{background-color:#eee}.gs-contextmenu li.gs-disabled{opacity:.5;cursor:not-allowed}.gs-contextmenu li.gs-menu-divider{background-color:#aaa;margin:10px 0;padding:0;height:1px}.gs-contextmenu li .gs-menu-name{flex:1;font-size:15px;letter-spacing:1px}.gs-contextmenu li .gs-menu-shortcut{font-size:10px;line-height:15px;color:#999;width:15px}.gs-contextmenu li .gs-menu-shortcut:before{content:"("}.gs-contextmenu li .gs-menu-shortcut:after{content:")"}.gs-contextmenu li .gs-menu-shortcut .gs-menu-underline{text-decoration:underline}.gs-editor-hl{padding:0 2px!important;position:absolute;font-family:monospace,Arial;font-size:12px;line-height:24px;letter-spacing:1px}.gs-formula-bar-editor-inner{position:relative}.gs-editor{opacity:0;z-index:-1}.gs-editor .gs-editor-inner{position:relative}.gs-editor .gs-editor-hl{box-sizing:content-box;border:solid 2px #07f;margin:-2px -1px}.gs-editor textarea{width:100%;padding:0 2px!important;position:absolute;font-size:12px;font-family:monospace,Arial;line-height:24px;letter-spacing:1px;top:0;left:0;border:none;outline:0;background-color:transparent;color:transparent;resize:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;overflow:hidden;cursor:default;white-space:pre;height:auto}.gs-editor.gs-editing{z-index:3;opacity:1}.gs-editor.gs-editing .gs-cell-label{pointer-events:none;font-family:math,monospace,serif;position:absolute;top:0;right:0;margin-top:-15px;margin-right:-2px;padding:0 2px;font-size:10px;background-color:rgba(0,119,255,.75);color:#fff;z-index:1}.gs-formula-bar{width:100%;display:table;align-items:center;justify-content:center;border-top:solid 1px rgba(128,128,128,.3);border-left:solid 1px rgba(128,128,128,.3);border-right:solid 1px rgba(128,128,128,.3);box-sizing:border-box}.gs-formula-bar .gs-selecting-address{display:table-cell;vertical-align:middle;width:60px;color:rgba(200,200,200);font-size:13px;text-align:center}.gs-formula-bar .gs-fx{display:table-cell;vertical-align:middle;width:30px;color:rgba(200,200,200);font-style:italic;font-family:cursive;text-align:center;border-left:solid 1px rgba(128,128,128,.5);font-size:15px}.gs-formula-bar .gs-editor-hl{z-index:0;overflow-y:auto;box-sizing:border-box;white-space:pre-wrap;word-break:break-all}.gs-formula-bar textarea{display:table-cell;position:relative;z-index:1;width:100%;vertical-align:bottom;color:transparent;border:none;background-color:transparent;padding:0 2px;box-sizing:border-box;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-size:12px;font-family:monospace,Arial;height:24px;line-height:24px;min-height:24px;letter-spacing:1px;resize:vertical;caret-color:rgba(128,128,128);white-space:pre-wrap;word-break:break-all}.gs-token-type-INVALID_REF{color:red}.gs-token-type-VALUE.gs-token-entity-type-boolean,.gs-token-type-VALUE.gs-token-entity-type-number{color:#39f}.gs-token-type-VALUE.gs-token-entity-type-string{color:#090}.gs-adjuster{padding:0}.gs-tabular{overflow:auto;display:block;box-sizing:border-box;overscroll-behavior-x:contain}.gs-tabular-inner>table{table-layout:fixed;border-collapse:collapse}.gs-th{z-index:2;padding:0;position:sticky;font-size:13px;font-weight:400;box-sizing:border-box;vertical-align:top}.gs-th .gs-resizer{position:absolute;border-color:transparent;box-sizing:border-box;z-index:2}.gs-th .gs-resizer:hover{background-color:#07f}.gs-th .gs-resizer.gs-protected{display:none}.gs-th-inner{height:100%;box-sizing:border-box;vertical-align:middle;overflow:hidden;display:flex;align-items:center;justify-content:center}.gs-th-inner-wrap{height:100%;box-sizing:border-box}.gs-th-top{top:0;overflow:hidden}.gs-th-top .gs-resizer{top:0;right:0;width:3px;cursor:e-resize}.gs-th-top .gs-resizer.gs-dragging{border-right-style:dotted;height:1000000px!important;cursor:e-resize}.gs-th-left{left:0;overflow:hidden;min-width:30px}.gs-th-left .gs-resizer{left:0;bottom:0;height:3px;cursor:n-resize}.gs-th-left .gs-resizer.gs-dragging{border-bottom-style:dotted;width:1000000px!important;cursor:n-resize}.gs-th-top.gs-th-left{top:0;left:0;z-index:3}.gs-search-bar{width:100%;display:table;align-items:center;justify-content:center;border-top:solid 1px rgba(128,128,128,.3);border-left:solid 1px rgba(128,128,128,.3);border-right:solid 1px rgba(128,128,128,.3);box-sizing:border-box;background-color:rgba(200,50,0,.2)}.gs-search-bar.gs-search-found{background-color:rgba(0,200,100,.2)}.gs-search-bar .gs-search-bar-inner{vertical-align:middle;border-left:solid 1px rgba(128,128,128,.5)}.gs-search-bar .gs-search-bar-icon{border-left:solid 1px rgba(128,128,128,.3);display:table-cell;vertical-align:middle;width:30px}.gs-search-bar textarea{background-color:transparent;border:none;padding:0 2px;box-sizing:border-box;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-size:12px;font-family:monospace,Arial;height:24px;line-height:24px;min-height:24px;letter-spacing:1px;caret-color:rgba(128,128,128);white-space:pre-wrap;word-break:break-all;display:table-cell;vertical-align:middle;width:100%;resize:none}.gs-search-progress{display:table-cell;color:#999;font-size:13px;width:60px;vertical-align:middle;white-space:nowrap;text-align:center}.gs-search-close{display:table-cell;cursor:pointer;vertical-align:middle;width:24px}.gs-search-casesensitive{display:table-cell;cursor:pointer;vertical-align:middle;width:30px}.gs-search-casesensitive span{font-size:14px;padding:0 3px}.gs-search-casesensitive span.gs-search-casesensitive-on{color:#07f;background-color:rgba(200,200,255,.5);border-radius:3px}`; diff --git a/src/styles/root.min.css b/src/styles/root.min.css index b2841c8..77c3cd5 100644 --- a/src/styles/root.min.css +++ b/src/styles/root.min.css @@ -1 +1 @@ -.gs-root1{display:inline-block;max-width:100%;overflow:auto;font-family:"SF Pro Text","SF Pro Icons","Helvetica Neue",Helvetica,Arial,Meiryo,sans-serif}.gs-root1 .gs-main{overflow:hidden;position:relative;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box}.gs-root1 .gs-resizing{width:100%;height:100%;position:absolute;background-color:rgba(0,127,255,.08);top:0;left:0;z-index:2}.gs-root1 .gs-line{position:relative;top:0;left:0;border:dotted 1px #07f;box-sizing:border-box}.gs-root1 .gs-line span{font-size:10px;padding:3px;background-color:#07f;color:#fff;margin:0;position:absolute;top:0;left:0}.gs-fixed{position:fixed;top:0;left:0;z-index:1}.gs-root1[data-mode=light]{background-color:#e2e2e2;color:#000}.gs-root1[data-mode=light] .gs-main{background-color:#e2e2e2;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd}.gs-root1[data-mode=light] .gs-tabular{background-color:#e2e2e2}.gs-root1[data-mode=light] .gs-formula-bar{background-color:#efefef}.gs-root1[data-mode=light] .gs-formula-bar-editor-inner{color:#555}.gs-root1[data-mode=light] .gs-cell{border-top:solid 1px #ddd;border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-adjuster{background-color:#ddd}.gs-root1[data-mode=light] .gs-tabular-inner{background-color:#f7f7f7}.gs-root1[data-mode=light] .gs-th{background-color:#efefef;color:#666}.gs-root1[data-mode=light] .gs-th.gs-selecting{background-color:#d2d2d2}.gs-root1[data-mode=light] .gs-th.gs-choosing{background-color:#bbb}.gs-root1[data-mode=light] .gs-th.gs-th-selecting{background-color:#555;color:#fff}.gs-root1[data-mode=light] .gs-th-top .gs-th-inner{border-top:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-top .gs-th-inner-wrap{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left .gs-th-inner{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left .gs-th-inner-wrap{border-top:solid 1px #ddd}.gs-editor[data-mode=light].gs-editing textarea{caret-color:#000}.gs-editor[data-mode=light].gs-editing .gs-editor-hl{background-color:#f7f7f7;color:#000}.gs-root1[data-mode=dark]{background-color:#5a5a5a;color:#eee}.gs-root1[data-mode=dark] .gs-main{background-color:#3f3f3f;border-right:solid 1px #5a5a5a;border-bottom:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-tabular{background-color:#3f3f3f}.gs-root1[data-mode=dark] .gs-formula-bar{background-color:#4f4f4f}.gs-root1[data-mode=dark] .gs-formula-bar-editor-inner{color:#bbb}.gs-root1[data-mode=dark] .gs-cell{border-top:solid 1px #5a5a5a;border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-adjuster{background-color:#5a5a5a}.gs-root1[data-mode=dark] .gs-tabular-inner{background-color:#212121}.gs-root1[data-mode=dark] .gs-large-editor textarea{color:#eee;caret-color:#eee}.gs-root1[data-mode=dark] .gs-th{background-color:#4f4f4f;color:#eee}.gs-root1[data-mode=dark] .gs-th.gs-selecting{background-color:#606060}.gs-root1[data-mode=dark] .gs-th.gs-choosing{background-color:#777}.gs-root1[data-mode=dark] .gs-th.gs-th-selecting{background-color:#aaa;color:#444}.gs-root1[data-mode=dark] .gs-th-top .gs-th-inner{border-top:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-top .gs-th-inner-wrap{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left .gs-th-inner{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left .gs-th-inner-wrap{border-top:solid 1px #5a5a5a}.gs-editor[data-mode=dark].gs-editing textarea{caret-color:#eee}.gs-editor[data-mode=dark].gs-editing .gs-editor-hl{background-color:#212121;color:#eee}.gs-cell{padding:0;margin:0;box-sizing:border-box;position:relative;font-size:13px;letter-spacing:1px;line-height:24px}.gs-cell .gs-cell-inner-wrap.gs-selecting{background-color:rgba(0,128,255,.2)}.gs-cell.gs-copying textarea:focus{outline:solid 1px #07f}.gs-cell.gs-selecting{z-index:1}.gs-cell.gs-selecting .gs-cell-inner{background-color:rgba(0,128,255,.2)}.gs-cell.gs-selecting .gs-cell-label{display:block}.gs-cell.gs-choosing{margin-top:-1px;margin-left:-1px;z-index:1}.gs-cell.gs-choosing.gs-editing{color:transparent}.gs-cell.gs-choosing .gs-cell-label{display:block}.gs-cell .gs-formula-error-triangle{position:absolute;top:0;right:0;border-top:3px solid rgba(200,0,0,.9);border-right:3px solid rgba(200,0,0,.9);border-bottom:3px solid transparent;border-left:3px solid transparent;z-index:1}.gs-cell .gs-cell-label{font-size:8px;font-weight:400;font-style:normal;font-family:math,monospace,serif;letter-spacing:1px;line-height:14px;position:absolute;top:0;right:0;background-color:rgba(0,128,255,.2);color:rgba(255,255,255,.6);padding:0 2px;display:none;opacity:.7}.gs-cell .gs-cell-inner-wrap{width:100%;height:100%;position:absolute;top:0;left:0}.gs-cell .gs-cell-inner{width:100%;height:100%;overflow:hidden;display:flex;box-sizing:border-box;border:none!important}.gs-cell .gs-cell-rendered{overflow:hidden;white-space:pre-wrap;cursor:auto;word-wrap:break-word;word-break:break-all;padding:0 2px}.gs-cell .gs-cell-rendered>*{position:relative}.gs-cell .gs-cell-rendered>.backface{z-index:0}.gs-cell .gs-autofill-drag{background-color:#07f;position:absolute;width:7px;height:7px;bottom:0;right:0;margin-right:-3.5px;margin-bottom:-3.5px;cursor:crosshair;z-index:1}.gs-th[data-x="1"] .gs-th-inner-wrap{border-left:none}.gs-th[data-y="1"] .gs-th-inner-wrap{border-top:none}.gs-cell[data-x="1"]{border-left:none}.gs-cell[data-y="1"]{border-top:none}.gs-contextmenu-modal{width:100%;height:100vh;z-index:3}.gs-contextmenu{z-index:3;position:fixed;background-color:#fff;padding:5px 0;border-radius:5px;box-shadow:rgba(60,64,67,.3) 0 1px 2px 0,rgba(60,64,67,.15) 0 1px 3px 1px}.gs-contextmenu ul{min-width:250px;color:#555;margin:0;padding:0}.gs-contextmenu li{padding:5px 10px;list-style-type:none;display:flex}.gs-contextmenu li.gs-enabled{cursor:pointer}.gs-contextmenu li.gs-enabled:hover{background-color:#eee}.gs-contextmenu li.gs-disabled{opacity:.5;cursor:not-allowed}.gs-contextmenu li.gs-menu-divider{background-color:#aaa;margin:10px 0;padding:0;height:1px}.gs-contextmenu li .gs-menu-name{flex:1;font-size:15px;letter-spacing:1px}.gs-contextmenu li .gs-menu-shortcut{font-size:10px;line-height:15px;color:#999;width:15px}.gs-contextmenu li .gs-menu-shortcut:before{content:"("}.gs-contextmenu li .gs-menu-shortcut:after{content:")"}.gs-contextmenu li .gs-menu-shortcut .gs-menu-underline{text-decoration:underline}.gs-editor-hl{padding:0 2px!important;position:absolute;font-family:monospace,Arial;font-size:12px;line-height:24px;letter-spacing:1px}.gs-formula-bar-editor-inner{position:relative}.gs-editor{opacity:0;z-index:-1}.gs-editor .gs-editor-inner{position:relative}.gs-editor .gs-editor-hl{box-sizing:content-box;border:solid 2px #07f;margin:-2px -1px}.gs-editor textarea{width:100%;padding:0 2px!important;position:absolute;font-size:12px;font-family:monospace,Arial;line-height:24px;letter-spacing:1px;top:0;left:0;border:none;outline:0;background-color:transparent;color:transparent;resize:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;overflow:hidden;cursor:default;white-space:pre;height:auto}.gs-editor.gs-editing{z-index:3;opacity:1}.gs-editor.gs-editing .gs-cell-label{pointer-events:none;font-family:math,monospace,serif;position:absolute;top:0;right:0;margin-top:-15px;margin-right:-2px;padding:0 2px;font-size:10px;background-color:rgba(0,119,255,.75);color:#fff;z-index:1}.gs-formula-bar{width:100%;display:table;align-items:center;justify-content:center;border-top:solid 1px rgba(128,128,128,.3);border-left:solid 1px rgba(128,128,128,.3);border-right:solid 1px rgba(128,128,128,.3);box-sizing:border-box}.gs-formula-bar .gs-selecting-address{display:table-cell;vertical-align:middle;width:50px;color:rgba(200,200,200);font-size:13px;padding-left:5px}.gs-formula-bar .gs-fx{display:table-cell;vertical-align:middle;width:30px;color:rgba(200,200,200);font-style:italic;font-family:cursive;text-align:center;border-left:solid 1px rgba(128,128,128,.5)}.gs-formula-bar .gs-editor-hl{z-index:0;overflow-y:auto;box-sizing:border-box;white-space:pre-wrap;word-break:break-all}.gs-formula-bar textarea{display:table-cell;position:relative;z-index:1;width:100%;vertical-align:bottom;color:transparent;border:none;background-color:transparent;padding:0 2px;box-sizing:border-box;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-size:12px;font-family:monospace,Arial;height:24px;line-height:24px;min-height:24px;letter-spacing:1px;resize:vertical;caret-color:rgba(128,128,128);white-space:pre-wrap;word-break:break-all}.gs-token-type-INVALID_REF{color:red}.gs-token-type-VALUE.gs-token-entity-type-boolean,.gs-token-type-VALUE.gs-token-entity-type-number{color:#39f}.gs-token-type-VALUE.gs-token-entity-type-string{color:#090}.gs-adjuster{padding:0}.gs-tabular{overflow:auto;display:block;box-sizing:border-box;overscroll-behavior-x:contain}.gs-tabular-inner>table{table-layout:fixed;border-collapse:collapse}.gs-th{z-index:2;padding:0;position:sticky;font-size:13px;font-weight:400;box-sizing:border-box;vertical-align:top}.gs-th .gs-resizer{position:absolute;border-color:transparent;box-sizing:border-box;z-index:2}.gs-th .gs-resizer:hover{background-color:#07f}.gs-th .gs-resizer.gs-protected{display:none}.gs-th-inner{height:100%;box-sizing:border-box;vertical-align:middle;overflow:hidden;display:flex;align-items:center;justify-content:center}.gs-th-inner-wrap{height:100%;box-sizing:border-box}.gs-th-top{top:0;overflow:hidden}.gs-th-top .gs-resizer{top:0;right:0;width:3px;cursor:e-resize}.gs-th-top .gs-resizer.gs-dragging{border-right-style:dotted;height:1000000px!important;cursor:e-resize}.gs-th-left{left:0;overflow:hidden;min-width:30px}.gs-th-left .gs-resizer{left:0;bottom:0;height:3px;cursor:n-resize}.gs-th-left .gs-resizer.gs-dragging{border-bottom-style:dotted;width:1000000px!important;cursor:n-resize}.gs-th-top.gs-th-left{top:0;left:0;z-index:3}.gs-search{width:300px;box-shadow:rgba(60,64,67,.3) 0 1px 2px 0,rgba(60,64,67,.15) 0 1px 3px 1px;display:flex;background-color:#fdfdfd;border:solid 2px #eee;border-radius:5px;padding:10px;position:fixed;top:10px;right:10px;z-index:5}.gs-search .gs-searchbox{display:flex;position:relative;border:solid 2px #07f;border-radius:5px;flex:1}.gs-search .gs-searchbox input[type=text]{padding:5px;background-color:transparent;border:none;outline:0;z-index:1;flex:1}.gs-search .gs-search-progress{color:#999;padding:6px 3px;font-size:13px;text-align:right}.gs-search .gs-search-close{margin:6px 5px;cursor:pointer;color:#ddd;width:50px;text-align:center} \ No newline at end of file +.gs-root1{display:inline-block;max-width:100%;overflow:auto;font-family:"SF Pro Text","SF Pro Icons","Helvetica Neue",Helvetica,Arial,Meiryo,sans-serif}.gs-root1 .gs-main{overflow:hidden;position:relative;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box}.gs-root1 .gs-resizing{width:100%;height:100%;position:absolute;background-color:rgba(0,127,255,.08);top:0;left:0;z-index:2}.gs-root1 .gs-line{position:relative;top:0;left:0;border:dotted 1px #07f;box-sizing:border-box}.gs-root1 .gs-line span{font-size:10px;padding:3px;background-color:#07f;color:#fff;margin:0;position:absolute;top:0;left:0}.gs-fixed{position:fixed;top:0;left:0;z-index:1}.gs-root1[data-mode=light]{background-color:#e2e2e2;color:#000}.gs-root1[data-mode=light] .gs-main{background-color:#e2e2e2;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd}.gs-root1[data-mode=light] .gs-tabular{background-color:#e2e2e2}.gs-root1[data-mode=light] .gs-formula-bar{background-color:#efefef}.gs-root1[data-mode=light] .gs-formula-bar-editor-inner{color:#555}.gs-root1[data-mode=light] .gs-cell{border-top:solid 1px #ddd;border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-adjuster{background-color:#ddd}.gs-root1[data-mode=light] .gs-tabular-inner{background-color:#f7f7f7}.gs-root1[data-mode=light] .gs-th{background-color:#efefef;color:#666}.gs-root1[data-mode=light] .gs-th.gs-selecting{background-color:#d2d2d2}.gs-root1[data-mode=light] .gs-th.gs-choosing{background-color:#bbb}.gs-root1[data-mode=light] .gs-th.gs-th-selecting{background-color:#555;color:#fff}.gs-root1[data-mode=light] .gs-th-top .gs-th-inner{border-top:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-top .gs-th-inner-wrap{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left .gs-th-inner{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left .gs-th-inner-wrap{border-top:solid 1px #ddd}.gs-root1[data-mode=light] .gs-search-bar{color:rgba(0,0,0,.3)}.gs-editor[data-mode=light].gs-editing textarea{caret-color:#000}.gs-editor[data-mode=light].gs-editing .gs-editor-hl{background-color:#f7f7f7;color:#000}.gs-root1[data-mode=dark]{background-color:#5a5a5a;color:#eee}.gs-root1[data-mode=dark] .gs-main{background-color:#3f3f3f;border-right:solid 1px #5a5a5a;border-bottom:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-tabular{background-color:#3f3f3f}.gs-root1[data-mode=dark] .gs-formula-bar{background-color:#4f4f4f}.gs-root1[data-mode=dark] .gs-formula-bar-editor-inner{color:#bbb}.gs-root1[data-mode=dark] .gs-cell{border-top:solid 1px #5a5a5a;border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-adjuster{background-color:#5a5a5a}.gs-root1[data-mode=dark] .gs-tabular-inner{background-color:#212121}.gs-root1[data-mode=dark] .gs-large-editor textarea{color:#eee;caret-color:#eee}.gs-root1[data-mode=dark] .gs-th{background-color:#4f4f4f;color:#eee}.gs-root1[data-mode=dark] .gs-th.gs-selecting{background-color:#606060}.gs-root1[data-mode=dark] .gs-th.gs-choosing{background-color:#777}.gs-root1[data-mode=dark] .gs-th.gs-th-selecting{background-color:#aaa;color:#444}.gs-root1[data-mode=dark] .gs-th-top .gs-th-inner{border-top:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-top .gs-th-inner-wrap{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left .gs-th-inner{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left .gs-th-inner-wrap{border-top:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-search-bar textarea{color:#eee;caret-color:#eee}.gs-root1[data-mode=dark] .gs-search-bar{color:rgba(255,255,255,.3)}.gs-editor[data-mode=dark].gs-editing textarea{caret-color:#eee}.gs-editor[data-mode=dark].gs-editing .gs-editor-hl{background-color:#212121;color:#eee}.gs-cell{padding:0;margin:0;box-sizing:border-box;position:relative;font-size:13px;letter-spacing:1px;line-height:24px}.gs-cell .gs-cell-inner-wrap.gs-selecting{background-color:rgba(0,128,255,.2)}.gs-cell.gs-copying textarea:focus{outline:solid 1px #07f}.gs-cell.gs-selecting{z-index:1}.gs-cell.gs-selecting .gs-cell-inner{background-color:rgba(0,128,255,.2)}.gs-cell.gs-selecting .gs-cell-label{display:block}.gs-cell.gs-choosing{margin-top:-1px;margin-left:-1px;z-index:1}.gs-cell.gs-choosing.gs-editing{color:transparent}.gs-cell.gs-choosing .gs-cell-label{display:block}.gs-cell .gs-formula-error-triangle{position:absolute;top:0;right:0;border-top:3px solid rgba(200,0,0,.9);border-right:3px solid rgba(200,0,0,.9);border-bottom:3px solid transparent;border-left:3px solid transparent;z-index:1}.gs-cell .gs-cell-label{font-size:8px;font-weight:400;font-style:normal;font-family:math,monospace,serif;letter-spacing:1px;line-height:14px;position:absolute;top:0;right:0;background-color:rgba(0,128,255,.2);color:rgba(255,255,255,.6);padding:0 2px;display:none;opacity:.7}.gs-cell .gs-cell-inner-wrap{width:100%;height:100%;position:absolute;top:0;left:0}.gs-cell .gs-cell-inner{width:100%;height:100%;overflow:hidden;display:flex;box-sizing:border-box;border:none!important}.gs-cell .gs-cell-rendered{overflow:hidden;white-space:pre-wrap;cursor:auto;word-wrap:break-word;word-break:break-all;padding:0 2px}.gs-cell .gs-cell-rendered>*{position:relative}.gs-cell .gs-cell-rendered>.backface{z-index:0}.gs-cell .gs-autofill-drag{background-color:#07f;position:absolute;width:7px;height:7px;bottom:0;right:0;margin-right:-3.5px;margin-bottom:-3.5px;cursor:crosshair;z-index:1}.gs-th[data-x="1"] .gs-th-inner-wrap{border-left:none}.gs-th[data-y="1"] .gs-th-inner-wrap{border-top:none}.gs-cell[data-x="1"]{border-left:none}.gs-cell[data-y="1"]{border-top:none}.gs-contextmenu-modal{width:100%;height:100vh;z-index:3}.gs-contextmenu{z-index:3;position:fixed;background-color:#fff;padding:5px 0;border-radius:5px;box-shadow:rgba(60,64,67,.3) 0 1px 2px 0,rgba(60,64,67,.15) 0 1px 3px 1px}.gs-contextmenu ul{min-width:250px;color:#555;margin:0;padding:0}.gs-contextmenu li{padding:5px 10px;list-style-type:none;display:flex}.gs-contextmenu li.gs-enabled{cursor:pointer}.gs-contextmenu li.gs-enabled:hover{background-color:#eee}.gs-contextmenu li.gs-disabled{opacity:.5;cursor:not-allowed}.gs-contextmenu li.gs-menu-divider{background-color:#aaa;margin:10px 0;padding:0;height:1px}.gs-contextmenu li .gs-menu-name{flex:1;font-size:15px;letter-spacing:1px}.gs-contextmenu li .gs-menu-shortcut{font-size:10px;line-height:15px;color:#999;width:15px}.gs-contextmenu li .gs-menu-shortcut:before{content:"("}.gs-contextmenu li .gs-menu-shortcut:after{content:")"}.gs-contextmenu li .gs-menu-shortcut .gs-menu-underline{text-decoration:underline}.gs-editor-hl{padding:0 2px!important;position:absolute;font-family:monospace,Arial;font-size:12px;line-height:24px;letter-spacing:1px}.gs-formula-bar-editor-inner{position:relative}.gs-editor{opacity:0;z-index:-1}.gs-editor .gs-editor-inner{position:relative}.gs-editor .gs-editor-hl{box-sizing:content-box;border:solid 2px #07f;margin:-2px -1px}.gs-editor textarea{width:100%;padding:0 2px!important;position:absolute;font-size:12px;font-family:monospace,Arial;line-height:24px;letter-spacing:1px;top:0;left:0;border:none;outline:0;background-color:transparent;color:transparent;resize:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;overflow:hidden;cursor:default;white-space:pre;height:auto}.gs-editor.gs-editing{z-index:3;opacity:1}.gs-editor.gs-editing .gs-cell-label{pointer-events:none;font-family:math,monospace,serif;position:absolute;top:0;right:0;margin-top:-15px;margin-right:-2px;padding:0 2px;font-size:10px;background-color:rgba(0,119,255,.75);color:#fff;z-index:1}.gs-formula-bar{width:100%;display:table;align-items:center;justify-content:center;border-top:solid 1px rgba(128,128,128,.3);border-left:solid 1px rgba(128,128,128,.3);border-right:solid 1px rgba(128,128,128,.3);box-sizing:border-box}.gs-formula-bar .gs-selecting-address{display:table-cell;vertical-align:middle;width:60px;color:rgba(200,200,200);font-size:13px;text-align:center}.gs-formula-bar .gs-fx{display:table-cell;vertical-align:middle;width:30px;color:rgba(200,200,200);font-style:italic;font-family:cursive;text-align:center;border-left:solid 1px rgba(128,128,128,.5);font-size:15px}.gs-formula-bar .gs-editor-hl{z-index:0;overflow-y:auto;box-sizing:border-box;white-space:pre-wrap;word-break:break-all}.gs-formula-bar textarea{display:table-cell;position:relative;z-index:1;width:100%;vertical-align:bottom;color:transparent;border:none;background-color:transparent;padding:0 2px;box-sizing:border-box;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-size:12px;font-family:monospace,Arial;height:24px;line-height:24px;min-height:24px;letter-spacing:1px;resize:vertical;caret-color:rgba(128,128,128);white-space:pre-wrap;word-break:break-all}.gs-token-type-INVALID_REF{color:red}.gs-token-type-VALUE.gs-token-entity-type-boolean,.gs-token-type-VALUE.gs-token-entity-type-number{color:#39f}.gs-token-type-VALUE.gs-token-entity-type-string{color:#090}.gs-adjuster{padding:0}.gs-tabular{overflow:auto;display:block;box-sizing:border-box;overscroll-behavior-x:contain}.gs-tabular-inner>table{table-layout:fixed;border-collapse:collapse}.gs-th{z-index:2;padding:0;position:sticky;font-size:13px;font-weight:400;box-sizing:border-box;vertical-align:top}.gs-th .gs-resizer{position:absolute;border-color:transparent;box-sizing:border-box;z-index:2}.gs-th .gs-resizer:hover{background-color:#07f}.gs-th .gs-resizer.gs-protected{display:none}.gs-th-inner{height:100%;box-sizing:border-box;vertical-align:middle;overflow:hidden;display:flex;align-items:center;justify-content:center}.gs-th-inner-wrap{height:100%;box-sizing:border-box}.gs-th-top{top:0;overflow:hidden}.gs-th-top .gs-resizer{top:0;right:0;width:3px;cursor:e-resize}.gs-th-top .gs-resizer.gs-dragging{border-right-style:dotted;height:1000000px!important;cursor:e-resize}.gs-th-left{left:0;overflow:hidden;min-width:30px}.gs-th-left .gs-resizer{left:0;bottom:0;height:3px;cursor:n-resize}.gs-th-left .gs-resizer.gs-dragging{border-bottom-style:dotted;width:1000000px!important;cursor:n-resize}.gs-th-top.gs-th-left{top:0;left:0;z-index:3}.gs-search-bar{width:100%;display:table;align-items:center;justify-content:center;border-top:solid 1px rgba(128,128,128,.3);border-left:solid 1px rgba(128,128,128,.3);border-right:solid 1px rgba(128,128,128,.3);box-sizing:border-box;background-color:rgba(200,50,0,.2)}.gs-search-bar.gs-search-found{background-color:rgba(0,200,100,.2)}.gs-search-bar .gs-search-bar-inner{vertical-align:middle;border-left:solid 1px rgba(128,128,128,.5)}.gs-search-bar .gs-search-bar-icon{border-left:solid 1px rgba(128,128,128,.3);display:table-cell;vertical-align:middle;width:30px}.gs-search-bar textarea{background-color:transparent;border:none;padding:0 2px;box-sizing:border-box;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-size:12px;font-family:monospace,Arial;height:24px;line-height:24px;min-height:24px;letter-spacing:1px;caret-color:rgba(128,128,128);white-space:pre-wrap;word-break:break-all;display:table-cell;vertical-align:middle;width:100%;resize:none}.gs-search-progress{display:table-cell;color:#999;font-size:13px;width:60px;vertical-align:middle;white-space:nowrap;text-align:center}.gs-search-close{display:table-cell;cursor:pointer;vertical-align:middle;width:24px}.gs-search-casesensitive{display:table-cell;cursor:pointer;vertical-align:middle;width:30px}.gs-search-casesensitive span{font-size:14px;padding:0 3px}.gs-search-casesensitive span.gs-search-casesensitive-on{color:#07f;background-color:rgba(200,200,255,.5);border-radius:3px} \ No newline at end of file diff --git a/src/styles/search.less b/src/styles/search.less index c6b3fe0..58e8215 100644 --- a/src/styles/search.less +++ b/src/styles/search.less @@ -1,47 +1,87 @@ +.gs-search-bar { + width: 100%; + display: table; + align-items: center; + justify-content: center; + border-top: solid 1px rgba(128, 128, 128, 0.3); + border-left: solid 1px rgba(128, 128, 128, 0.3); + border-right: solid 1px rgba(128, 128, 128, 0.3); + box-sizing: border-box; + background-color: rgba(200, 50, 0, 0.2); -.gs-search { - width: 300px; - box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, - rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; - display: flex; - background-color: #fdfdfd; - border: solid 2px #eeeeee; - border-radius: 5px; - padding: 10px; - position: fixed; - top: 10px; - right: 10px; - z-index: 5; - - .gs-searchbox { - display: flex; - position: relative; - border: solid 2px #0077ff; - border-radius: 5px; - flex: 1; - input[type="text"] { - padding: 5px; - background-color: transparent; - border: none; - outline: 0; - z-index: 1; - flex: 1; - } + &.gs-search-found { + background-color: rgba(0, 200, 100, 0.2); + } + + .gs-search-bar-inner { + vertical-align: middle; + border-left: solid 1px rgba(128, 128, 128, 0.5); } - .gs-search-progress { - color: #999999; - padding: 6px 3px; - font-size: 13px; - text-align: right; + + .gs-search-bar-icon { + border-left: solid 1px rgba(128, 128, 128, 0.3); + display: table-cell; + vertical-align: middle; + width: 30px; } - .gs-search-close { - margin: 6px 5px; - cursor: pointer; - color: #dddddd; - width: 50px; - text-align: center; + textarea { + background-color: transparent; + border: none; + padding: 0 2px; + box-sizing: border-box; + outline: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + font-size: 12px; + font-family: monospace, Arial; + height: 24px; + line-height: 24px; + min-height: 24px; + letter-spacing: 1.0px; + caret-color:rgba(128, 128, 128); + white-space: pre-wrap; + word-break: break-all; + display: table-cell; + vertical-align: middle; + width: 100%; + resize: none; } } +.gs-search-progress { + display: table-cell; + color: #999999; + font-size: 13px; + width: 60px; + vertical-align: middle; + white-space: nowrap; + text-align: center; +} +.gs-search-close { + display: table-cell; + cursor: pointer; + vertical-align: middle; + width: 24px; +} + +.gs-search-casesensitive { + display: table-cell; + cursor: pointer; + vertical-align: middle; + width: 30px; + + span { + font-size: 14px; + padding: 0 3px; + &.gs-search-casesensitive-on { + color: #0077ff; + background-color: rgba(200, 200, 255, 0.5); + border-radius: 3px; + } + } + + +} diff --git a/src/styles/theme-dark.less b/src/styles/theme-dark.less index cfa0977..11262b2 100644 --- a/src/styles/theme-dark.less +++ b/src/styles/theme-dark.less @@ -74,6 +74,15 @@ border-top: solid 1px @dark_border_color; } } + .gs-search-bar { + textarea { + color: @dark_text_color; + caret-color: @dark_text_color; + } + } + .gs-search-bar { + color: rgba(255, 255, 255, 0.3); + } } .gs-editor[data-mode="dark"] { diff --git a/src/styles/theme-light.less b/src/styles/theme-light.less index 7069733..f784d69 100644 --- a/src/styles/theme-light.less +++ b/src/styles/theme-light.less @@ -70,6 +70,9 @@ border-top: solid 1px @light_border_color; } } + .gs-search-bar { + color: rgba(0, 0, 0, 0.3); + } } .gs-editor[data-mode="light"] { @@ -82,4 +85,4 @@ color: @light_text_color; } } -} \ No newline at end of file +} diff --git a/src/types.ts b/src/types.ts index aac752b..8c3341f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -99,7 +99,7 @@ export type StoreType = { editorRef: React.MutableRefObject; largeEditorRef: React.MutableRefObject; tabularRef: React.MutableRefObject; - searchInputRef: React.MutableRefObject; + searchInputRef: React.MutableRefObject; lastFocusedRef: React.MutableRefObject; lastEdited: string; entering: boolean; @@ -123,6 +123,7 @@ export type StoreType = { minNumCols: number; maxNumCols: number; searchQuery?: string; + searchCaseSensitive: boolean; matchingCells: string[]; matchingCellIndex: number; editingOnEnter: boolean;