Some minor comments and tweaks, hide Textarea maximize button for mobile.
This commit is contained in:
parent
5a9e14a7df
commit
83a75016a6
|
@ -1,10 +1,12 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
// Creates a clickable <span> tag with an onclick action.
|
||||||
export class Button extends React.Component {
|
export class Button extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Always give the Button a 'clickable' class and then add any others.
|
||||||
processClasses() {
|
processClasses() {
|
||||||
var classes = 'clickable';
|
var classes = 'clickable';
|
||||||
|
|
||||||
|
|
|
@ -8,32 +8,16 @@ import {FixedPage} from './FixedPage';
|
||||||
export class TextArea extends Input {
|
export class TextArea extends Input {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
// Bind listeners
|
|
||||||
this.handleMaximizeClick = this.handleMaximizeClick.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMaximizeClick() {
|
|
||||||
var sourceTextboxElement = document.getElementById(this.props.id);
|
|
||||||
var targetTextboxElement = document.getElementById("fullScreenTextbox");
|
|
||||||
document.getElementById("fullScreenTextboxLabel").innerHTML = this.props.name;
|
|
||||||
var selection = getInputSelection(sourceTextboxElement);
|
|
||||||
|
|
||||||
document.getElementById("expandedTextboxId").innerHTML = this.props.id;
|
|
||||||
targetTextboxElement.value = sourceTextboxElement.value;
|
|
||||||
document.getElementById("fullScreenTextboxScreen").style.display = "block";
|
|
||||||
|
|
||||||
targetTextboxElement.focus();
|
|
||||||
setSelectionRange(targetTextboxElement, selection.start, selection.end);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Use a FixedPage for TextArea's fullscreen mode.
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<label>
|
<label>
|
||||||
<span>
|
<span>
|
||||||
{this.props.name}
|
{this.props.name}
|
||||||
|
|
||||||
<FixedPage id={this.props.id + '_textbox'} contentClass='no-scroll' buttonClasses='inline-button' buttonText='Maximize'>
|
<FixedPage id={this.props.id + '_textbox'} contentClass='no-scroll' buttonClasses='maximize-button' buttonText='Maximize'>
|
||||||
<label><span>{this.props.name}</span></label>
|
<label><span>{this.props.name}</span></label>
|
||||||
|
|
||||||
<textarea id={this.props.id} className='fullscreen-textbox' onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} value={this.state.value} />
|
<textarea id={this.props.id} className='fullscreen-textbox' onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} value={this.state.value} />
|
||||||
|
|
|
@ -120,7 +120,7 @@ and (max-width : 910px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#showFullScreenTextbox {
|
.maximize-button {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -439,6 +439,10 @@ searchTerm {
|
||||||
overflow-y: hidden !important;
|
overflow-y: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.maximize-button {
|
||||||
|
@extend .inline-button;
|
||||||
|
}
|
||||||
|
|
||||||
.fullscreen-textbox {
|
.fullscreen-textbox {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
Loading…
Reference in New Issue