add initial transitions

matt-deboer · Sep 22, 2017 · 7d7614b · 7d7614b
1 parent 12bdb8f
commit 7d7614b
Show file tree

Hide file tree

Showing 8 changed files with 1,806 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -145,6 +145,7 @@ Roadmap:
   - [x] Create/Edit validation for all resources
   - [x] Provide better hints/tool-tips to explain what functions are available, and what they mean
   - [ ] Large scale performance testing (1000's of resources)
+  - [ ] Mobile testing/fixes/support
 
 - [ ] Overview/Homepage:
   - [ ] Local storage (or cookies) used to remember previous selected namespaces for a given user

diff --git a/pkg/ui/package.json b/pkg/ui/package.json
@@ -37,6 +37,7 @@
     "react-scripts": "1.0.13",
     "react-sizeme": "^2.3.2",
     "react-tap-event-plugin": "2.0.1",
+    "react-transition-group": "^1.2.0",
     "recharts": "0.20.8",
     "redux": "^3.6.0",
     "redux-logger": "^3.0.6",

diff --git a/pkg/ui/src/components/WorkloadsPage.js b/pkg/ui/src/components/WorkloadsPage.js
@@ -134,6 +134,7 @@ const styles = {
     margin: 5,
     height: 'calc(100vh - 110px)',
     border: '1px solid rgba(33,33,33,0.8)',
+    position: 'absolute,'
   },
   statusIcon: {
     marginLeft: 10,

diff --git a/pkg/ui/src/components/access/AccessControlsPage.js b/pkg/ui/src/components/access/AccessControlsPage.js
@@ -79,13 +79,14 @@ class ClusterPage extends React.Component {
     let activeTab = query.view || 'resources'
 
     return (
-    <div style={{border: '1px solid rgba(33,33,33,0.8)'}}>
+    <div style={{border: '1px solid rgba(33,33,33,0.8)', position: 'absolute'}}>
         <Tabs
-          style={{background: 'white'}}
+          style={{background: 'white', height: 'calc(100vh - 112px)', width: 'calc(100vw - 50px)'}}
           tabItemContainerStyle={styles.tabs}
           contentContainerStyle={{overflow: 'hidden'}}
           inkBarStyle={styles.tabsInkBar}
           value={activeTab}
+          className={'tabs access'}
           >
           {this.tabs.map(tab => 
             <Tab label={tab.label} key={tab.name} value={tab.name} onActive={this.props.selectView.bind(this, tab.name)}>

diff --git a/pkg/ui/src/components/cluster/ClusterPage.js b/pkg/ui/src/components/cluster/ClusterPage.js
@@ -92,13 +92,14 @@ class ClusterPage extends React.Component {
     let activeTab = query.view || 'nodes'
 
     return (
-    <div style={{border: '1px solid rgba(33,33,33,0.8)'}}>
+    <div style={{border: '1px solid rgba(33,33,33,0.8)', position: 'absolute'}}>
         <Tabs
-          style={{background: 'white'}}
+          style={{background: 'white', height: 'calc(100vh - 112px)', width: 'calc(100vw - 50px)'}}
           tabItemContainerStyle={styles.tabs}
           contentContainerStyle={{overflow: 'hidden'}}
           inkBarStyle={styles.tabsInkBar}
           value={activeTab}
+          className={'tabs cluster'}
           >
           {this.tabs.map(tab => 
             <Tab label={tab.label} key={tab.name} value={tab.name} onActive={this.props.selectView.bind(this, tab.name)}>