self-hosted/teleport
self-hosted/teleport
1
0
Fork 0
mirror of https://github.com/gravitational/teleport synced 2024-10-22 10:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

(web) adding colors to user indicators

Browse source
This commit is contained in:
Alexey Kontsevoy 2016-03-09 08:52:53 -05:00
parent 52a73803ec
commit d218d327b1
7 changed files with 90 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
web/dist/app/app.js vendored
View file

File diff suppressed because one or more lines are too long

4
web/dist/app/styles.js vendored
View file

File diff suppressed because one or more lines are too long

4
web/dist/app/vendor.js vendored
View file

File diff suppressed because one or more lines are too long

6
web/dist/index.html vendored
View file

@ -11,11 +11,11 @@
<script src="/web/app/assets/js/underscore-1.8.3.js"></script>
<script src="/web/app/assets/js/bootstrap.js"></script>
<script src="/web/app/assets/js/term.js"></script>
<script src="/web/app/vendor.js?ver=0.11457492004721"></script>
<script src="/web/app/styles.js?ver=0.11457492004721"></script>
<script src="/web/app/vendor.js?ver=0.11457531547634"></script>
<script src="/web/app/styles.js?ver=0.11457531547634"></script>
</head>
<body class="grv">
<div id="app"></div>
</body>
<script src="/web/app/app.js?ver=0.11457492004721"></script>
<script src="/web/app/app.js?ver=0.11457531547634"></script>
</html>

4
web/src/app/components/currentSession/activeSession.jsx
View file

@ -13,7 +13,7 @@ var ActiveSession = React.createClass({
},
render: function() {
let {serverIp, login} = this.props.activeSession;
let {serverIp, login, parties} = this.props.activeSession;
let serverLabelText = `${login}@${serverIp}`;
if(!serverIp){
@ -22,7 +22,7 @@ var ActiveSession = React.createClass({
return (
<div className="grv-current-session">
<SessionLeftPanel/>
<SessionLeftPanel parties={parties}/>
<div>
<div className="grv-current-session-server-info">
<span className="btn btn-primary btn-sm" onClick={showSelectNodeDialog}>

51
web/src/app/components/currentSession/sessionLeftPanel.jsx
View file

@ -1,20 +1,41 @@
var React = require('react');
var {actions} = require('app/modules/activeTerminal/');
var colors = ['#1ab394', '#1c84c6', '#23c6c8', '#f8ac59', '#ED5565', '#c2c2c2'];
const SessionLeftPanel = () => (
<div className="grv-terminal-participans">
<ul className="nav">
{/*
<li><button className="btn btn-primary btn-circle" type="button"> <strong>A</strong></button></li>
<li><button className="btn btn-primary btn-circle" type="button"> B </button></li>
<li><button className="btn btn-primary btn-circle" type="button"> C </button></li>
*/}
<li>
<button onClick={actions.close} className="btn btn-danger btn-circle" type="button">
<i className="fa fa-times"></i>
</button>
</li>
</ul>
</div>);
const UserIcon = ({name, title, colorIndex=0})=>{
let color = colors[colorIndex % colors.length];
let style = {
'backgroundColor': color,
'borderColor': color
};
return (
<li>
<span style={style} className="btn btn-primary btn-circle text-uppercase">
<strong>{name[0]}</strong>
</span>
</li>
)
};
const SessionLeftPanel = ({parties}) => {
parties = parties || [];
let userIcons = parties.map((item, index)=>(
<UserIcon key={index} colorIndex={index} name={item.user}/>
));
return (
<div className="grv-terminal-participans">
<ul className="nav">
{userIcons}
<li>
<button onClick={actions.close} className="btn btn-danger btn-circle" type="button">
<i className="fa fa-times"></i>
</button>
</li>
</ul>
</div>
)
};
module.exports = SessionLeftPanel;

4
web/src/app/components/sessions/main.jsx
View file

@ -34,7 +34,7 @@ const DurationCell = ({ rowIndex, data, ...props }) => {
const UsersCell = ({ rowIndex, data, ...props }) => {
var $users = data[rowIndex].parties.map((item, itemIndex)=>
(<span key={itemIndex} className="text-uppercase grv-rounded label label-primary">{item.user[0]}</span>)
(<span key={itemIndex} style={{backgroundColor: '#1ab394'}} className="text-uppercase grv-rounded label label-primary">{item.user[0]}</span>)
)
return (
@ -95,7 +95,7 @@ var SessionList = React.createClass({
columnKey="created"
header={<Cell> Created </Cell> }
cell={<DateCreatedCell data={data}/> }
/>
/>
<Column
columnKey="serverId"
header={<Cell> Active </Cell> }