@@ -, +, @@ editor --- koha-tmpl/intranet-tmpl/prog/css/staff-global.css | 96 ++++++++-------- .../prog/en/modules/catalogue/moredetail.tt | 2 + .../intranet-tmpl/prog/js/public/moredetail.js | 124 +++++++++++++++++++++ 3 files changed, 178 insertions(+), 44 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 @@ -75,12 +75,12 @@ h3 { } h4 { - font-size : 116%; + font-size : 116%; font-weight : bold; } h5 { - font-size : 100%; + font-size : 100%; font-weight : bold; } @@ -614,7 +614,7 @@ div.yui-b fieldset.brief fieldset legend { margin-left: 20px; } -fieldset.rows { +fieldset.rows { border-width : 1px; border:2px solid #b9d8d9; float : left; @@ -622,7 +622,7 @@ font-size : 90%; clear : left; margin: .9em 0 0 0; padding: 0; -width: 100%; +width: 100%; } fieldset.rows.unselected { @@ -631,17 +631,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; } @@ -652,8 +652,8 @@ 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 td label, .yui-b fieldset.rows td span.label { @@ -664,8 +664,8 @@ fieldset.rows fieldset { 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 { @@ -674,20 +674,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 { @@ -783,17 +783,17 @@ 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; + margin-right: 1em; text-align: left; padding-top: 0; } @@ -802,8 +802,8 @@ div.rows span.label { white-space: normal; } -div.rows ol { -padding: .5em 1em 0 0; +div.rows ol { +padding: .5em 1em 0 0; list-style-type: none; } @@ -818,7 +818,7 @@ clear : left; padding-bottom: .2em; padding-top: .1em; list-style-type: none; -width: 100%; +width: 100%; } a.cancel { @@ -946,8 +946,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 { @@ -966,6 +966,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; } @@ -1035,7 +1043,7 @@ span.expired { } div.help { - margin: .9em 0 0 0; + margin: .9em 0 0 0; } .blocker { @@ -1092,12 +1100,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; @@ -1252,11 +1260,11 @@ div.note i.fa-exclamation { div.results { padding : .7em 0; } - + .accesskey { text-decoration : underline; } - + label.required, span.required { color : #C00; @@ -1388,7 +1396,7 @@ h1#logo a { } #closewindow a { - font-weight : bold; + font-weight : bold; } .patroninfo+#menu { @@ -1421,10 +1429,10 @@ li.email { } .clearfix:after { - content: "."; - display: block; - height: 0; - clear: both; + content: "."; + display: block; + height: 0; + clear: both; visibility: hidden; } @@ -1664,7 +1672,7 @@ input.warning { } #displayexample { - padding: 5px; + padding: 5px; margin-bottom: 10px; background-color: #CCCCCC; } @@ -1781,7 +1789,7 @@ span.permissiondesc { .results_summary { display: block; - font-size : 85%; + font-size : 85%; color: #707070; padding : 0 0 .5em 0; } @@ -1886,10 +1894,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 + ); + }); +}); --