mirror of
				https://github.com/Alamantus/Lexiconga.git
				synced 2025-11-04 10:17:01 +01:00 
			
		
		
		
	Some minor comments and tweaks, hide Textarea maximize button for mobile.
This commit is contained in:
		
							parent
							
								
									5a9e14a7df
								
							
						
					
					
						commit
						83a75016a6
					
				
					 4 changed files with 10 additions and 20 deletions
				
			
		| 
						 | 
					@ -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…
	
	Add table
		
		Reference in a new issue