You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@senssoft.apache.org by ar...@apache.org on 2016/12/16 16:46:32 UTC
[2/3] incubator-senssoft-tap git commit: Modified TAP styling and
theming
Modified TAP styling and theming
Project: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/commit/caa718a3
Tree: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/tree/caa718a3
Diff: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/diff/caa718a3
Branch: refs/heads/refactor
Commit: caa718a3d04d1602150de9b10dd9d7ea2ce193f2
Parents: b3268d5
Author: Arthi Vezhavendan <ar...@gmail.com>
Authored: Fri Dec 16 11:45:37 2016 -0500
Committer: Arthi Vezhavendan <ar...@gmail.com>
Committed: Fri Dec 16 11:45:37 2016 -0500
----------------------------------------------------------------------
public/components/AppCard.jsx | 2 +-
public/components/AppProfile.jsx | 4 +--
public/components/Home.jsx | 2 +-
public/components/OrgProfile.jsx | 2 +-
public/components/visualizations/Counts.jsx | 1 +
.../components/visualizations/GraphMetrics.jsx | 21 +++++++-----
.../components/visualizations/HorizontalBar.jsx | 23 ++++++++-----
.../components/visualizations/VerticalBar.jsx | 22 +++++++-----
public/containers/Login.jsx | 4 +--
public/containers/Main.jsx | 6 ++--
public/containers/SignUp.jsx | 4 +--
semantic/src/site/globals/site.variables | 31 +++++++++++++++++
semantic/src/theme.config | 2 +-
stylesheets/main.scss | 36 +++++++++++++++++---
14 files changed, 119 insertions(+), 41 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/AppCard.jsx
----------------------------------------------------------------------
diff --git a/public/components/AppCard.jsx b/public/components/AppCard.jsx
index 3a167b8..41d435a 100644
--- a/public/components/AppCard.jsx
+++ b/public/components/AppCard.jsx
@@ -21,7 +21,7 @@ class AppCard extends Component {
const { app } = this.props;
return (
- <div className='ui segment'>
+ <div className='ui segment' id='app-list'>
<div className='ui tiny header'>
{app.name}
</div>
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/AppProfile.jsx
----------------------------------------------------------------------
diff --git a/public/components/AppProfile.jsx b/public/components/AppProfile.jsx
index bbcff77..09ac905 100644
--- a/public/components/AppProfile.jsx
+++ b/public/components/AppProfile.jsx
@@ -29,12 +29,12 @@ class AppProfile extends Component {
{name}
</div>
<Link to={`/app/${id}/settings`}>
- <div className='ui brown button'>
+ <div className='ui teal button'>
Settings
</div>
</Link>
<Link to={`/app/${id}/results`}>
- <div className='ui brown button'>
+ <div className='ui teal button'>
Results
</div>
</Link>
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/Home.jsx
----------------------------------------------------------------------
diff --git a/public/components/Home.jsx b/public/components/Home.jsx
index 08f6a34..c60be36 100644
--- a/public/components/Home.jsx
+++ b/public/components/Home.jsx
@@ -20,7 +20,7 @@ export default class Home extends Component {
return (
<div id='homepage-container'>
- <div id='main-masthead' className='ui masthead center aligned brown inverted vertical segment'>
+ <div id='main-masthead' className='ui masthead center aligned teal inverted vertical segment'>
<h1 className='ui header'>Tap</h1>
<h2 className='ui header'>Registration and Visualization Portal</h2>
</div>
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/OrgProfile.jsx
----------------------------------------------------------------------
diff --git a/public/components/OrgProfile.jsx b/public/components/OrgProfile.jsx
index bd33d56..903603c 100644
--- a/public/components/OrgProfile.jsx
+++ b/public/components/OrgProfile.jsx
@@ -29,7 +29,7 @@ class OrgProfile extends Component {
{name}
</div>
<Link to={`/org/${id}/settings`}>
- <div className='ui brown button'>
+ <div className='ui teal button'>
Settings
</div>
</Link>
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/visualizations/Counts.jsx
----------------------------------------------------------------------
diff --git a/public/components/visualizations/Counts.jsx b/public/components/visualizations/Counts.jsx
index c187112..f8d1cbc 100644
--- a/public/components/visualizations/Counts.jsx
+++ b/public/components/visualizations/Counts.jsx
@@ -95,6 +95,7 @@ class Counts extends Component {
<div id='counts-details' className='ui segment'>
Activity Details
<br></br>
+ <br></br>
Name: {activity.name}
<br></br>
Element: {activity.ele}
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/visualizations/GraphMetrics.jsx
----------------------------------------------------------------------
diff --git a/public/components/visualizations/GraphMetrics.jsx b/public/components/visualizations/GraphMetrics.jsx
index fcb566f..0dca235 100644
--- a/public/components/visualizations/GraphMetrics.jsx
+++ b/public/components/visualizations/GraphMetrics.jsx
@@ -16,6 +16,8 @@
import React, { Component, PropTypes } from 'react';
import * as d3 from 'd3';
+const colors_old = ['#A7003C', '#00A76B', '#0090A7', '#003DA7', '#6B00A7'];
+const colors_new = ['#d45d35', '#DBA915', '#BFD02C', '#38A6D8', '#852EB7'];
class GraphMetrics extends Component {
constructor(props) {
@@ -52,14 +54,17 @@ class GraphMetrics extends Component {
this.height = this.fullHeight - this.margin.top - this.margin.bottom;
this.mainRadius = 280;
+ // this.color = d3.scaleOrdinal()
+ // .range([
+ // '#A7003C', // Red
+ // '#00A76B', // Green
+ // '#0090A7', // Teal
+ // '#003DA7', // Blue
+ // '#6B00A7' // Purple
+ // ]);
+
this.color = d3.scaleOrdinal()
- .range([
- '#A7003C', // Red
- '#00A76B', // Green
- '#0090A7', // Teal
- '#003DA7', // Blue
- '#6B00A7' // Purple
- ]);
+ .range(colors_old);
this.arc = d3.arc()
// .padAngle(0.002)
@@ -133,7 +138,7 @@ class GraphMetrics extends Component {
this.chords = this.chords.enter()
.append('path')
.attr('class', 'chord')
- .style('fill', '#A76B00')
+ .style('fill', '#B0B9BE')
.merge(this.chords);
this.chords
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/visualizations/HorizontalBar.jsx
----------------------------------------------------------------------
diff --git a/public/components/visualizations/HorizontalBar.jsx b/public/components/visualizations/HorizontalBar.jsx
index f362029..13f836b 100644
--- a/public/components/visualizations/HorizontalBar.jsx
+++ b/public/components/visualizations/HorizontalBar.jsx
@@ -17,6 +17,10 @@ import React, { Component, PropTypes } from 'react';
import * as d3 from 'd3';
+
+const colors_old = ['#A7003C', '#00A76B', '#0090A7', '#003DA7', '#6B00A7'];
+const colors_new = ['#d45d35', '#DBA915', '#BFD02C', '#38A6D8', '#852EB7'];
+
class HorizontalBar extends Component {
constructor(props) {
super(props);
@@ -48,13 +52,16 @@ class HorizontalBar extends Component {
.domain(['ot1', 'ot2']);
this.color = d3.scaleOrdinal()
- .range([
- '#A7003C', // Red
- '#00A76B', // Green
- '#0090A7', // Teal
- '#003DA7', // Blue
- '#6B00A7' // Purple
- ]);
+ .range(colors_old);
+
+ // this.color = d3.scaleOrdinal()
+ // .range([
+ // '#A7003C', // Red
+ // '#00A76B', // Green
+ // '#0090A7', // Teal
+ // '#003DA7', // Blue
+ // '#6B00A7' // Purple
+ // ]);
this.xAxis = d3.axisTop(this.x);
this.yAxis = d3.axisLeft(this.y);
@@ -170,7 +177,7 @@ class HorizontalBar extends Component {
.attr('y', (d) => grouped ? this.y1(d.type) : 0)
.attr('height', (d) => grouped ? this.y1.bandwidth() : this.y.bandwidth())
.style('fill', (d) => grouped ? this.color(d.type) : this.color(d.id))
- .style('stroke', (d) => d.selected ? '#A76B00' : '')
+ .style('stroke', (d) => d.selected ? '#283F4E' : '')
.style('stroke-width', (d) => d.selected ? '3px' : '0px');
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/visualizations/VerticalBar.jsx
----------------------------------------------------------------------
diff --git a/public/components/visualizations/VerticalBar.jsx b/public/components/visualizations/VerticalBar.jsx
index 71613d3..e7af0ed 100644
--- a/public/components/visualizations/VerticalBar.jsx
+++ b/public/components/visualizations/VerticalBar.jsx
@@ -17,6 +17,9 @@ import React, { Component, PropTypes } from 'react';
import * as d3 from 'd3';
+const colors_old = ['#A7003C', '#00A76B', '#0090A7', '#003DA7', '#6B00A7'];
+const colors_new = ['#d45d35', '#DBA915', '#BFD02C', '#38A6D8', '#852EB7'];
+
class VerticalBar extends Component {
constructor(props) {
super(props);
@@ -48,13 +51,16 @@ class VerticalBar extends Component {
.rangeRound([this.height, 0]);
this.color = d3.scaleOrdinal()
- .range([
- '#A7003C', // Red
- '#00A76B', // Green
- '#0090A7', // Teal
- '#003DA7', // Blue
- '#6B00A7' // Purple
- ]);
+ .range(colors_old);
+
+ // this.color = d3.scaleOrdinal()
+ // .range([
+ // '#A7003C', // Red
+ // '#00A76B', // Green
+ // '#0090A7', // Teal
+ // '#003DA7', // Blue
+ // '#6B00A7' // Purple
+ // ]);
this.xAxis = d3.axisBottom(this.x);
this.yAxis = d3.axisLeft(this.y);
@@ -170,7 +176,7 @@ class VerticalBar extends Component {
.attr('y', (d) => this.y(d.count))
.attr('height', (d) => this.height - this.y(d.count))
.style('fill', (d) => grouped ? this.color(d.type) : this.color(d.id))
- .style('stroke', (d) => d.selected ? '#A76B00' : '')
+ .style('stroke', (d) => d.selected ? '#283F4E' : '')
.style('stroke-width', (d) => d.selected ? '3px' : '0px');
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/containers/Login.jsx
----------------------------------------------------------------------
diff --git a/public/containers/Login.jsx b/public/containers/Login.jsx
index 0839b0d..cb577cb 100644
--- a/public/containers/Login.jsx
+++ b/public/containers/Login.jsx
@@ -41,11 +41,11 @@ class Login extends Component {
<div className='field'>
<input type='password' name='password' placeholder="Password" />
</div>
- <button className='ui brown button' onClick={this.handleLogin}>
+ <button className='ui teal button' onClick={this.handleLogin}>
Log In
</button>
<Link to='/signup'>
- <button className='ui right floated brown button'>
+ <button className='ui right floated teal button'>
Sign Up
</button>
</Link>
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/containers/Main.jsx
----------------------------------------------------------------------
diff --git a/public/containers/Main.jsx b/public/containers/Main.jsx
index 22daa70..8740456 100644
--- a/public/containers/Main.jsx
+++ b/public/containers/Main.jsx
@@ -57,11 +57,11 @@ class Main extends Component {
return (
<div id='main-container'>
<div className='site-header'>
- <div className='ui brown inverted padded top fixed borderless menu'>
+ <div className='ui teal inverted padded top fixed borderless menu'>
<div className='ui container'>
<Link to='/'>
- <h3 className='ui inverted header item'>Tap</h3>
+ <h2 className='ui inverted header item'>Tap</h2>
</Link>
{authHeader}
@@ -76,7 +76,7 @@ class Main extends Component {
<div className='site-footer'>
<div className='ui container'>
- <div className='ui footer page brown inverted segment'>
+ <div className='ui footer page teal inverted segment'>
<div className='ui center aligned container'>
<div className='footer-text'>Copyright Apache SensSoft 2016</div>
</div>
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/containers/SignUp.jsx
----------------------------------------------------------------------
diff --git a/public/containers/SignUp.jsx b/public/containers/SignUp.jsx
index 6002576..84da347 100644
--- a/public/containers/SignUp.jsx
+++ b/public/containers/SignUp.jsx
@@ -41,11 +41,11 @@ class Signup extends Component {
<div className='field'>
<input type='password' name='password' placeholder="Password" />
</div>
- <button className='ui brown button' onClick={this.handleSignup}>
+ <button className='ui teal button' onClick={this.handleSignup}>
Sign Up
</button>
<Link to='/login'>
- <button className='ui right floated brown button'>
+ <button className='ui right floated teal button'>
Log In
</button>
</Link>
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/semantic/src/site/globals/site.variables
----------------------------------------------------------------------
diff --git a/semantic/src/site/globals/site.variables b/semantic/src/site/globals/site.variables
index af19ae5..c905a27 100644
--- a/semantic/src/site/globals/site.variables
+++ b/semantic/src/site/globals/site.variables
@@ -2,6 +2,35 @@
User Global Variables
*******************************/
+@primaryColor : @teal;
+@secondaryColor : @grey;
+@tertiaryColor : @white;
+
+@teal : #283F4E;
+@white : #EBEBEB;
+@grey : #54595B;
+@black : #262626;
+
+@pageBackground : @white;
+
+
+
+
+
+
+/************************************
+ SensSoft Publicity Colors
+
+@red : #E24614;
+@yellow : #DBA915;
+@green : #BFD02C;
+@blue : #38A6D8;
+@purple : #852EB7;
+*************************************/
+
+/*************************************
+ Original TAP Global Variables
+
@primaryColor : @brown;
@brown : #A76B00;
@red : #A7003C;
@@ -14,3 +43,5 @@
@grey : #FFE7BC;
@pageBackground : @white;
+*************************************/
+
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/semantic/src/theme.config
----------------------------------------------------------------------
diff --git a/semantic/src/theme.config b/semantic/src/theme.config
index d2bc3bb..4acdb05 100644
--- a/semantic/src/theme.config
+++ b/semantic/src/theme.config
@@ -40,7 +40,7 @@
/* Collections */
@breadcrumb : 'default';
-@form : 'default';
+@form : 'github';
@grid : 'default';
@menu : 'default';
@message : 'default';
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/stylesheets/main.scss
----------------------------------------------------------------------
diff --git a/stylesheets/main.scss b/stylesheets/main.scss
index b482ee9..f2f62be 100644
--- a/stylesheets/main.scss
+++ b/stylesheets/main.scss
@@ -13,9 +13,29 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-$brown: #A76B00;
+/*$brown: #A76B00;
$black: #271900;
$background: #FFF5E3;
+*/
+
+/*
+$red : #E24614;
+$yellow : #DBA915;
+$green : #BFD02C;
+$blue : #38A6D8;
+$purple : #852EB7;*/
+
+$teal : #283F4E;
+$white : #F9F9F9;
+$lightgrey : #EBEBEB;
+$grey : #54595B;
+$black : #262626;
+
+$primaryColor : $teal;
+$secondaryColor : $grey;
+$tertiaryColor : $white;
+
+$background : $white;
#react-container {
display: flex;
@@ -30,14 +50,14 @@ $background: #FFF5E3;
.site-footer {
width: 100%;
- background-color: $brown;
+ background-color: $primaryColor;
height: 50px;
margin-top: 20px;
}
.site-header {
width: 100%;
- background-color: $brown;
+ background-color: $primaryColor;
height: 50px;
}
@@ -66,9 +86,17 @@ $background: #FFF5E3;
min-height: 24px;
padding: 4px;
pointer-events: none;
- background-color: #A76B00;
+ background-color: $lightgrey;
+ border-style: solid;
+ border-width: 1px;
+ border-color: $grey;
}
#counts-details {
word-wrap: break-word;
+ background-color: $background;
+}
+
+#app-list {
+ background-color: $background;
}