Merge pull request #42 from poloclub/UI-update

Final UI Update Before Spring Semester (11/19/2020)
poloclub · Nov 28, 2020 · 347220b · 347220b
2 parents 677790b + c359b75
commit 347220b
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/argo-lite/src/components/panels/GlobalPanel.jsx b/argo-lite/src/components/panels/GlobalPanel.jsx
@@ -96,7 +96,7 @@ class GlobalPanel extends React.Component {
  </p>
  </section>
  <section style={{marginTop:"-1em"}}>
- <svg width="220" height="10" className="gradient-preview">
+ <svg width="100%" height="10" className="gradient-preview">
  <defs>
  <linearGradient
  x1="0%"
@@ -120,7 +120,7 @@ class GlobalPanel extends React.Component {
  <rect
  x="0"
  y="0"
- width="220"
+ width="100%"
  height="50"
  fill="url(#theGradient)"
  />
@@ -150,7 +150,7 @@ class GlobalPanel extends React.Component {
  filterable={false}
  onItemSelect={it => (appState.graph.nodes.sizeBy = it)}
  >
- <Button iconName="filter-list" text={appState.graph.nodes.sizeBy} />
+ <Button text={appState.graph.nodes.sizeBy} />
  </Select>
  </span>
  </p>
@@ -164,7 +164,7 @@ class GlobalPanel extends React.Component {
  filterable={false}
  onItemSelect={it => (appState.graph.nodes.size.scale = it)}
  >
- <Button iconName="filter-list" text={appState.graph.nodes.size.scale} />
+ <Button text={appState.graph.nodes.size.scale} />
  </Select>
  </span>
  </p>
@@ -217,7 +217,7 @@ class GlobalPanel extends React.Component {
  filterable={false}
  onItemSelect={it => (appState.graph.nodes.shape = it)}
  >
- <Button iconName="polygon-filter" text={appState.graph.nodes.shape} />
+ <Button text={appState.graph.nodes.shape} />
  </Select>
  </span>
  </p></section> 

diff --git a/argo-lite/src/components/panels/LabelsPanel.jsx b/argo-lite/src/components/panels/LabelsPanel.jsx
@@ -68,15 +68,15 @@ class LabelsPanel extends React.Component {
  }}
  value={appState.graph.nodes.labelLength}
  />
- <br/>
+ <div style={{height: '30px'}} />
  <h6>Label By</h6> 
  <Select
  items={appState.graph.allPropertiesKeyList}
  itemRenderer={CommonItemRenderer}
  filterable={false}
  onItemSelect={it => (appState.graph.nodes.labelBy = it)}
  >
- <Button iconName="filter-list" text={appState.graph.nodes.labelBy} />
+ <Button text={appState.graph.nodes.labelBy} />
  </Select>
  </div>
  );

diff --git a/argo-lite/src/components/panels/SelectionPanel.jsx b/argo-lite/src/components/panels/SelectionPanel.jsx
@@ -45,6 +45,7 @@ class SelectionPanel extends React.Component {
  render() {
  return (
  <div>
+ <br/>
  <SwitchCollapsable
  name="Override Size"
  isOpen={this.state.sizeOptionOpen}
@@ -94,6 +95,7 @@ class SelectionPanel extends React.Component {
  />
  </div>
  </SwitchCollapsable>
+ <br/>
  <SwitchCollapsable
  name="Override Color"
  isOpen={this.state.colorOptionOpen}
@@ -126,7 +128,9 @@ class SelectionPanel extends React.Component {
  }}
  >
  <div className={classnames(Classes.CARD, "sub-option")}>
+ <section> <p style={{textAlign:"left"}}>
  Choose Color:
+ <span style={{float:"right"}}>
  <Popover2>
  <Button
  text=" "
@@ -147,8 +151,12 @@ class SelectionPanel extends React.Component {
  }}
  />
  </Popover2>
+ </span>
+ </p>
+ </section>
  </div>
  </SwitchCollapsable>
+ <br/>
  <SwitchCollapsable
  name="Override Label"
  isOpen={this.state.labelOptionOpen}
@@ -195,6 +203,7 @@ class SelectionPanel extends React.Component {
  />
  </div>
  </SwitchCollapsable>
+ <br/>
  <SwitchCollapsable
  name="Override Shape"
  isOpen={this.state.shapeOptionOpen}
@@ -227,7 +236,9 @@ class SelectionPanel extends React.Component {
  }}
  >
  <div className={classnames(Classes.CARD, "sub-option")}>
+ <section> <p style={{textAlign:"left"}}>
  Node Shape:
+ <span style={{float:"right"}}>
  <Select
  items={[
  "circle",
@@ -250,6 +261,9 @@ class SelectionPanel extends React.Component {
  >
  <Button text={appState.graph.overrideConfig.shape} />
  </Select>
+ </span>
+ </p>
+ </section>
  </div>
  </SwitchCollapsable>
  </div>

diff --git a/argo-lite/src/components/utils/SimpleSelect.jsx b/argo-lite/src/components/utils/SimpleSelect.jsx
@@ -10,6 +10,6 @@ export default ({ items, onSelect, value, fill = false }) => (
  filterable={false}
  onItemSelect={onSelect}
  >
- <Button iconName="filter-list" className={fill ? Classes.FILL : null} text={value} />
+ <Button className={fill ? Classes.FILL : null} text={value} />
  </Select>
 );