[Feature] Toggle log. (#13)
diff --git a/studio/components/log/index.tsx b/studio/components/log/index.tsx
index edb2b6a..32f135b 100644
--- a/studio/components/log/index.tsx
+++ b/studio/components/log/index.tsx
@@ -15,8 +15,17 @@
* limitations under the License.
*/
-import { NTabs, NTabPane, NLog, NConfigProvider } from 'naive-ui'
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, PropType, h } from 'vue'
+import {
+ NTabs,
+ NTabPane,
+ NLog,
+ NConfigProvider,
+ NSpace,
+ NIcon,
+ NButton
+} from 'naive-ui'
+import { UpOutlined } from '@vicons/antd'
import {
ResizeHandler,
ResizedOptions,
@@ -34,6 +43,35 @@
}
}
+export const LogToolbar = defineComponent({
+ name: 'log-toolbar',
+ setup() {
+ const layoutStore = useLayoutStore()
+ return () => (
+ <NSpace>
+ <NButton
+ text
+ style={{ fontSize: '16px' }}
+ onClick={layoutStore.toggleLogUpAndDown}
+ >
+ <NIcon
+ style={{
+ transform: `rotate(${
+ layoutStore.getLogHeight === layoutStore.getLogMinHeight
+ ? 0
+ : 180
+ }deg)`,
+ transition: '0.3'
+ }}
+ >
+ <UpOutlined />
+ </NIcon>
+ </NButton>
+ </NSpace>
+ )
+ }
+})
+
export const Log = defineComponent({
name: 'log',
props,
@@ -61,8 +99,9 @@
const onResized = (resized: ResizedOptions) => {
let height = layoutStore.editorHeight - resized.y
- if (height < 40) height = 35
- if (height > layoutStore.editorHeight) height = layoutStore.editorHeight
+ if (height < 40) height = layoutStore.getLogMinHeight
+ if (height > layoutStore.getLogMaxHeight)
+ height = layoutStore.getLogMaxHeight
layoutStore.setLogHeight(height)
}
@@ -73,11 +112,30 @@
style={{ height: `${layoutStore.getLogHeight}px` }}
>
<NTabs type='card' closable size='small'>
- <NTabPane name={t('run_log')}>
- <NConfigProvider hljs={hljs} class={styles.hljs}>
- <NLog log={props.value} language='studio-log' />
- </NConfigProvider>
- </NTabPane>
+ {{
+ suffix: () => h(LogToolbar),
+ default: () => [
+ h(NTabPane, { name: t('run_log') }, () =>
+ h(
+ NConfigProvider,
+ {
+ hljs,
+ class: styles.hljs
+ },
+ () =>
+ h(NLog, {
+ log: props.value,
+ language: 'studio-log',
+ style: {
+ height:
+ layoutStore.getLogHeight -
+ layoutStore.getLogMinHeight
+ }
+ })
+ )
+ )
+ ]
+ }}
</NTabs>
<ResizeHandler placement={HandlerPlacement.T} onResized={onResized} />
</div>
diff --git a/studio/components/monaco/index.tsx b/studio/components/monaco/index.tsx
index b1d85c7..6f8cf70 100644
--- a/studio/components/monaco/index.tsx
+++ b/studio/components/monaco/index.tsx
@@ -93,7 +93,7 @@
ref={editorRef}
style={{
height: `${
- layoutStore.getEditorHeight - layoutStore.getLogHeight - 90
+ layoutStore.getEditorHeight - layoutStore.getLogHeight - 40 - 45
}px`,
width: '100%',
border: '1px solid #eee'
diff --git a/studio/store/layout/index.ts b/studio/store/layout/index.ts
index cc06023..176a7a9 100644
--- a/studio/store/layout/index.ts
+++ b/studio/store/layout/index.ts
@@ -37,6 +37,12 @@
},
getEditorHeight(): number {
return this.editorHeight
+ },
+ getLogMaxHeight(): number {
+ return this.editorHeight - 40 - 40 - 10
+ },
+ getLogMinHeight(): number {
+ return 43
}
},
actions: {
@@ -51,6 +57,12 @@
if (this.logHeight) this.prevLogHeight = this.logHeight
this.logHeight = this.logHeight ? 0 : this.prevLogHeight
},
+ toggleLogUpAndDown() {
+ this.logHeight =
+ this.logHeight === this.getLogMinHeight
+ ? this.getLogMaxHeight
+ : this.getLogMinHeight
+ },
setLogHeight(logHeight: number) {
this.logHeight = logHeight
},
