Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Material tooltip #167

Merged
merged 2 commits into from
Jul 23, 2018
Merged

Material tooltip #167

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
510dca4
enforce Open Sans as default on all elements besides psp-row labels
sc1f Jul 20, 2018
0b0a609
Sort rows will no longer show in tooltip
sc1f Jul 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
enforce Open Sans as default on all elements besides psp-row labels
  • Loading branch information
@sc1f
sc1f committed Jul 20, 2018
commit 510dca4f8bb7c5cf7308a4b0d9b74853d4a5d02d
17 changes: 7 additions & 10 deletions packages/perspective-viewer/src/less/default.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
*
*/


@border-color: #ccc;
@sans-serif-fonts: Arial, monospace;

.psp-text-field {
position: relative;
Expand Down Expand Up @@ -92,6 +94,8 @@

perspective-viewer {

font-family: @sans-serif-fonts;

.awesomplete > ul {
border-radius: 0px;
margin: 0px;
Expand Down Expand Up @@ -166,7 +170,6 @@ perspective-viewer {
font-family: monospace;
}


perspective-row {
border: 0px solid rgba(0,0,0,0);

Expand Down Expand Up @@ -219,9 +222,6 @@ perspective-viewer {
}
}


font-family: Arial;

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
Expand All @@ -230,16 +230,13 @@ perspective-viewer {
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

svg text {
font-family: Arial !important;
font-family: @sans-serif-fonts !important;
}

svg text {
font-family: Arial !important;

}
svg .highcharts-axis-title, svg .highcharts-axis-title {
font-family: Arial !important;
font-family: @sans-serif-fonts !important;
}
svg .highcharts-legend-box {
fill: none;
Expand Down
16 changes: 9 additions & 7 deletions packages/perspective-viewer/src/less/material.dark.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@

@border-color: #3B3F46;

@coolgrey100: #ECEFF1;
@coolgrey200: #CFD8DC;
@coolgrey800: #2A2C2F;
@coolgrey900: #242526;
@coolgrey700: #2F3136;
Expand Down Expand Up @@ -81,7 +83,7 @@ perspective-viewer #app {
border-top-color: @coolgrey900 !important;

select:focus {
color: #FFF !important;
color: @coolgrey200 !important;
}

.highcharts-heatmap-gradient-full {
Expand All @@ -106,7 +108,7 @@ perspective-viewer #app {
}

svg g.highcharts-axis-labels text {
fill: #FFF !important;
fill: @coolgrey200 !important;
}

rect.highcharts-background {
Expand All @@ -128,7 +130,7 @@ perspective-viewer #app {
background-color: @coolgrey700;

tspan, text {
fill: #FFF !important;
fill: @coolgrey200 !important;
}

rect, image {
Expand All @@ -143,7 +145,7 @@ perspective-viewer #app {
input, select, ul, #filters {
border-right: 0px;
background-color: @coolgrey800;
color: #fff;
color: @coolgrey200;
border-color: #666;
}

Expand All @@ -166,7 +168,7 @@ perspective-viewer #app {
perspective-row {

#psp_row {
color: #fff;
color: @coolgrey200;
}
}

Expand All @@ -180,7 +182,7 @@ perspective-viewer #app {

.row_draggable {
border-color: #666;
color: #fff;
color: @coolgrey200;
}
}
}
Expand Down Expand Up @@ -238,7 +240,7 @@ perspective-viewer #app {
}

#name {
color: #fff;
color: @coolgrey200;
}

#name:before {
Expand Down
107 changes: 52 additions & 55 deletions packages/perspective-viewer/src/less/material.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

input {
padding: 6px 10px 6px 0px;
padding: 6px 10px 6px 0;
}

button {
text-transform: uppercase;
}

select, ul {
padding: 0px 10px 0px 0px;
padding: 0 10px 0 0;
}

perspective-viewer:not([settings]) {
Expand Down Expand Up @@ -56,16 +56,16 @@ perspective-viewer.dragging #app {
}
}
#active_columns perspective-row[drop-target] .row_draggable, .rrow ul {
margin-top: 0px;
margin-top: 0;
}
}

#top_panel .rrow > * {
border-top: 0px !important;
border-left: 0px !important;
border-right: 0px !important;
margin-top: 0px;
margin-left: 0px;
border-top: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
margin-top: 0;
margin-left: 0;
}
}

