Skip to content
Snippets Groups Projects
Commit c600c896 authored by Tom Robinson's avatar Tom Robinson
Browse files

Add table/db icons to data sector list, tweak hover/selected states

parent dceb0690
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/css/query_builder.css
+ 19
− 9
View file @ c600c896
......@@ -583,7 +583,25 @@
.List-section-header .Icon,
.List-item .Icon {
color: #ddd;
color: #DFE8EA;
}
.List-section-header {
color: var(--default-font-color);
border: 2px solid transparent; /* so that spacing matches .List-item */
}
/* these crazy rules are needed to get currentColor to propagate to the right elements in the right states */
.List-section .List-section-header:hover,
.List-section .List-section-header:hover .Icon,
.List-section .List-section-header:hover .List-section-title,
.List-section--open .List-section-header,
.List-section--open .List-section-header .List-section-icon .Icon {
color: currentColor;
}
.List-section--open .List-section-header .List-section-title {
color: var(--default-font-color);
}
.List-item:hover,
......@@ -602,14 +620,6 @@
color: white;
}
.List-section-header {
color: var(--default-font-color);
}
.List-section-header:hover {
color: currentColor;
}
.List-item:hover .Icon,
.List-item--selected .Icon {
color: white;
......
frontend/src/icon_paths.js
+ 2
− 0
View file @ c600c896
......@@ -42,6 +42,7 @@ export var ICON_PATHS = {
contract: 'M18.0015892,0.327942852 L18.0015892,14 L31.6736463,14 L26.6544389,8.98079262 L32,3.63523156 L28.3647684,0 L23.0192074,5.34556106 L18.0015892,0.327942852 Z M14,31.6720571 L14,18 L0.327942852,18 L5.34715023,23.0192074 L0.00158917013,28.3647684 L3.63682073,32 L8.98238179,26.6544389 L14,31.6720571 Z',
cursor_move: 'M14.8235294,14.8235294 L14.8235294,6.58823529 L17.1764706,6.58823529 L17.1764706,14.8235294 L25.4117647,14.8235294 L25.4117647,17.1764706 L17.1764706,17.1764706 L17.1764706,25.4117647 L14.8235294,25.4117647 L14.8235294,17.1764706 L6.58823529,17.1764706 L6.58823529,14.8235294 L14.8235294,14.8235294 L14.8235294,14.8235294 Z M16,0 L20.1176471,6.58823529 L11.8823529,6.58823529 L16,0 Z M11.8823529,25.4117647 L20.1176471,25.4117647 L16,32 L11.8823529,25.4117647 Z M32,16 L25.4117647,20.1176471 L25.4117647,11.8823529 L32,16 Z M6.58823529,11.8823529 L6.58823529,20.1176471 L0,16 L6.58823529,11.8823529 Z',
cursor_resize: 'M17.4017952,6.81355995 L15.0488541,6.81355995 L15.0488541,25.6370894 L17.4017952,25.6370894 L17.4017952,6.81355995 Z M16.2253247,0.225324657 L20.3429717,6.81355995 L12.1076776,6.81355995 L16.2253247,0.225324657 Z M12.1076776,25.6370894 L20.3429717,25.6370894 L16.2253247,32.2253247 L12.1076776,25.6370894 Z',
database: 'M1.18693219e-08,10.5691766 C-1.48366539e-08,7.99678991 1.18693222e-08,4.59790181 1.18693222e-08,4.59790181 C1.18693222e-08,4.59790181 1.58917246,5.78437724e-10 15.711134,0 C29.8330955,-5.78436122e-10 32,4.16069339 32,4.59790181 L32,10.5405377 C32,10.5405377 30.5498009,15.2177783 16.5227645,15.2177785 C2.49572804,15.2177788 2.1498337e-08,11.4966675 1.18693219e-08,10.5691766 Z M0.265241902,22.2508255 C0.265241902,22.2508255 3.24765892e-17,22.3239396 0,22.9593732 L3.3438581e-16,28.3247528 C3.3438581e-16,28.3247528 1.42644742,32.8877413 15.943795,32.8877413 C30.4611426,32.8877413 32,28.3654698 32,28.3654698 C32,28.3654698 32,22.9095461 32,22.9095462 C32,22.3279008 31.6616273,22.2210746 31.6616273,22.2210746 C31.6616273,22.2210746 29.7117464,26.2784187 16.0116409,26.2784187 C2.31153546,26.2784187 0.265241902,22.2508255 0.265241902,22.2508255 Z M0.265241902,13.3619366 C0.265241902,13.3619366 3.24765892e-17,13.4350508 0,14.0704843 L3.3438581e-16,19.4358639 C3.3438581e-16,19.4358639 1.42644742,23.9988524 15.943795,23.9988524 C30.4611426,23.9988524 32,19.4765809 32,19.4765809 C32,19.4765809 32,14.0206573 32,14.0206573 C32,13.4390119 31.6616273,13.3321857 31.6616273,13.3321857 C31.6616273,13.3321857 29.7117464,17.3895298 16.0116409,17.3895298 C2.31153546,17.3895298 0.265241902,13.3619366 0.265241902,13.3619366 Z',
dashboards: 'M17,5.49100518 L17,10.5089948 C17,10.7801695 17.2276528,11 17.5096495,11 L26.4903505,11 C26.7718221,11 27,10.7721195 27,10.5089948 L27,5.49100518 C27,5.21983051 26.7723472,5 26.4903505,5 L17.5096495,5 C17.2281779,5 17,5.22788048 17,5.49100518 Z M18.5017326,14 C18.225722,14 18,13.77328 18,13.4982674 L18,26.5017326 C18,26.225722 18.22672,26 18.5017326,26 L5.49826741,26 C5.77427798,26 6,26.22672 6,26.5017326 L6,13.4982674 C6,13.774278 5.77327997,14 5.49826741,14 L18.5017326,14 Z M14.4903505,6 C14.2278953,6 14,5.78028538 14,5.49100518 L14,10.5089948 C14,10.2167107 14.2224208,10 14.4903505,10 L5.50964952,10 C5.77210473,10 6,10.2197146 6,10.5089948 L6,5.49100518 C6,5.78328929 5.77757924,6 5.50964952,6 L14.4903505,6 Z M26.5089948,22 C26.2251201,22 26,21.7774008 26,21.4910052 L26,26.5089948 C26,26.2251201 26.2225992,26 26.5089948,26 L21.4910052,26 C21.7748799,26 22,26.2225992 22,26.5089948 L22,21.4910052 C22,21.7748799 21.7774008,22 21.4910052,22 L26.5089948,22 Z M26.5089948,14 C26.2251201,14 26,13.7774008 26,13.4910052 L26,18.5089948 C26,18.2251201 26.2225992,18 26.5089948,18 L21.4910052,18 C21.7748799,18 22,18.2225992 22,18.5089948 L22,13.4910052 C22,13.7748799 21.7774008,14 21.4910052,14 L26.5089948,14 Z M26.4903505,6 C26.2278953,6 26,5.78028538 26,5.49100518 L26,10.5089948 C26,10.2167107 26.2224208,10 26.4903505,10 L17.5096495,10 C17.7721047,10 18,10.2197146 18,10.5089948 L18,5.49100518 C18,5.78328929 17.7775792,6 17.5096495,6 L26.4903505,6 Z M5,13.4982674 L5,26.5017326 C5,26.7769181 5.21990657,27 5.49826741,27 L18.5017326,27 C18.7769181,27 19,26.7800934 19,26.5017326 L19,13.4982674 C19,13.2230819 18.7800934,13 18.5017326,13 L5.49826741,13 C5.22308192,13 5,13.2199066 5,13.4982674 Z M5,5.49100518 L5,10.5089948 C5,10.7801695 5.22765279,11 5.50964952,11 L14.4903505,11 C14.7718221,11 15,10.7721195 15,10.5089948 L15,5.49100518 C15,5.21983051 14.7723472,5 14.4903505,5 L5.50964952,5 C5.22817786,5 5,5.22788048 5,5.49100518 Z M21,21.4910052 L21,26.5089948 C21,26.7801695 21.2278805,27 21.4910052,27 L26.5089948,27 C26.7801695,27 27,26.7721195 27,26.5089948 L27,21.4910052 C27,21.2198305 26.7721195,21 26.5089948,21 L21.4910052,21 C21.2198305,21 21,21.2278805 21,21.4910052 Z M21,13.4910052 L21,18.5089948 C21,18.7801695 21.2278805,19 21.4910052,19 L26.5089948,19 C26.7801695,19 27,18.7721195 27,18.5089948 L27,13.4910052 C27,13.2198305 26.7721195,13 26.5089948,13 L21.4910052,13 C21.2198305,13 21,13.2278805 21,13.4910052 Z',
download: {
path: 'M4,8 L4,0 L7,0 L7,8 L10,8 L5.5,13.25 L1,8 L4,8 Z M11,14 L0,14 L0,17 L11,17 L11,14 Z',
......@@ -88,6 +89,7 @@ export var ICON_PATHS = {
attrs: { viewBox: '0 0 24 24'}
},
table: 'M13.6373197,13.6373197 L18.3626803,13.6373197 L18.3626803,18.3626803 L13.6373197,18.3626803 L13.6373197,13.6373197 Z M18.9533504,18.9533504 L23.6787109,18.9533504 L23.6787109,23.6787109 L18.9533504,23.6787109 L18.9533504,18.9533504 Z M13.6373197,18.9533504 L18.3626803,18.9533504 L18.3626803,23.6787109 L13.6373197,23.6787109 L13.6373197,18.9533504 Z M8.32128906,18.9533504 L13.0466496,18.9533504 L13.0466496,23.6787109 L8.32128906,23.6787109 L8.32128906,18.9533504 Z M8.32128906,8.32128906 L13.0466496,8.32128906 L13.0466496,13.0466496 L8.32128906,13.0466496 L8.32128906,8.32128906 Z M8.32128906,13.6373197 L13.0466496,13.6373197 L13.0466496,18.3626803 L8.32128906,18.3626803 L8.32128906,13.6373197 Z M18.9533504,8.32128906 L23.6787109,8.32128906 L23.6787109,13.0466496 L18.9533504,13.0466496 L18.9533504,8.32128906 Z M18.9533504,13.6373197 L23.6787109,13.6373197 L23.6787109,18.3626803 L18.9533504,18.3626803 L18.9533504,13.6373197 Z M13.6373197,8.32128906 L18.3626803,8.32128906 L18.3626803,13.0466496 L13.6373197,13.0466496 L13.6373197,8.32128906 Z',
table2: 'M12,15 L20,15 L20,19 L12,19 L12,15 Z M10,15 L3,15 L3,15 L3,19 L3,19 L10,19 L10,15 Z M10,21 L3,21 L3,21 L3,25 L29,25 L29,21 L22,21 L22,21 L22,25 L20,25 L20,21 L12,21 L12,25 L10,25 L10,21 Z M12,9 L20,9 L20,9 L20,13 L12,13 L12,9 Z M10,9 L3,9 L3,9 L3,13 L3,13 L10,13 L10,9 Z M22,15 L29,15 L29,19 L22,19 L22,15 Z M22,9 L29,9 L29,13 L22,13 L22,9 L22,9 Z M3,7 L3,3 L29,3 L29,7 L3,7 L3,7 Z M1.5,28 L0,28 L0,0 L1.5,0 L32,0 L32,1.5 L32,26.5 L32,28 L1.5,28 Z',
trash: 'M4.31904507,29.7285487 C4.45843264,30.9830366 5.59537721,32 6.85726914,32 L20.5713023,32 C21.8337371,32 22.9701016,30.9833707 23.1095264,29.7285487 L25.1428571,11.4285714 L2.28571429,11.4285714 L4.31904507,29.7285487 L4.31904507,29.7285487 Z M6.85714286,4.57142857 L8.57142857,0 L18.8571429,0 L20.5714286,4.57142857 L25.1428571,4.57142857 C27.4285714,4.57142857 27.4285714,9.14285714 27.4285714,9.14285714 L13.7142857,9.14285714 L-1.0658141e-14,9.14285714 C-1.0658141e-14,9.14285714 -1.0658141e-14,4.57142857 2.28571429,4.57142857 L6.85714286,4.57142857 L6.85714286,4.57142857 Z M9.14285714,4.57142857 L18.2857143,4.57142857 L17.1428571,2.28571429 L10.2857143,2.28571429 L9.14285714,4.57142857 L9.14285714,4.57142857 Z',
unknown: 'M16.5,26.5 C22.0228475,26.5 26.5,22.0228475 26.5,16.5 C26.5,10.9771525 22.0228475,6.5 16.5,6.5 C10.9771525,6.5 6.5,10.9771525 6.5,16.5 C6.5,22.0228475 10.9771525,26.5 16.5,26.5 L16.5,26.5 Z M16.5,23.5 C12.6340068,23.5 9.5,20.3659932 9.5,16.5 C9.5,12.6340068 12.6340068,9.5 16.5,9.5 C20.3659932,9.5 23.5,12.6340068 23.5,16.5 C23.5,20.3659932 20.3659932,23.5 16.5,23.5 L16.5,23.5 Z',
"illustration-icon-pie": {
......
frontend/src/query_builder/AccordianList.jsx
+ 17
− 8
View file @ c600c896
......@@ -62,15 +62,16 @@ export default class AccordianList extends Component {
}
}
renderItem(item) {
renderItem(item, itemIndex) {
if (this.props.renderItem) {
return this.props.renderItem(item);
return this.props.renderItem(item, itemIndex);
} else {
return (
<div className="flex-full flex">
<a className="flex-full flex align-center px2 py1 cursor-pointer"
<a className="flex-full flex align-center px1 py1 cursor-pointer"
onClick={this.onChange.bind(this, item)}
>
{ this.renderItemIcon(item, itemIndex) }
<h4 className="List-item-title ml2">{item.name}</h4>
</a>
</div>
......@@ -78,9 +79,17 @@ export default class AccordianList extends Component {
}
}
renderItemIcon(item, itemIndex) {
if (this.props.renderItemIcon) {
return this.props.renderItemIcon(item, itemIndex);
} else {
return null;
}
}
renderSectionIcon(section, sectionIndex) {
if (this.props.renderSectionIcon) {
return this.props.renderSectionIcon(section, sectionIndex);
return <span className="mr2">{this.props.renderSectionIcon(section, sectionIndex)}</span>;
} else {
return null;
}
......@@ -93,13 +102,13 @@ export default class AccordianList extends Component {
return (
<div className={this.props.className} style={{width: '300px'}}>
{sections.map((section, sectionIndex) =>
<section key={sectionIndex}>
<section key={sectionIndex} className={cx("List-section", { "List-section--open": openSection === sectionIndex })}>
{ section.name != null ?
<div className="p1 border-bottom">
{ sections.length > 1 ?
<div className="List-section-header px2 py1 cursor-pointer full flex align-center" onClick={() => this.toggleSection(sectionIndex)}>
{ this.renderSectionIcon(section, sectionIndex) }
<h4>{section.name}</h4>
<div className="List-section-header px1 py1 cursor-pointer full flex align-center" onClick={() => this.toggleSection(sectionIndex)}>
<span className="List-section-icon">{ this.renderSectionIcon(section, sectionIndex) }</span>
<h4 className="List-section-title">{section.name}</h4>
<span className="flex-align-right">
<Icon name={openSection === sectionIndex ? "chevronup" : "chevrondown"} width={12} height={12} />
</span>
......
frontend/src/query_builder/DataSelector.jsx
+ 11
− 1
View file @ c600c896
......@@ -12,7 +12,7 @@ export default class DataSelector extends Component {
constructor(props, context) {
super(props, context);
_.bindAll(this, "onChange", "itemIsSelected", "sectionIsSelected");
_.bindAll(this, "onChange", "itemIsSelected", "sectionIsSelected", "renderSectionIcon", "renderItemIcon");
}
static propTypes = {
......@@ -57,6 +57,14 @@ export default class DataSelector extends Component {
}
}
renderSectionIcon() {
return <Icon name="database" width="18" height="18" />
}
renderItemIcon() {
return <Icon name="table2" width="18" height="18" />
}
getDatabaseId() {
return this.props.query.database;
}
......@@ -127,6 +135,8 @@ export default class DataSelector extends Component {
onChange={this.onChange}
sectionIsSelected={this.sectionIsSelected}
itemIsSelected={this.itemIsSelected}
renderSectionIcon={this.renderSectionIcon}
renderItemIcon={this.renderItemIcon}
/>
</PopoverWithTrigger>
</div>
......
frontend/src/query_builder/FieldList.jsx
+ 2
− 6
View file @ c600c896
......@@ -88,7 +88,7 @@ export default class FieldList extends Component {
return (
<div className="flex-full flex">
<a className="flex-full flex align-center px2 py1 cursor-pointer"
<a className="flex-full flex align-center px1 py1 cursor-pointer"
onClick={this.props.onFieldChange.bind(null, item.value)}
>
{ this.renderTypeIcon(item.field) }
......@@ -134,11 +134,7 @@ export default class FieldList extends Component {
renderSectionIcon(section, sectionIndex) {
if (sectionIndex > 0) {
return (
<span className="mr2">
<Icon name="connections" width={18} height={18} />
</span>
);
return <Icon name="connections" width={18} height={18} />
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment