Permalink
Browse files

i18n: show only the icons in the buttons

Problem is, with the text in different languages, the widh of the text
is variable. It doesn't fit in the fixed width defined through CSS.

So, show just the icons. Mouse over the icons to see the text.
  • Loading branch information...
jdavid committed Nov 15, 2017
1 parent 994ffde commit bf0af8aa9446bdabb1c7061e9e201a735f5fafb5
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 = 210;
width = 60;
height = 35;
break;
case "list":
@@ -128,7 +128,7 @@ function fixIFrameSize(iframe) {
case "list":
switch (state) {
case "":
width = 210;
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 bf0af8a

Please sign in to comment.