Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
dotgreg
tiro-notes
Commits
d1bb48e9
Commit
d1bb48e9
authored
May 20, 2022
by
greg@1m
Browse files
ctags in folders + scroll bugfix + improving rss + small bugfixing
parent
a247ea7a
Changes
22
Hide whitespace changes
Inline
Side-by-side
client/package-lock.json
View file @
d1bb48e9
...
...
@@ -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",
client/package.json
View file @
d1bb48e9
...
...
@@ -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"
,
...
...
client/src/App.tsx
View file @
d1bb48e9
...
...
@@ -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
"
}
...
...
client/src/components/MonacoEditor.Component.tsx
View file @
d1bb48e9
...
...
@@ -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
,
}
});
...
...
client/src/components/Popup.component.tsx
View file @
d1bb48e9
...
...
@@ -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 {
...
...
client/src/components/dualView/DualViewer.component.tsx
View file @
d1bb48e9
...
...
@@ -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
)
=>
{
...
...
client/src/components/dualView/EditorArea.component.tsx
View file @
d1bb48e9
...
...
@@ -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
}
/>
...
...
client/src/components/settingsView/settingsView.component.tsx
View file @
d1bb48e9
...
...
@@ -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 {
...
...
client/src/components/tabs/TabList.component.tsx
View file @
d1bb48e9
...
...
@@ -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
}
;
}
...
...
client/src/components/windowGrid/DraggableGrid.component.tsx
View file @
d1bb48e9
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
})
}