Expand Down Expand Up @@ -108,10 +108,27 @@ perspective-viewer {
}
}
}

#app #top_panel {

#row_pivots label:before {
content: "Group By";
}

#column_pivots label:before {
content: "Split By";
}
}
}

perspective-viewer #app {

input, select, ul, #filters {
border-right: 0;
background-color: #eee;
color: #666;
}

perspective-hypergrid {
position: absolute;
top: 24px;
Expand All @@ -120,35 +137,29 @@ perspective-viewer #app {
right: 24px;
}

input, select, ul, #filters {
border-right: 0px;
background-color: #eee;
color: #666;
}

#filters {
padding-left: 0px;
padding-left: 0;
}

perspective-row .string::before,
perspective-row .float::before,
perspective-row .integer::before,
perspective-row .date::before {
font-family: "Roboto Mono", monospace;
padding-left: 0px;
font-family: @monospace-fonts;
padding-left: 0;
}

perspective-row {

#psp_row {
margin-bottom: 0px;
margin-bottom: 0;
color: #666;
margin-right: 0px;
margin-right: 0;
}
}

#side_panel {
padding: 24px 0px 0px 0px;
padding: 24px 0 0 0;
max-width: 250px;

.is_visible {
Expand All @@ -160,16 +171,16 @@ perspective-viewer #app {
min-height: 24px;
max-height: 24px;
border-left-width: 12px;
border-right-width: 0px;
border-right-width: 0;
z-index: 1;
margin: 0;
}

#active_columns, #inactive_columns {
will-change: opacity, height, margin, transform;
margin-top: 0px;
margin-bottom:0px;
padding: 24px 24px 24px 0px;
margin-top: 0;
margin-bottom: 0;
padding: 24px 24px 24px 0;

perspective-row {
position: relative;
Expand All @@ -184,21 +195,21 @@ perspective-viewer #app {
height: 26px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
top: 0;
left: 0;
width: 48px;
text-align: center;
}

.row_draggable {
background: none;
border-right: 0px;
border-right: 0;
color: #666;
margin-left: 48px;
padding: 4px 3px 4px 0px;
padding: 4px 3px 4px 0;

select {
margin: 6px 0px 0px 20px;
margin: 6px 0 0 20px;
}
}
}
Expand All @@ -211,7 +222,7 @@ perspective-viewer #app {
margin-left: 46px;

select#vis_selector {
margin: 0px 12px 24px 0px;
margin: 0 12px 24px 0;
}
}

Expand All @@ -230,15 +241,15 @@ perspective-viewer #app {
}

perspective-row:last-child .row_draggable {
border-bottom: 0px solid #ccc;
border-bottom: 0 solid #ccc;
}
}

#inactive_columns {
padding-top: 24px;

perspective-row {
margin-top: 0px;
margin-top: 0;
}

perspective-row:hover {
Expand All @@ -249,8 +260,8 @@ perspective-viewer #app {

perspective-row.active {
display: block;
height: 0px;
max-height: 0px;
height: 0;
max-height: 0;
overflow: hidden;
}

Expand Down Expand Up @@ -306,52 +317,38 @@ perspective-viewer #app {
}

#top_panel {
padding: 24px 0px 0px 0px;
padding: 24px 0 0 0;
.rrow ul {
padding: 3px 0px 0px 0px;
padding: 3px 0 0 0;
}

.psp-text-field {
background: none;
}
.rrow {
margin: 0px 24px 24px 0px;
margin: 0 24px 24px 0;
}
}

.rrow {
margin: 0px 24px 24px 0px;
margin: 0 24px 24px 0;
}


#pivot_chart {
padding: 24px 24px 24px 24px;
.chart {
padding: 0px;
padding: 0;
}
}
}

perspective-viewer .psp-text-field__input + label {
padding-left: 0px;
padding-left: 0;
}

.dropping .psp-text-field label, perspective-viewer .psp-text-field__input:not(:empty) + label {
padding-left: 0px;
padding-left: 0;
display: inline-block;
top: -8px
}

perspective-viewer {

#app #top_panel {

#row_pivots label:before {
content: "Group By";
}

#column_pivots label:before {
content: "Split By";
}
}
}