allura-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From brond...@apache.org
Subject [03/50] [abbrv] allura git commit: [#7919] Clean up add-new-tool components.
Date Thu, 17 Dec 2015 19:21:50 GMT
[#7919]  Clean up add-new-tool components.


Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/6d9fbb23
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/6d9fbb23
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/6d9fbb23

Branch: refs/heads/db/8034
Commit: 6d9fbb23f9c01e13ee2ac8b420e49ab7d2f23be1
Parents: ab53fe6
Author: Heith Seewald <heiths@gmail.com>
Authored: Thu Dec 3 10:51:22 2015 -0500
Committer: Heith Seewald <heiths@gmail.com>
Committed: Wed Dec 16 13:54:29 2015 -0600

----------------------------------------------------------------------
 Allura/allura/public/nf/css/navbar.css         | 193 +--------
 Allura/allura/public/nf/js/add-new-tool.es6.js | 408 --------------------
 2 files changed, 4 insertions(+), 597 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/allura/blob/6d9fbb23/Allura/allura/public/nf/css/navbar.css
----------------------------------------------------------------------
diff --git a/Allura/allura/public/nf/css/navbar.css b/Allura/allura/public/nf/css/navbar.css
index 35df144..c46b513 100644
--- a/Allura/allura/public/nf/css/navbar.css
+++ b/Allura/allura/public/nf/css/navbar.css
@@ -244,155 +244,6 @@
 
 .tb-sub-menu .react-drag:hover a {
     color: white;
-
-}
-
-/*Add new tool*/
-/*////////////*/
-
-.btn-bar {
-    display: block;
-    padding: 0 10px 0 10px;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    -o-border-radius: 4px;
-    -ms-border-radius: 4px;
-    -khtml-border-radius: 4px;
-    border-radius: 4px;
-    text-decoration: none;
-    min-width: 1em;
-    text-align: center;
-    position: relative;
-    margin: 0 0 20px;
-}
-
-.installable-tool-box {
-    background-color: whitesmoke;
-    color: #757575;
-    border-right: 2px solid #AAAAAA;
-    /* background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff),
color-stop(100%, rgba(204, 204, 204, 0.42))); */
-    background-image: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
-    background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
-    /* margin: auto; */
-}
-
-.installable-tool-box div {
-    border-radius: 0 0 4px 4px;
-    /* text-align: center; */
-    font-size: 1rem;
-    /* font-weight: 700; */
-    list-style: none;
-    text-align: right;
-    cursor: pointer;
-    /* min-width: 40px; */
-    border: 1px solid rgba(77, 77, 77, 0.07);
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-    margin: 0;
-    padding: 10px;
-}
-
-.tool-card .selected-tool {
-    background: #09C !important;
-    color: white !important;
-    height: 21px;
-}
-
-.installable-tool-box div:hover {
-    background: white;
-    border: 1px solid #09C;
-}
-
-.installable-tool-box div.selected-tool:hover {
-    background: white;
-    color: rgb(85, 85, 85);
-}
-
-.tool-card {
-    width: 90%;
-    margin-left: 88px;
-    border: 1px solid #646464;
-    border-radius: 2px 2px 5px 5px;
-    margin-bottom: 41px;
-    position: relative;
-    overflow: auto;
-    top: 15px;
-    box-shadow: -2px 5px 7px #8F8F8F;
-}
-
-.box-title {
-    z-index: 60;
-    height: auto;
-    font-size: small;
-    text-align: center;
-    padding-bottom: 3px;
-    position: relative;
-    padding-top: 3px;
-    background: #4E4E4E;
-    color: #DEDEDE;
-}
-
-#tool-info {
-    float: left;
-    width: 82%;
-}
-
-#tool-info-left {
-    background: #636363;
-    width: 40%;
-    color: white;
-    float: left;
-    margin: auto;
-    height: 267px;
-}
-
-#tool-info-left p {
-    text-align: center;
-    vertical-align: text-top;
-    padding-top: 0;
-    left: 0;
-    font-size: 11pt;
-    font-weight: 700;
-    color: #F9F9F9;
-    padding-bottom: 20px;
-    margin: 20px;
-}
-
-#tool-info h1 {
-    padding: 10px;
-    font-size: xx-large;
-    margin: 0;
-    border-bottom: 1px solid #999;
-}
-
-.add-tool-error-box {
-    background: #ffc5ca;
-    border: 1px solid #888;
-    width: 135px;
-    margin-left: 17px;
-}
-
-#tool-info-right {
-    width: 60%;
-    float: left;
-    background: whitesmoke;
-}
-
-#add-tool-form {
-    padding-top: 20px;
-    /* padding: 12px; */
-    margin-left: 30px;
-}
-
-#mount_point :invalid {
-    background: #333;
-}
-
-#top_nav #add-tool-container {
-    padding-bottom: 0;
 }
 
 #top_nav .add-tool-toggle {
