Felipe Schenone has uploaded a new change for review. https://gerrit.wikimedia.org/r/304168
Change subject: Three changes ...................................................................... Three changes - Change logo image for styled HTML - Minimize to a corner rather than a bar - Mark required parameters with underline Change-Id: I56d961e6ef527d7714a0a66c80482dd59de49c31 --- M proveit.css M proveit.js 2 files changed, 57 insertions(+), 34 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/wikipedia/gadgets/ProveIt refs/changes/68/304168/1 diff --git a/proveit.css b/proveit.css index 80fafc5..f07cf2d 100755 --- a/proveit.css +++ b/proveit.css @@ -4,30 +4,44 @@ position: fixed; right: 10px; bottom: 0; - width: 700px; z-index: 99999999; } -#proveit-logo { - cursor: pointer; - float: right; - margin: 3px 3px 0 0; -} - -#proveit-tabs { +#proveit-header { border: 1px solid #ddd; - padding: 0; + overflow: hidden; } -#proveit-tabs span { +#proveit-logo { + background: black; + cursor: pointer; + color: white; + font-weight: bold; + float: right; + padding: 15px; +} + +#proveit-left-bracket { + color: yellow; + margin-right: 5px; +} +#proveit-right-bracket { + color: yellow; + margin-left: 5px; +} + +#proveit-edit-tab, +#proveit-add-tab { cursor: pointer; color: black; - display: inline-block; + display: none; + float: left; outline: none; - padding: 12px 20px 12px 20px; + padding: 15px; } -#proveit-tabs span.active { +#proveit-edit-tab.active, +#proveit-add-tab.active { background: #a7dcff; } @@ -35,11 +49,12 @@ background: #f4f4f4; border-left: 1px solid #ddd; border-right: 1px solid #ddd; - height: 280px; display: none; + height: 280px; overflow: scroll; overflow-y: scroll; overflow-x: hidden; + width: 700px; } #proveit-reference-list { @@ -107,6 +122,14 @@ width: 100%; } +#proveit-reference-form label.proveit-required { + text-decoration: underline; +} + +#proveit-reference-form label.proveit-hidden { + display: none; +} + #proveit-reference-form input, #proveit-reference-form select { -webkit-appearance: none; @@ -169,8 +192,4 @@ #proveit-insert-button, #proveit-update-button { background: #a7dcff; -} - -#proveit .hidden { - display: none; } \ No newline at end of file diff --git a/proveit.js b/proveit.js index 3a7d5ac..a64fcc3 100755 --- a/proveit.js +++ b/proveit.js @@ -57,11 +57,6 @@ }, /** - * URL of the ProveIt logo hosted at Commons - */ - LOGO: '//upload.wikimedia.org/wikipedia/commons/0/0d/ProveIt_user_interface_logo.png', - - /** * URL of the ProveIt icon hosted at Commons */ ICON: '//upload.wikimedia.org/wikipedia/commons/thumb/1/19/ProveIt_logo_for_user_boxes.svg/22px-ProveIt_logo_for_user_boxes.svg.png', @@ -204,11 +199,13 @@ // First define the elements var gui = $( '<div>' ).attr( 'id', 'proveit' ); - // Tabs - var tabs = $( '<div>').attr( 'id', 'proveit-tabs' ), + // Header + var header = $( '<div>' ).attr( 'id', 'proveit-header' ), + logo = $( '<span>' ).attr( 'id', 'proveit-logo' ).text( 'ProveIt' ), + leftBracket = $( '<span>' ).attr( 'id', 'proveit-left-bracket' ).text( '[' ), + rightBracket = $( '<span>' ).attr( 'id', 'proveit-right-bracket' ).text( ']' ), editTab = $( '<span>' ).attr( 'id', 'proveit-edit-tab' ).addClass( 'active' ).text( proveit.getMessage( 'edit-tab' ) ), - addTab = $( '<span>' ).attr( 'id', 'proveit-add-tab' ).text( proveit.getMessage( 'add-tab' ) ), - logo = $( '<img>' ).attr({ 'id': 'proveit-logo', 'src': proveit.LOGO, 'alt': 'ProveIt' }); + addTab = $( '<span>' ).attr( 'id', 'proveit-add-tab' ).text( proveit.getMessage( 'add-tab' ) ); // Content var content = $( '<div>' ).attr( 'id', 'proveit-content' ), @@ -222,20 +219,22 @@ insertButton = $( '<button>' ).attr( 'id', 'proveit-insert-button' ).text( proveit.getMessage( 'insert-button' ) ); // Then put everything together and add it to the DOM - tabs.append( logo ).append( editTab ).append( addTab ); - buttons.append( showAllParamsButton ).append( updateButton ).append( insertButton ); - content.append( referenceList ).append( referenceFormContainer ).append( buttons ); - gui.append( tabs ).append( content ); + logo.prepend( leftBracket ).append( rightBracket ); + header.append( logo, editTab, addTab ); + buttons.append( showAllParamsButton, updateButton, insertButton ); + content.append( referenceList, referenceFormContainer, buttons ); + gui.append( header, content ); $( document.body ).prepend( gui ); // Lastly, bind events logo.click( function () { content.toggle(); + editTab.toggle(); + addTab.toggle(); }); editTab.click( function () { $( this ).addClass( 'active' ).siblings().removeClass( 'active' ); - content.show(); referenceList.show(); referenceFormContainer.hide(); buttons.hide(); @@ -243,7 +242,6 @@ addTab.click( function () { $( this ).addClass( 'active' ).siblings().removeClass( 'active' ); - content.show(); referenceList.hide(); buttons.show(); showAllParamsButton.show(); @@ -876,6 +874,7 @@ // The insert all the other fields var paramName, registeredParam, paramLabel, paramType, paramDescription, paramValue, label, paramNameInput, paramValueInput, registeredParams = this.getRegisteredParams(), + requiredParams = this.getRequiredParams(); optionalParams = this.getOptionalParams(); for ( paramName in registeredParams ) { @@ -906,9 +905,14 @@ paramNameInput = $( '<input>' ).attr({ 'type': 'hidden', 'class': 'proveit-param-name', 'value': paramName }); paramValueInput = $( '<input>' ).attr({ 'type': paramType, 'class': 'proveit-param-value', 'value': paramValue }); + // Mark the required parameters as such + if ( paramName in requiredParams ) { + label.addClass( 'proveit-required' ); + } + // Hide the optional parameters, unless they are filled if ( ( paramName in optionalParams ) && !paramValue ) { - label.addClass( 'hidden' ); + label.addClass( 'proveit-hidden' ); } label.prepend( paramValueInput ).append( paramNameInput ); -- To view, visit https://gerrit.wikimedia.org/r/304168 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I56d961e6ef527d7714a0a66c80482dd59de49c31 Gerrit-PatchSet: 1 Gerrit-Project: wikipedia/gadgets/ProveIt Gerrit-Branch: master Gerrit-Owner: Felipe Schenone <scheno...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits