Commit d1bb48e9 authored by greg@1m's avatar greg@1m
Browse files

ctags in folders + scroll bugfix + improving rss + small bugfixing

parent a247ea7a
......@@ -57,6 +57,7 @@
"fs-extra": "^9.0.1",
"html-webpack-plugin": "4.5.0",
"identity-obj-proxy": "3.0.0",
"io-ts": "^2.2.16",
"katex": "^0.15.2",
"lodash": "^4.17.20",
"marked": "^1.2.6",
......@@ -11765,6 +11766,12 @@
"node": ">= 0.6"
}
},
"node_modules/fp-ts": {
"version": "2.12.1",
"resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.12.1.tgz",
"integrity": "sha512-oxvgqUYR6O9VkKXrxkJ0NOyU0FrE705MeqgBUMEPWyTu6Pwn768cJbHChw2XOBlgFLKfIHxjr2OOBFpv2mUGZw==",
"peer": true
},
"node_modules/fragment-cache": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
......@@ -12928,6 +12935,14 @@
"node": ">= 0.4"
}
},
"node_modules/io-ts": {
"version": "2.2.16",
"resolved": "https://registry.npmjs.org/io-ts/-/io-ts-2.2.16.tgz",
"integrity": "sha512-y5TTSa6VP6le0hhmIyN0dqEXkrZeJLeC5KApJq6VLci3UEKF80lZ+KuoUs02RhBxNWlrqSNxzfI7otLX1Euv8Q==",
"peerDependencies": {
"fp-ts": "^2.5.0"
}
},
"node_modules/ip": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
......@@ -38193,6 +38208,12 @@
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
},
"fp-ts": {
"version": "2.12.1",
"resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.12.1.tgz",
"integrity": "sha512-oxvgqUYR6O9VkKXrxkJ0NOyU0FrE705MeqgBUMEPWyTu6Pwn768cJbHChw2XOBlgFLKfIHxjr2OOBFpv2mUGZw==",
"peer": true
},
"fragment-cache": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
......@@ -39086,6 +39107,12 @@
"side-channel": "^1.0.4"
}
},
"io-ts": {
"version": "2.2.16",
"resolved": "https://registry.npmjs.org/io-ts/-/io-ts-2.2.16.tgz",
"integrity": "sha512-y5TTSa6VP6le0hhmIyN0dqEXkrZeJLeC5KApJq6VLci3UEKF80lZ+KuoUs02RhBxNWlrqSNxzfI7otLX1Euv8Q==",
"requires": {}
},
"ip": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
......@@ -52,6 +52,7 @@
"fs-extra": "^9.0.1",
"html-webpack-plugin": "4.5.0",
"identity-obj-proxy": "3.0.0",
"io-ts": "^2.2.16",
"katex": "^0.15.2",
"lodash": "^4.17.20",
"marked": "^1.2.6",
......
......@@ -282,7 +282,7 @@ export const App = () => {
{ /* API : making clientapi available everywhere */}
<ClientApiContext.Provider value={clientApi} >
<Global styles={GlobalCssApp} />
<Global styles={GlobalCssApp()} />
<div role="dialog" className={`
main-wrapper
${api.userSettings.get('ui_sidebar') ? "with-sidebar" : "without-sidebar"}
......
......@@ -25,6 +25,7 @@ export class MonacoEditorWrapper extends React.Component<{
readOnly: boolean,
onChange: (text: string) => void
onScroll: onScrollFn
onUpdateY: onScrollFn
insertUnderCaret?: string
onMaxYUpdate?: Function
}, {}> {
......@@ -36,6 +37,9 @@ export class MonacoEditorWrapper extends React.Component<{
this.vimStatusBar = React.createRef()
}
editor: any
monaco: any
editorDidMount = (editor: any, monaco: any) => {
......@@ -47,8 +51,19 @@ export class MonacoEditorWrapper extends React.Component<{
this.monaco = monaco
monacoEditorInstance = editor
editor.onDidScrollChange((e) => {
this.props.onScroll(e.scrollTop)
const updatePosY = () => {
const nY = editor.getScrollTop()
this.props.onUpdateY(nY)
}
// // on scroll change, update Y
// editor.onDidScrollChange((e) => {
// updateScrollY()
// });
// on scroll change, update Y
editor.onDidChangeCursorPosition((e) => {
updatePosY()
});
......@@ -62,14 +77,13 @@ export class MonacoEditorWrapper extends React.Component<{
monaco.editor.defineTheme('customLightTheme', {
base: 'vs',
inherit: true,
rules: [{ foreground: cssVars.colors.editor.font }],
rules: [{ foreground: cssVars.colors.fontEditor }],
colors: {
// 'editor.foreground': cssVars.colors.font.light,
// 'editor.background': cssVars.colors.bg.black,
// 'editor.foreground': ''cssVars.colors.editor.font'',
// 'editor.background': cssVars.colors.bg.light,
'editor.foreground': 'red',
// 'editor.background': 'red',
'editor.background': cssVars.colors.bgEditor,
}
});
......
......@@ -52,7 +52,7 @@ export const PopupWrapperCss = () => `
width : auto;
max-width: 90%;
transform:translate(-50%,-50%);
background: white;
background: ${cssVars.colors.bgPopup};
border-radius:6px;
box-shadow: 0px 0px 5px rgba(0,0,0,.2);
.popupTitle {
......
......@@ -79,7 +79,11 @@ export const DualViewer = (p: {
isActive={p.isActive}
posY={syncScrollY}
onScroll={newYPercent => { }}
onScroll={newY => { }}
onUpdateY={newY => {
console.log(1212222, newY, syncScrollY);
setPosY(newY)
}}
onMaxYUpdate={updateMaxY}
onFileEdited={(path, content) => {
......
......@@ -36,6 +36,7 @@ export const EditorArea = (p: {
canEdit: boolean
onScroll: onScrollFn
onUpdateY: onScrollFn
onMaxYUpdate: (maxY: number) => void
posY: number
......@@ -376,6 +377,7 @@ export const EditorArea = (p: {
ref={monacoEditorComp}
onChange={triggerNoteEdition}
onScroll={p.onScroll}
onUpdateY={p.onUpdateY}
posY={p.posY}
onMaxYUpdate={p.onMaxYUpdate}
/>
......
......@@ -8,6 +8,7 @@ import { ClientApiContext } from '../../hooks/api/api.hook';
import { useBackendState } from '../../hooks/useBackendState.hook';
import { cloneDeep, debounce, each } from 'lodash';
import { configClient } from '../../config';
import { cssVars } from '../../managers/style/vars.style.manager';
type ConfigPanel = {
title: string,
......@@ -62,17 +63,17 @@ export const SettingsPopup = (p: {
type: 'text',
var: tiroUrl,
customHtml: `
<div class="qrcode-wrapper">
<img src="${qrcodeUrl}"/>
<br>
</div>`,
<div class="qrcode-wrapper">
<img src="${qrcodeUrl}"/>
<br>
</div>`,
title: "Tiro Url",
readOnly: true,
expl: `Access Tiro on another device on the <b>same wifi/local network</b> either by :
<br>
- Entering that url in a browser
<br>
- Scanning that qrcode (on desktop, go to a website like <a href='https://webqr.com/'>webqr.com </a>)`,
<br>
- Entering that url in a browser
<br>
- Scanning that qrcode (on desktop, go to a website like <a href='https://webqr.com/'>webqr.com </a>)`,
modifier: () => { },
onCustomHtmlClick: () => {
api.ui.lightbox.open(0, [qrcodeUrl])
......@@ -226,9 +227,9 @@ export const settingsPopupCss = () => `
display: block;
display: block;
padding: 12px 12px 0px 12px;
background: #f9f9f9;
background: ${cssVars.colors.bgPopup2};
border-radius: 5px;
border: 1px #f5efef solid;
border: 1px ${cssVars.colors.bgPopup3} solid;
margin-top: 10px;
}
.field-wrapper {
......
......@@ -7,144 +7,144 @@ import { cssVars } from '../../managers/style/vars.style.manager';
import { Icon } from '../Icon.component';
export const TabList = (p: {
tabs: iTab[]
onUpdate: onTabUpdateFn
}) => {
tabs: iTab[]
onUpdate: onTabUpdateFn
}) => {
const api = useContext(ClientApiContext);
const api = useContext(ClientApiContext);
const [dragId, setDragId] = useState(-1)
const [dragId, setDragId] = useState(-1)
return (
<div className="tab-list-scroll-wrapper">
<div className="tab-list-invisible-scroll">
return (
<div className="tab-list-scroll-wrapper">
<div className="tab-list-invisible-scroll">
<div className="tab-list-wrapper">
{/* ALL TABS LIST*/}
{p.tabs.map((tab, i) =>
<Tab
key={i}
tab={tab}
onDrop={pos => { setDragId(pos) }}
onDragEnter={pos => { setDragId(pos) }}
onDragEnd={pos => {
api && api.tabs.reorder(pos, dragId)
setDragId(-1)
}}
showDragIndic={dragId === i}
pos={i}
onUpdate={p.onUpdate}
/>
)}
{/* ADD NEW TAB BUTTON*/}
{api?.ui.browser.files.active.get &&
<div
className="tab-wrapper tab-more"
onClick={e => {
p.onUpdate('add')
}}
>
+
</div>
}
{/* ALL TABS LIST*/}
{p.tabs.map((tab, i) =>
<Tab
key={i}
tab={tab}
onDrop={pos => { setDragId(pos) }}
onDragEnter={pos => { setDragId(pos) }}
onDragEnd={pos => {
api && api.tabs.reorder(pos, dragId)
setDragId(-1)
}}
showDragIndic={dragId === i}
pos={i}
onUpdate={p.onUpdate}
/>
)}
{/* ADD NEW TAB BUTTON*/}
{api?.ui.browser.files.active.get &&
<div
className="tab-wrapper tab-more"
onClick={e => {
p.onUpdate('add')
}}
>
+
</div>
}
</div>
</div>
</div>
)
</div>
</div>
)
}
const Tab = (p: {
tab: iTab
onUpdate: onTabUpdateFn
tab: iTab
onUpdate: onTabUpdateFn
onDragEnter: Function
onDragEnd: Function
onDrop: Function
onDragEnter: Function
onDragEnd: Function
onDrop: Function
pos: number
showDragIndic: boolean
}) => {
const { tab, pos } = { ...p }
pos: number
showDragIndic: boolean
}) => {
const { tab, pos } = { ...p }
let iconName = `Six`
const nbLay = tab.grid.layout.length
if (nbLay === 2) iconName = 'Two'
if (nbLay === 3) iconName = 'Three'
if (nbLay === 4) iconName = 'Four'
if (nbLay === 5) iconName = 'Five'
iconName = `faDice${iconName}`
let iconName = `Six`
const nbLay = tab.grid.layout.length
if (nbLay === 2) iconName = 'Two'
if (nbLay === 3) iconName = 'Three'
if (nbLay === 4) iconName = 'Four'
if (nbLay === 5) iconName = 'Five'
iconName = `faDice${iconName}`
return (//jsx
<div className="tab-and-drag-wrapper">
{
return (//jsx
<div className="tab-and-drag-wrapper">
{
p.showDragIndic && <div className="drag-indic">
{/* <Icon name="faPlusCircle" color={`#b2b2b2`} />*/}
{/* <Icon name="faPlusCircle" color={`#b2b2b2`} />*/}
</div>
}
<div
className={`tab-wrapper ${tab.active ? 'active' : ''}`}
draggable={true}
onDragEnter={() => { p.onDragEnter(pos) }}
onDrop={() => { p.onDrop(pos) }}
onDragEnd={() => { p.onDragEnd(pos) }}
>
}
<div
className={`tab-wrapper ${tab.active ? 'active' : ''}`}
draggable={true}
onDragEnter={() => { p.onDragEnter(pos) }}
onDrop={() => { p.onDrop(pos) }}
onDragEnd={() => { p.onDragEnd(pos) }}
>
<div className="active-ribbon"></div>
<div className="tab-name"
onClick={() => { p.onUpdate('activate', tab) }}
>
<div className="active-ribbon"></div>
<div className="tab-name"
onClick={() => { p.onUpdate('activate', tab) }}
>
{deviceType() !== 'mobile' &&
< input
type="text"
className="tab-input-text"
value={tab.name}
onChange={e => {
p.onUpdate('rename', tab, e.target.value)
}}
/>
}
{deviceType() === 'mobile' &&
<>{tab.name}</>
}
{deviceType() !== 'mobile' &&
< input
type="text"
className="tab-input-text"
value={tab.name}
onChange={e => {
p.onUpdate('rename', tab, e.target.value)
}}
/>
}
{deviceType() === 'mobile' &&
<>{tab.name}</>
}
</div>
</div>
{
tab.grid.layout.length > 1 &&
<div
className="tab-nb-windows"
onClick={() => { p.onUpdate('activate', tab) }}
>
<Icon name={iconName} color={`#b2b2b2`} />
</div>
}
{
tab.grid.layout.length > 1 &&
<div
className="tab-nb-windows"
onClick={() => { p.onUpdate('activate', tab) }}
>
<Icon name={iconName} color={`#b2b2b2`} />
</div>
}
< div className="tab-close"
onClick={() => p.onUpdate('close', tab)}>
<Icon name="faPlus" color={`#b2b2b2`} />
</div>
</div >
</div >
)//jsx
< div className="tab-close"
onClick={() => p.onUpdate('close', tab)}>
<Icon name="faPlus" color={`#b2b2b2`} />
</div>
</div >
</div >
)//jsx
}
export const tabsCss = () => `
.tab-list-scroll-wrapper {
height: 44px;
background: #D8D8D8;
background: ${cssVars.colors.bgTabs};
border-radius: 0px 0px 0px 5px;
overflow: hidden;
.tab-list-invisible-scroll {
......@@ -154,7 +154,7 @@ export const tabsCss = () => `
.tab-list-wrapper {
padding: 7px 0px 0px 13px;
display: flex;
background: #D8D8D8;
background: ${cssVars.colors.bgTabs};
border-radius: 0px 0px 0px 5px;
position: relative;
&>div:last-child {
......@@ -179,9 +179,9 @@ export const tabsCss = () => `
display:flex;
margin-right: 5px;
padding: 5px;
background: #D0D0D0;
background: ${cssVars.colors.bgTab};
display: flex;
color: ${cssVars.colors.grey1};
color: ${cssVars.colors.fontTab};
font-family: ${cssVars.font.editor};
height: 35px;
box-shadow:rgb(0 0 0 / 20%) 0px -1px 2px ;
......@@ -206,7 +206,7 @@ export const tabsCss = () => `
background: ${cssVars.colors.main};
}
background: #EFEFEF;
background: ${cssVars.colors.bgTabActive};
font-weight: bold
}
&.tab-more {
......@@ -225,12 +225,11 @@ export const tabsCss = () => `
padding: 10px 0px 10px 10px;
input {
color: #aaaaaa;
color:${cssVars.colors.fontTab} ;
font-size: 11px;
background: none;
border: none;
font-weight: 400;
color: ${cssVars.colors.grey1};
font-family: ${cssVars.font.editor};
}
......
import React, { useState, useEffect, useRef, useContext } from 'react';
import { cloneDeep, each, filter } from 'lodash'
import GridLayout from "react-grid-layout";
import GridLayout from "react-grid-layout";
import '../../../node_modules/react-grid-layout/css/styles.css'
import '../../../node_modules/react-resizable/css/styles.css'
import { iFile, iGrid, iViewType, iWindow, iWindowContent } from '../../../../shared/types.shared';
......@@ -17,360 +17,360 @@ import { deviceType } from '../../managers/device.manager';
export const draggableGridConfig = {
rows: 2,
cols: 4
rows: 2,
cols: 4
}
const d = {
m: 10,
rows: draggableGridConfig.rows,
cols: draggableGridConfig.cols,
decalBottom: 10
m: 10,
rows: draggableGridConfig.rows,
cols: draggableGridConfig.cols,
decalBottom: 10
}
export const DraggableGrid = (p: {
refresh: number
grid: iGrid
onGridUpdate: (grid: iGrid) => void
}) => {
const [intContent, setIntContent] = useState<iWindowContent[]>([])
const [intLayout, setIntLayout] = useState<iWindow[]>([])
const lastGoodLayout = useRef<iWindow[]>();
// ONLY WHEN TABID CHANGE
// receiving different layout from parent
useEffect(() => {
refresh: number
grid: iGrid
onGridUpdate: (grid: iGrid) => void
}) => {
const [intContent, setIntContent] = useState<iWindowContent[]>([])
const [intLayout, setIntLayout] = useState<iWindow[]>([])
const lastGoodLayout = useRef<iWindow[]>();
// ONLY WHEN TABID CHANGE
// receiving different layout from parent
useEffect(() => {
if (!p.grid || !p.grid.layout) return
setIntLayout(p.grid.layout)
setIntContent(p.grid.content)
}, [p.refresh])
}, [p.refresh])
// on content modification, mainly active state toggling
/* useEffect(() => {
// on content modification, mainly active state toggling
/* useEffect(() => {
p.onGridUpdate({ layout: intLayout, content: intContent })
}, [intContent])
*/
// on layout modification
useEffect(() => {
*/
// on layout modification
useEffect(() => {
updateCanAdd();
updateCanRemove();
}, [intLayout])
}, [intLayout])
const onGridUpdate = (layout: iWindow[], content: iWindowContent[]) => {
p.onGridUpdate({ layout, content })
}