@@ -417,16 +268,7 @@
     text-decoration: underline;
 }
 
-/*.react-drag{*/
-/*display: block;*/
-/*max-width: 150px;*/
-/*float: left;*/
-/*!*border: 1px solid black;*!*/
-/*}*/
-
-/* Options Menu */
-
-.optionMenu {
+.contextMenu {
     background: #f0f0f0;
     border: 1px solid #999;
     box-shadow: -2px 2px 6px #555;
@@ -439,13 +281,14 @@
     clear: both;
 }
 
-.optionMenu > ul {
+.contextMenu > ul {
     list-style: none;
     border: none;
     margin-left: 2px;
+    visibility: visible !important;
 }
 
-#top_nav_admin .optionMenu > ul > li > a {
+#top_nav_admin .contextMenu > ul > li > a {
     margin: 4px;
     border-right: none;
     clear: both;
@@ -454,31 +297,3 @@
 #top_nav_admin .tool_option > a {
     border-right: none !important;
 }
-
-.wiki-tool {
-    background: #DFDFDF;
-}
-
-.git-tool {
-    background: #DFDFDF;
-}
-
-.mercurial-tool {
-    background: #DFDFDF;
-}
-
-.tickets-tool {
-    background: #DFDFDF;
-}
-
-.discussion-tool {
-    background: #DFDFDF;
-}
-
-.blog-tool {
-    background: #DFDFDF;
-}
-
-.link-tool {
-    background: #DFDFDF;
-}

http://git-wip-us.apache.org/repos/asf/allura/blob/6d9fbb23/Allura/allura/public/nf/js/add-new-tool.es6.js
----------------------------------------------------------------------
diff --git a/Allura/allura/public/nf/js/add-new-tool.es6.js b/Allura/allura/public/nf/js/add-new-tool.es6.js
deleted file mode 100644
index a9dca18..0000000
--- a/Allura/allura/public/nf/js/add-new-tool.es6.js
+++ /dev/null
@@ -1,408 +0,0 @@
-/*
-       Licensed to the Apache Software Foundation (ASF) under one
-       or more contributor license agreements.  See the NOTICE file
-       distributed with this work for additional information
-       regarding copyright ownership.  The ASF licenses this file
-       to you under the Apache License, Version 2.0 (the
-       "License"); you may not use this file except in compliance
-       with the License.  You may obtain a copy of the License at
-
-         http://www.apache.org/licenses/LICENSE-2.0
-
-       Unless required by applicable law or agreed to in writing,
-       software distributed under the License is distributed on an
-       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-       KIND, either express or implied.  See the License for the
-       specific language governing permissions and limitations
-       under the License.
-*/
-'use strict';
-
-///////////////////////////////////////////////////
-// Components for adding a new tool to a project //
-///////////////////////////////////////////////////
-
-/**
- * Add new tool button.
- * @constructor
- */
-var AddNewToolButton = React.createClass({
-    render: function() {
-        return (
-            <div>
-            <a onClick={ this.props.handleToggleAddNewTool } className='add-tool-toggle'>
-                Add New...
-            </a>
-            { this.props.showAddToolMenu && <NewToolMain {...this.props} />}
-            </div>
-        );
-    }
-});
-
-/**
- * Menu for adding a new tool.
- * @constructor
- */
-var NewToolMenu = React.createClass({
-    propTypes: {
-        tools: React.PropTypes.array,
-        onPushAddButton: React.PropTypes.func,
-        onSetActive: React.PropTypes.func,
-        formData: React.PropTypes.object,
-        visible: React.PropTypes.bool
-    },
-    render: function() {
-        var _this = this;
-        var showInfo = this.props.active.name !== 'Add a tool';
-        var tools = this.props.tools.map(function(tool, i) {
-            var classes;
-            if (_this.props.active && _this.props.active.tool_label === tool.tool_label)
{
-                classes = ' selected-tool';
-            }else {
-                classes = ' ';
-            }
-            return (
-                <div className={classes}
-                    id={'add-new-' + tool.name}
-                    key={`new-tool-btn-${i}`}
-                    onClick={_this.props.handleChangeTool}>
-                    {tool.tool_label}
-                </div>
-            );
-        });
-
-        return (
-            <div className='tool-card'>
-                <div id='installable-items'>
-                    <div className='installable-tool-box'>
-                        {tools}
-                    </div>
-                </div>
-                {showInfo &&
-                <NewToolInfo {...this.props}
-                    name={this.props.active.name}
-                    toolLabel={this.props.active.tool_label}
-                    description={this.props.active.description}
-                    handleAddButton={this.props.handleAddButton}/>
-                }
-            </div>
-        );
-    }
-});
-
-var FormField = React.createClass({
-    propTypes: {
-        id: React.PropTypes.string,
-        handleOnChange: React.PropTypes.func,
-        inputType: React.PropTypes.string,
-        pattern: React.PropTypes.string,
-        value: React.PropTypes.string,
-        errors: React.PropTypes.object
-    },
-    getDefaultProps: function () {
-        return {
-            inputType: "text",
-            pattern: "",
-            errors: {}
-        };
-    },
-    getErrors: function() {
-        if (!this.props.errors.hasOwnProperty(this.props.id)
-            || this.props.errors[this.props.id].length === 0) {
-            return;
-        }
-
-        let errorList = [].concat(this.props.errors[this.props.id]);
-
-        var result = errorList.map(function(error_list, i) {
-            return <span key={"error-" + i}>{error_list}</span>;
-        });
-        console.log('result', result);
-        return (
-            <div className="add-tool-error-box">
-                {result}
-            </div>
-        );
-    },
-    render: function () {
-        let errors = this.getErrors();
-        return (
-            <div className="add-new-tool-field">
-                <label className="tool-form-input" htmlFor={this.props.id}>{this.props.label}</label>
-                <input type={this.props.inputType} required
-                       id={this.props.id}
-                       pattern={this.props.pattern}
-                       onBlur={this.props.handleOnBlur}
-                       onChange={this.props.handleOnChange}
-                       value={this.props.value}/>
-
-                {errors}
-            </div>
-
-        );
-    }
-});
-
-var InstallNewToolForm = React.createClass({
-        getDefaultProps: function () {
-        return {
-            canSubmit: false
-        };
-    },
-    render: function() {
-        return (
-            <form id='add-tool-form'>
-                <FormField
-                    key="new-tool-mount-label"
-                    id="mount_label"
-                    handleOnChange={this.props.handleChangeForm}
-                    handleOnBlur={this.props.toolFormIsValid}
-                    value={this.props.formData.mount_label}
-                    label="Label"
-                    errors={this.props.validationErrors}
-                    />
-
-                <FormField
-                    key="new-tool-mount-point"
-                    id="mount_point"
-                    handleOnChange={this.props.handleChangeForm}
-                    handleOnBlur={this.props.toolFormIsValid}
-                    value={this.props.formData.mount_point}
-                    label="Url Path"
-                    errors={this.props.validationErrors}
-                />
-
-                {this.props.toolLabel ===  'External Link' &&
-                    <FormField
-                        key="external-url-field"
-                        id="options_url"
-                        handleOnChange={this.props.handleChangeForm}
-                        value={this.props.formData.options.options_url}
-                        label="External Url"
-                        pattern="https?://.+"
-                        inputType="url"
-                    />
-                }
-                    <p id="add-tool-url-preview">
-                        <small>{_getProjectUrl(false)}/</small>
-                        <strong>{this.props.formData.mount_point}</strong>
-                    </p>
-                <button disabled={!this.props.canSubmit}
-                        id='new-tool-submit'
-                        onClick={this.props.handleSubmit}
-                        className='add-tool-button'>
-                    Add Tool
-                </button>
-            </form>
-        );
-    }
-});
-
-var NewToolInfo = React.createClass({
-    propTypes: {
-        name: React.PropTypes.string,
-        description: React.PropTypes.string,
-        handleAddButton: React.PropTypes.func
-    },
-
-    render: function() {
-        return (
-            <div id='tool-info'>
-                <h1 className={this.props.toolLabel.toLowerCase() + "-tool"}>{this.props.toolLabel}</h1>
-                <div id='tool-info-left'>
-                    <p>{this.props.description}</p>
-                </div>
-                <div id="tool-info-right">
-                    <InstallNewToolForm {...this.props} />
-                </div>
-            </div>
-        );
-    }
-});
-
-var installableToolsCache = {};
-function loadTools(id, callback) {
-    if (!installableToolsCache[id]) {
-        installableToolsCache[id] = $.get(_getProjectUrl(true) + '/admin/installable_tools/').promise();
-    }
-    installableToolsCache[id].done(callback);
-}
-
-var NewToolMain = React.createClass({
-    getInitialState: function() {
-        let toolPlaceHolder = {
-            name: 'Add a tool',
-            tool_label: 'Add a tool',
-            description: 'click on one of the tools shown above to add it to your project.'
-        };
-
-        return {
-            visible: false,
-            installableTools: [toolPlaceHolder],
-            active: toolPlaceHolder,
-            canSubmit: false,
-            errors: {
-                mount_point: [],
-                mount_label: []
-            },
-            new_tool: {
-                mount_point: '',
-                tool_label: '',
-                mount_label: '',
-                options: {}
-            }
-        };
-    },
-    getDefaultProps: function () {
-        return {
-            existingMounts: []
-        };
-    },
-    componentDidMount: function() {
-        let tools = loadTools('tools', function(result) {
-            if (this.isMounted()) {
-                this.setState({
-                    installableTools: result.tools
-                });
-            }
-        }.bind(this));
-    },
-    handleChangeTool: function(e) {
-        this._setActiveByLabel(e.target.textContent);
-    },
-    _setActiveByLabel: function(tool_label) {
-        var index = this.state.installableTools.findIndex(
-            x => x.tool_label === tool_label
-        );
-        var active = this.state.installableTools[index];
-        var _new_tool = this.state.new_tool;
-
-        _new_tool.mount_label = active.defaults.default_mount_label;
-        _new_tool.mount_point = '';
-        _new_tool.options = {};
-
-        this.setState({
-            active: active,
-            new_tool: _new_tool,
-                            errors: {
-                    mount_point: [],
-                    mount_label: []
-                }
-        });
-        this.disableButton();
-    },
-
-    handleChangeForm: function(e) {
-            var _new_tool = this.state.new_tool;
-            var field_id = e.target.id;
-            _new_tool[field_id] = e.target.value;
-        if(field_id !== 'mount_point' && field_id !== 'mount_label'){
-            _new_tool.options[field_id] = e.target.value;
-        }
-            this.setState({
-                new_tool: _new_tool,
-            });
-        },
-
-    getOption: function(option_id){
-        return option_id.split('options_').slice(-1)[0];
-    },
-
-    enableButton: function () {
-      this.setState({
-        canSubmit: true
-      });
-    },
-    disableButton: function () {
-      this.setState({
-        canSubmit: false
-      });
-    },
-    handleSubmit: function(e) {
-        e.preventDefault();
-        var _this = this;
-        var data = {
-            _session_id: $.cookie('_session_id'),
-            tool: this.state.active.name,
-            mount_label: this.state.new_tool.mount_label,
-            mount_point: this.state.new_tool.mount_point,
-        };
-
-        if(this.state.active.name === 'link'){
-            let options = this.state.new_tool.options;
-            for(let k of Object.keys(options)){
-                if(k.startsWith('options_')) {
-                    data[this.getOption(k)] = options[k];
-                }
-            }
-        }
-        $.ajax({
-            type: 'POST',
-            url: _getProjectUrl() + '/admin/install_tool/',
-            data: data,
-            success: function() {
-                $('#messages')
-                    .notify('Tool created', {
-                        status: 'confirm'
-                    });
-                _this.disableButton();
-                // Redirect to new tool
-                if (_this.state.active.name !== 'link') {
-                    window.location.href = _getProjectUrl(false) + "/" + _this.state.new_tool.mount_point;
-                }
-            },
-
-            error: function() {
-                $('#messages')
-                    .notify('Error creating tool.', {
-                        status: 'error'
-                    });
-            }
-        });
-    },
-    toolFormIsValid: function(e) {
-        e.preventDefault();
-        if(!e.target.value){
-            return
-        }
-        var errors = {
-            mount_point: []
-        };
-
-        if (this.state.new_tool.mount_point.length < 3) {
-            errors.mount_point.push('Mount point must have at least 3 characters.');
-        }
-        if (this.props.existingMounts.indexOf(e.target.value) !== -1) {
-            errors.mount_point.push('Mount point already exists.');
-        }
-        if (errors.mount_point.length > 0) {
-            this.setState({errors: errors});
-            this.disableButton();
-        } else {
-            this.enableButton();
-            this.setState({errors: {}});
-        }
-
-    },
-
-    render: function() {
-        return (
-            <React.addons.CSSTransitionGroup
-                transitionName="menu"
-                transitionEnterTimeout={500}
-                transitionLeaveTimeout={300} >
-                    <NewToolMenu
-                        active={this.state.active}
-                        tools={this.state.installableTools}
-                        formData={this.state.new_tool}
-                        handleChangeTool={this.handleChangeTool}
-                        canSubmit={this.state.canSubmit}
-                        handleSubmit={this.handleSubmit}
-                        handleChangeForm={this.handleChangeForm}
-                        toolFormIsValid={this.toolFormIsValid}
-                        validationErrors={this.state.errors}
-                        handleAddButton={this.handleAddButton}/>
-            </React.addons.CSSTransitionGroup>
-    );
-    }
-});


Mime
View raw message