Merge branch 'master' into react-query-snippets

getredash · May 14, 2019 · 5d49731 · 5d49731
2 parents 8e82021 + 733b601
commit 5d49731
Show file tree

Hide file tree

Showing 120 changed files with 4,361 additions and 3,071 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -9,6 +9,6 @@ trim_trailing_whitespace = true
 indent_style = space
 indent_size = 4
 
-[*.{js,css,html}]
+[*.{js,jsx,css,less,html}]
 indent_style = space
 indent_size = 2
diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less
@@ -221,21 +221,61 @@
   }
 }
 
-// styling for short modals (no lines)
-.@{dialog-prefix-cls}.shortModal {
-  .@{dialog-prefix-cls} {
-    &-header,
-    &-footer {
-      border: none;
-      padding: 16px;
-    }
-    &-body {
-      padding: 10px 16px;
+.@{dialog-prefix-cls} {
+  // styling for short modals (no lines)
+  &.shortModal {
+    .@{dialog-prefix-cls} {
+      &-header,
+      &-footer {
+        border: none;
+        padding: 16px;
+      }
+
+      &-body {
+        padding: 10px 16px;
+      }
+
+      &-close-x {
+        width: 46px;
+        height: 46px;
+        line-height: 46px;
+      }
     }
-    &-close-x {
-      width: 46px;
-      height: 46px;
-      line-height: 46px;
+  }
+
+  // fullscreen modals
+  &-fullscreen {
+    .@{dialog-prefix-cls} {
+      position: absolute;
+      left: 15px;
+      top: 15px;
+      right: 15px;
+      bottom: 15px;
+      width: auto !important;
+      height: auto !important;
+      max-width: none;
+      max-height: none;
+      margin: 0;
+      padding: 0;
+
+      .@{dialog-prefix-cls}-content {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: auto;
+        height: auto;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .@{dialog-prefix-cls}-body {
+        flex: 1 1 auto;
+        overflow: auto;
+      }
     }
   }
 }
@@ -264,3 +304,7 @@
     max-width: 484px;
   }
 }
+
+.@{btn-prefix-cls} .@{iconfont-css-prefix}-ellipsis {
+  margin: 0 -7px;
+}
diff --git a/client/app/assets/less/inc/visualizations/misc.less b/client/app/assets/less/inc/visualizations/misc.less
@@ -1,4 +1,6 @@
 visualization-renderer {
+  display: block;
+
   .pagination,
   .ant-pagination {
     margin: 0;

diff --git a/client/app/assets/less/inc/visualizations/pivot-table.less b/client/app/assets/less/inc/visualizations/pivot-table.less
@@ -1,3 +1,3 @@
-pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
+.pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
   overflow: auto;
 }
diff --git a/client/app/assets/less/main.less b/client/app/assets/less/main.less
@@ -75,6 +75,7 @@
 @import 'redash/redash-table';
 @import 'redash/query';
 @import 'redash/tags-control';
+@import 'redash/css-logo';
 
 
 
diff --git a/client/app/assets/less/redash/css-logo.less b/client/app/assets/less/redash/css-logo.less
@@ -0,0 +1,88 @@
+// based on https://github.com/outbrain/tech-companies-logos-in-css/pull/28
+
+@primary: #ff7964;
+@shadow: #ef6c58;
+@bar: white;
+
+#css-logo {
+  width: 100px;
+  height: 100px;
+  position: relative;
+
+  #circle {
+    width: 79px;
+    height: 79px;
+    background-color: @shadow;
+    border-radius: 50%;
+    margin: auto;
+    overflow: hidden;
+    position: relative;
+
+    & > div {
+      width: 79px;
+      height: 73px;
+      background-color: @primary;
+      border-radius: 50%;
+      position: absolute;
+      top: 0;
+    }
+  }
+
+  #bars {
+    position: absolute;
+    left: 0;
+    top: 24px;
+    right: 0;
+    height: 33px;
+    display: flex;
+    padding: 0 22px 0;
+
+    .bar {
+      background: @bar;
+      box-shadow: 0px 2px 0 0 @shadow;
+      display: inline-block;
+      border-radius: 1px;
+      align-self: flex-end;
+      flex: 1;
+      margin: 0 2px;
+      border-radius: 3px;
+
+      &:nth-child(1) {
+        height: 32%;
+      }
+
+      &:nth-child(2) {
+        height: 71%;
+      }
+
+      &:nth-child(3) {
+        height: 50%;
+      }
+
+      &:nth-child(4) {
+        height: 100%;
+      }
+    }
+  }
+
+  #point,
+  #point > div {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 17px solid @shadow;
+    border-right-color: transparent !important;
+    border-bottom-color: transparent !important;
+    bottom: 0;
+    left: 48px;
+    transform: scaleX(0.87);
+    transform-origin: left;
+  }
+
+  #point > div {
+    bottom: -12px;
+    border-color: @primary;
+    transform: scaleX(1.04);
+    left: -17px;
+  }
+}
diff --git a/client/app/assets/less/redash/query.less b/client/app/assets/less/redash/query.less
@@ -222,7 +222,7 @@ edit-in-place p.editable:hover {
 
 .widget-wrapper {
   .body-container {
-    filters {
+    .filters-wrapper {
       display: block;
       padding-left: 15px;
     }
@@ -264,6 +264,7 @@ a.label-tag {
 .query-page-wrapper {
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
 }
 
 .query-fullscreen {
@@ -342,7 +343,7 @@ a.label-tag {
       border-bottom: 1px solid #efefef;
     }
 
-    pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
+    .pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
       overflow: visible;
     }
 
@@ -557,6 +558,10 @@ nav .rg-bottom {
   text-transform: capitalize;
 }
 
+.edit-visualization {
+    margin-right: 5px;
+}
+
 // Smaller screens
 
 @media (max-width: 880px) {

diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
@@ -237,6 +237,10 @@ body {
   float: right;
 }
 
+.visual-card-list {
+  margin: -5px 0 0 -5px; // compensate for .visual-card spacing
+}
+
 .visual-card {
   background: #FFFFFF;
   border: 1px solid fade(@redash-gray, 15%);
@@ -299,7 +303,6 @@ body {
   .visual-card {
     width: 100%;
     padding: 5px;
-    margin: 5px 0;
 
     img {
       width: 48px;
@@ -936,4 +939,60 @@ text.slicetext {
 
 .markdown strong {
   font-weight: bold;
+}
+
+.markdown img {
+  max-width: 100%;
+}
+
+.loading-indicator {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin: -50px 0 0 -50px; // center
+  width: 100px;
+  height: 100px;
+  transition-duration: 150ms;
+  transition-timing-function: linear;
+  transition-property: opacity, transform;
+
+  #css-logo {
+    animation: hover 2s infinite;
+  }
+
+  #shadow {
+    width: 33px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: black;
+    opacity: 0.25;
+    display: block;
+    position: absolute;
+    left: 34px;
+    top: 115px;
+    animation: shadow 2s infinite;
+  }
+
+  @keyframes hover {
+    50% {
+      transform: translateY(-5px);
+    }
+  }
+  @keyframes shadow {
+    50% {
+      transform: scaleX(0.9);
+      opacity: 0.2;
+    }
+  }
+}
+
+// hide indicator when app-view has content
+app-view:not(:empty) ~ .loading-indicator {
+  opacity: 0;
+  transform: scale(0.9);
+  pointer-events: none;
+
+  * {
+    animation: none !important;
+  }
 }
diff --git a/client/app/components/ColorBox.jsx b/client/app/components/ColorBox.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+
+import './color-box.less';
+
+export function ColorBox({ color }) {
+  return <span style={{ backgroundColor: color }} />;
+}
+
+ColorBox.propTypes = {
+  color: PropTypes.string,
+};
+
+ColorBox.defaultProps = {
+  color: 'transparent',
+};
+
+export default function init(ngModule) {
+  ngModule.component('colorBox', react2angular(ColorBox));
+}
+
+init.init = true;