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
