Permalink
Browse files

Merge pull request #33 from jdavid/i18n

i18n: change the bottom-right buttons to be icons
  • Loading branch information...
tamasd committed Jan 2, 2018
2 parents c46c282 + bf0af8a commit 10d4174b4d7bb2289cd739d38009cc1191f4dfd8
Showing with 23 additions and 32 deletions.
  1. +1 −0 images/login.svg
  2. +3 −3 js/client/embed.js
  3. +2 −2 js/components/helpbutton.js
  4. +6 −2 js/components/notloggedin.js
  5. +1 −1 js/components/record.js
  6. +4 −2 js/form.js
  7. +2 −12 less/helpcenter.less
  8. +4 −10 less/style.less
View
@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135.42 136.39"><defs><style>.cls-1{fill:#ffffff;}</style></defs><title>icons</title><path class="cls-1" d="M109.23,94a32.61,32.61,0,0,0-32-26.76H60.95A32.69,32.69,0,0,0,28.72,94.68a13,13,0,0,0,12.85,15.1H96.5a13.08,13.08,0,0,0,12.85-15.34Z"/><path class="cls-1" d="M52.38,54.48A24.2,24.2,0,0,0,86.16,55l0.23-.23a21.54,21.54,0,0,0,1.78-29.37,24.22,24.22,0,0,0-37.69.48,21.62,21.62,0,0,0,1.78,28.54Z"/></svg>
View
@@ -95,7 +95,7 @@ function fixIFrameSize(iframe) {
case "record":
switch (state) {
case "": // starting state
width = 90;
width = 50;
height = 35;
break;
case "recorded":
@@ -116,7 +116,7 @@ function fixIFrameSize(iframe) {
case "search":
switch (state) {
case "":
width = 105;
width = 60;
height = 35;
break;
case "list":
@@ -128,7 +128,7 @@ function fixIFrameSize(iframe) {
case "list":
switch (state) {
case "":
width = 105;
width = 60;
height = 35;
break;
case "list":
@@ -29,8 +29,8 @@ class HelpButton extends React.Component {
render() {
return (
<div className="info helpbutton-container text-center">
<button type="button" className="btn btn-default btn-warning btn-md help-button" onClick={this.props.helpClick}>
<strong className="semi-bold">{t("Get help")}</strong> <span><object className="help-icon" type="image/svg+xml" data={helpIcon}></object></span>
<button type="button" className="btn btn-default btn-warning btn-md help-button" onClick={this.props.helpClick} title={t("Get help")}>
<span><object className="help-icon" type="image/svg+xml" data={helpIcon}></object></span>
</button>
</div>
);
@@ -18,6 +18,8 @@ import React from "react";
import {t} from "t";
import {Link} from "react-router";
import loginIcon from "images/login.svg";
class NotLoggedIn extends React.Component {
static defaultProps = {
@@ -27,9 +29,11 @@ class NotLoggedIn extends React.Component {
};
render() {
const loginClass = "btn btn-"+this.props.color+" login-button";
const loginSpan = <span><object className="login-icon" type="image/svg+xml" data={loginIcon}></object></span>;
const loginButton = this.props.customLoginButtonClick ?
<a href="#" className={"btn btn-"+this.props.color} onClick={this.props.customLoginButtonClick}>{this.props.label}</a>:
<Link to="/connect" className={"btn btn-"+this.props.color}>{this.props.label}</Link>;
<a href="#" className={loginClass} onClick={this.props.customLoginButtonClick} title={this.props.label}>{loginSpan}</a>:
<Link to="/connect" className={loginClass} title={this.props.label}>{loginSpan}</Link>;
return (
<div className="row">
<div className="col-xs-12">
View
@@ -76,7 +76,7 @@ class Record extends React.Component {
<TextField id="input-title" label={t("Title")} value={this.props.title} onChange={this.props.onTitleChange} />
<TextField id="input-starting-url" label={t("Starting URL")} value={this.props.startingUrl} onChange={this.props.onStartingUrlChange} onBlur={this.props.onStartingUrlBlur} />
{compatWarn}
<Button grid={!this.props.embedded} onClick={this.props.onRecordClick} disabled={this.props.recordDisabled} containerClassName="record" className={recordButtonClass}><strong className="semi-bold">{t("Record")}</strong> <span><object className="record-icon" type="image/svg+xml" data={recordIcon}></object></span></Button>
<Button grid={!this.props.embedded} onClick={this.props.onRecordClick} disabled={this.props.recordDisabled} containerClassName="record" className={recordButtonClass} title={t("Record")}><span><object className="record-icon" type="image/svg+xml" data={recordIcon}></object></span></Button>
<div className="form-group steps">
<h3 className="col-sm-offset-2 col-sm-10">{t("Recorded steps")}</h3>
<div className="col-sm-offset-2 col-sm-10">
View
@@ -201,11 +201,12 @@ export class ButtonSetButton extends React.Component {
id: "",
name: "",
disabled: false,
title: ""
};
render() {
return (
<button onClick={this.props.onClick} type={this.props.type} className={"btn " + this.props.className} id={this.props.id} name={this.props.name || this.props.id} disabled={this.props.disabled}>{this.props.children}</button>
<button onClick={this.props.onClick} type={this.props.type} className={"btn " + this.props.className} id={this.props.id} name={this.props.name || this.props.id} disabled={this.props.disabled} title={this.props.title}>{this.props.children}</button>
);
}
@@ -222,12 +223,13 @@ export class Button extends React.Component {
name: "",
grid: true,
disabled: false,
title: ""
};
render() {
return (
<ButtonSet grid={this.props.grid} className={this.props.containerClassName}>
<ButtonSetButton onClick={this.props.onClick} type={this.props.type} className={this.props.className} id={this.props.id} name={this.props.name || this.props.id} disabled={this.props.disabled}>{this.props.children}</ButtonSetButton>
<ButtonSetButton onClick={this.props.onClick} type={this.props.type} className={this.props.className} id={this.props.id} name={this.props.name || this.props.id} disabled={this.props.disabled} title={this.props.title}>{this.props.children}</ButtonSetButton>
</ButtonSet>
);
}
View
@@ -252,17 +252,7 @@ div.path-helpcenterlist.state-list {
margin: 10px 0;
}
.help-button {
padding: 6px 12px;
font-size: 14px;
border: 0;
span {
vertical-align: middle;
}
}
.btn-record-true, .btn-record-false {
.btn-record-true, .btn-record-false, .help-button, .login-button {
border: 0;
span {
@@ -288,4 +278,4 @@ div.wh-record-wrapper {
background-color: transparent;
}
}
}
}
View
@@ -202,20 +202,14 @@ div.state-recorded .navbar-right {
.help-button {
font-size: 48px;
.help-icon {
height: 18px;
}
}
.wh-record {
.btn-record-true {
.record-icon {
height: 15px;
}
}
.help-icon, .record-icon, .login-icon {
height: 18px;
pointer-events: none;
}
.btn-record-false .record-icon {
.record-icon {
height: 15px;
}

0 comments on commit 10d4174

Please sign in to comment.