Przeglądaj źródła

[frontend] Improve SQL Scratchpad component styling

Johan Åhlén 4 lat temu
rodzic
commit
aac24ec247

+ 21 - 0
desktop/core/src/desktop/js/apps/editor/components/ExecuableActions.scss

@@ -0,0 +1,21 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+.snippet-execute-actions {
+  display: inline-block;
+}

+ 1 - 6
desktop/core/src/desktop/js/apps/editor/components/ExecutableActions.vue

@@ -33,6 +33,7 @@
   import ExecuteLimitInput from 'apps/editor/components/ExecuteLimitInput.vue';
   import { defineComponent, PropType } from 'vue';
 
+  import './ExecuableActions.scss';
   import SqlExecutable from 'apps/editor/execution/sqlExecutable';
 
   export default defineComponent({
@@ -54,9 +55,3 @@
     emits: ['execute-failed', 'execute-successful', 'limit-changed']
   });
 </script>
-
-<style lang="scss" scoped>
-  .snippet-execute-actions {
-    display: inline-block;
-  }
-</style>

+ 22 - 2
desktop/core/src/desktop/js/apps/editor/components/sqlScratchpad/SqlScratchpad.scss

@@ -19,9 +19,10 @@
 @import '../../../../components/styles/mixins';
 
 .sql-scratchpad {
-  position: relative;
+  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 
   .sql-scratchpad-container {
     @include fillAbsolute;
@@ -30,7 +31,7 @@
     overflow: hidden;
 
     .sql-scratchpad-editor {
-      @include flex(0 1 50%);
+      @include flex(0 0 50%);
     }
 
     .sql-scratchpad-progress {
@@ -39,10 +40,29 @@
 
     .sql-scratchpad-actions {
       @include flex(0 0 25px);
+
+      button,
+      form {
+        display: inline-block;
+      }
     }
 
     .sql-scratchpad-result {
       @include flex(0 1 50%);
+      overflow: hidden;
+
+      h1 {
+        font-size: 18px;
+        color: #888;
+        font-style: italic;
+        margin: 15px 5px;
+      }
+
+      .hue-table-container {
+        height: 100%;
+        width: 100%;
+        overflow: auto;
+      }
     }
   }
 }

+ 3 - 2
desktop/core/src/desktop/js/apps/editor/components/sqlScratchpad/SqlScratchpad.vue

@@ -42,8 +42,8 @@
         <ResultTable :executable="activeExecutable" />
       </div>
     </div>
-    <div v-else-if="!loading && !executor">
-      {{ errorMessage || 'Failed loading the SQL Scratchpad!' }}
+    <div v-else-if="!loading && !executor && errorMessage">
+      {{ errorMessage }}
     </div>
   </div>
 </template>
@@ -58,6 +58,7 @@
   import { SqlReferenceProvider } from 'sql/reference/types';
 
   import './SqlScratchpad.scss';
+  import defer from '../../../../utils/timing/defer';
   import AceEditor from '../aceEditor/AceEditor.vue';
   import { ActiveStatementChangedEventDetails } from '../aceEditor/types';
   import ExecutableProgressBar from '../ExecutableProgressBar.vue';

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "gethue",
-  "version": "4.9.8",
+  "version": "4.9.9",
   "description": "Hue is an Open source SQL Query Editor for Databases/Warehouses",
   "keywords": [
     "Query Editor",