@@ -, +, @@ --- koha-tmpl/intranet-tmpl/prog/css/staff-global.css | 100 +++++++++-------- .../prog/en/modules/catalogue/moredetail.tt | 2 + .../intranet-tmpl/prog/js/public/moredetail.js | 124 +++++++++++++++++++++ 3 files changed, 180 insertions(+), 46 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/js/public/moredetail.js --- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css +++ a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css @@ -65,12 +65,12 @@ h3 { } h4 { - font-size : 116%; + font-size : 116%; font-weight : bold; } h5 { - font-size : 100%; + font-size : 100%; font-weight : bold; } @@ -561,15 +561,15 @@ div.yui-b fieldset.brief fieldset legend { font-size : 85%; } -fieldset.rows { +fieldset.rows { border-width : 1px; border:2px solid #b9d8d9; float : left; font-size : 90%; clear : left; -margin: .9em 0 0 0; +margin: .9em 0 0 0; padding: 0; -width: 100%; +width: 100%; } fieldset.rows.unselected { @@ -578,17 +578,17 @@ fieldset.rows.unselected { border: 0; } -fieldset.rows legend { +fieldset.rows legend { margin-left: 1em; font-weight: bold; font-size : 110%; } -fieldset.rows label, fieldset.rows span.label { - float: left; +fieldset.rows label, fieldset.rows span.label { + float: left; font-weight : bold; - width: 6em; - margin-right: 1em; + width: 6em; + margin-right: 1em; text-align: right; } @@ -599,16 +599,16 @@ fieldset.rows fieldset { padding : .3em; } -.yui-b fieldset.rows label, .yui-b fieldset.rows span.label { - width: 9em; +.yui-b fieldset.rows label, .yui-b fieldset.rows span.label { + width: 9em; } .yui-b fieldset.rows div.hint { margin-left : 10.5em; } -.yui-u fieldset.rows label, .yui-u fieldset.rows span.label { - width: 10em; +.yui-u fieldset.rows label, .yui-u fieldset.rows span.label { + width: 10em; } .yui-u fieldset.rows div.hint { @@ -617,20 +617,20 @@ fieldset.rows fieldset { fieldset.rows.left label, fieldset.rows.left span.label { width : 8em; - text-align : left; + text-align : left; } -fieldset.rows ol { -padding: 1em 1em 0 1em; +fieldset.rows ol { +padding: 1em 1em 0 1em; list-style-type: none; } -fieldset.rows li { +fieldset.rows li { float : left; clear : left; padding-bottom: 1em; list-style-type: none; -width: 100%; +width: 100%; } fieldset.rows.left li { @@ -708,22 +708,22 @@ div.rows+div.rows { div.rows { float : left; clear : left; -margin: 0 0 0 0; +margin: 0 0 0 0; padding: 0; -width: 100%; +width: 100%; } -div.rows span.label { - float: left; +div.rows span.label { + float: left; font-weight : bold; - width: 9em; - margin-right: 1em; + width: 9em; + margin-right: 1em; text-align: left; } -div.rows ol { -padding: .5em 1em 0 0; +div.rows ol { +padding: .5em 1em 0 0; list-style-type: none; } @@ -738,7 +738,7 @@ clear : left; padding-bottom: .2em; padding-top: .1em; list-style-type: none; -width: 100%; +width: 100%; } a.cancel { @@ -849,8 +849,8 @@ ol.bibliodetails span.label { border-right : 1px solid #E8E8E8; float : left; font-weight: bold; - width: 12em; - margin-right: 1em; + width: 12em; + margin-right: 1em; } div.listgroup { @@ -869,6 +869,14 @@ div.listgroup input { font-size: 80%; } +div.listgroup ol li span.label i { + margin-right : .5em; +} + +div.listgroup ol li button,a { + margin-left : .5em; +} + div.sysprefs h3 { margin : .2em 0 .2em .4em; } @@ -938,7 +946,7 @@ span.expired { } div.help { - margin: .9em 0 0 0; + margin: .9em 0 0 0; } .blocker { @@ -996,12 +1004,12 @@ div.first fieldset { .dialog table td { text-align : left; } - + .dialog h2, .dialog h3, .dialog h4 { margin : auto; text-align : center; } - + .dialog input { background-color : #FFF; border : 1px solid #bcbcbc; @@ -1155,11 +1163,11 @@ div.note i.fa-exclamation { div.results { padding : .7em 0; } - + .accesskey { text-decoration : underline; } - + label.required, span.required { color : #C00; @@ -1293,7 +1301,7 @@ h1#logo a { } #closewindow a { - font-weight : bold; + font-weight : bold; } .patroninfo+#menu { @@ -1326,10 +1334,10 @@ li.email { } .clearfix:after { - content: "."; - display: block; - height: 0; - clear: both; + content: "."; + display: block; + height: 0; + clear: both; visibility: hidden; } @@ -1570,7 +1578,7 @@ input.warning { } #displayexample { - padding: 5px; + padding: 5px; margin-bottom: 10px; background-color: #CCCCCC; } @@ -1689,7 +1697,7 @@ span.permissiondesc { .results_summary { display: block; - font-size : 85%; + font-size : 85%; color: #707070; padding : 0 0 .5em 0; } @@ -1795,10 +1803,10 @@ fieldset.rows+h3 {clear:both;padding-top:.5em;} } .m880 { - display:block; - text-align:right; - float:right; - width:50%; + display:block; + text-align:right; + float:right; + width:50%; padding-left:20px } --- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt +++ a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt @@ -15,6 +15,7 @@ browser.show(); //]]> + [% USE KohaDates %] @@ -199,6 +200,7 @@ [% END %] +

History

    --- a/koha-tmpl/intranet-tmpl/prog/js/public/moredetail.js +++ a/koha-tmpl/intranet-tmpl/prog/js/public/moredetail.js @@ -0,0 +1,124 @@ +var React = require('react'); +var ReactDOM = require('react-dom'); + +var ItemMessages = React.createClass({ + propTypes: { + messages: React.PropTypes.array.isRequired + }, + getInitialState: function() { + return { messages: this.props.messages }; + }, + addMessage: function(message) { + this.setState(function(state) { + var newData = state.messages.slice(); + newData.push( message ); + return {messages: newData}; + }); + }, + removeMessage: function(index) { + this.setState(function(state) { + var newData = state.messages.slice(); + newData.splice(index, 1); + return {messages: newData}; + }); + }, + render: function () { + var item_messages = this; + return
    +

    Messages

    +
      + {this.state.messages.map(function(message, index) { + return + })} + +
    +
    ; + } +}); + +var ItemMessage = React.createClass({ + propTypes: { + message: React.PropTypes.object.isRequired, + index: React.PropTypes.number.isRequired, + onRemove: React.PropTypes.func.isRequired, + }, + removeMessage: function() { + if ( confirm("Delete message the following message? : " + this.props.message.content ) ) { + this.props.onRemove(this.props.index); + } + }, + render: function () { + return
  1. + + + {this.props.message.type} + + {this.props.message.content} +
  2. + } +}); + +var ItemMessageCreator = React.createClass({ + propTypes: { + onAdd: React.PropTypes.func.isRequired, + }, + getInitialState: function () { + return { + content: "", + type: "", + }; + }, + addMessage: function() { + this.props.onAdd( + { + id: Math.random() * 100, + type: this.state.type, + content: this.state.content, + } + ); + }, + cancelMessage: function() { + this.setState( this.getInitialState ); + return false; + }, + handleTypeChange: function(e) { + this.setState({ type: e.target.value }); + }, + handleContentChange: function(e) { + this.setState({ content: e.target.value }); + }, + render: function () { + return
  3. + + + + + + Cancel +
  4. + } +}); + +$( document ).ready(function() { + var messages = [ + { id: 1, type: "Test 1", content: "Message 1" }, + { id: 2, type: "Test 2", content: "Message 2" }, + { id: 3, type: "Test 3", content: "Message 3" }, + { id: 4, type: "Test 4", content: "Message 4" }, + { id: 5, type: "Test 5", content: "Message 5" }, + ]; + + $('.item-messages').each(function() { + ReactDOM.render( + , + this + ); + }); +}); --