<commit_before><polymer-element name='oj-annotation' attributes="paper annotation">
  <template>
    <div id=container class='container {{annotation | classes}}' >

      <div on-tap="{{toggleCollapsed}}" class='content'>

        <template if="{{paper.state=='under_review' && (annotation.author.role=='editor' || annotation.author.role == 'reviewer' ) }}">
          <oj-reviewer-annotation-controls paper={{paper}}  annotation={{annotation}} ></oj-reviewer-annotation-controls>
        </template>

        <template if="{{collapsed}}">
          <p layout horizontal class=collapsed>
            <span class=text>{{annotation.body}}</span>
            <span flex></span>
            <span class=count>{{annotation.responses.length}} replies</span>
          </p>
        </template>
        <template if="{{!collapsed}}">
          <p><span class=text>{{annotation.body}}</span></p>
        </template>
      </div>

      <template if="{{!collapsed}}">

        <div class='comments'>
          <template repeat="{{response in annotation.responses}}">
            <p class='comment'>{{response.body}}</p>
          </template>
        </div>

        <template if={{newCommentVisible}}>
          <paper-autogrow-textarea rows=2>
            <textarea id=replyTextArea class=niceTextArea value={{text}} placeholder="Add a reply..."> </textarea>
          </paper-autogrow-textarea>
          <div layout horizontal end-justified class='controls'>
            <paper-icon-button disabled?={{!text}} on-click={{submitComment}}  icon="add"></paper-icon-button>
            <paper-icon-button on-click={{dismissNewComment}} icon="close"></paper-icon-button>
          </div>
        </template>


        <template if={{!newCommentVisible}}>
          <div layout horizontal>
            <span flex></span>
            <core-icon on-click= {{showNewComment}} icon='reply'></core-icon>
          </div>
        </template>

      </template>
    </div>


    <core-ajax id="newCommentRequest"
              url="{{paper | addIssuePath}}"
              method="POST"
              contentType="application/json"
              handleAs=json
              on-core-response={{saved}}
              on-core-error={{error}}></core-ajax>

    <style>
      :host{
        width: 100%;
        position:absolute;
        color: white;
      }
      .container{
        padding: 10px;
        box-sizing: border-box;
        -webkit-transition: height 3s; /* For Safari 3.1 to 6.0 */
        transition: height 3s;
      }
      .content{
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
      .content .text {
        font-weight: bold;
      }
      .content .collapsed .text {
          display: inline-block;
          width: 300px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
      oj-reviewer-annotation-controls {
          position: absolute;
          top:      0;
          right:    6px;
      }
      paper-autogrow-textarea {
          box-sizing:border-box;
          width: 100%;
      }
      textarea{
        box-sizing:border-box;
        width: 100%;
        padding: 8px;
        border: 1px solid #cccccc;
        line-height: 130%;
        font-size: 13px;
      }
      .comment {
        box-sizing:border-box;
        padding: 10px 0 10px 10px;
      }

      /* State Colors */
      .container{
          background-color: grey;
      }
      .comment {
          background-color: #909090;
      }
      .container.state-unresolved {
          background-color: #6b711c;
      }
      .state-unresolved .comment {
          background-color: #767c1e;
      }
      .container.state-resolved {
          background-color: #0D47A1;
      }
      .state-resolved .comment {
          background-color: #1565b3;
      }
      .container.state-disputed {
          background-color: #a42d25;
      }
      .state-disputed .comment {
          background-color: #c3362b;
      }

    </style>
  </template>

  <script>
    Polymer({
      newCommentVisible: false,
      collapsed: true,
      classes: function(annotation){
        return 'state-' + annotation.state + ' role-'+annotation.author.role;
      },
      dismissNewComment:function(){
        this.newCommentVisible = false;
      },
      showNewComment:function(){
        this.newCommentVisible = true;
        setTimeout(function(){
            this.afterCommentVisible();
        }.bind(this), 0);
      },
      afterCommentVisible: function() {
          var edit = this.$.container.querySelector('#replyTextArea');
          this.scrollIntoView();
          this.focus();
      },<commit_msg>Rework annotations to have a single container div instead of two which are stoggled to expand it<commit_after><polymer-element name='oj-annotation' attributes="paper annotation">
  <template>
    <div id=container class='container {{annotation | classes}} {{collapsed ? "collapsed" : "expanded"}}' >

      <template if="{{paper.state=='under_review' && (annotation.author.role=='editor' || annotation.author.role == 'reviewer' ) }}">
        <oj-reviewer-annotation-controls paper={{paper}}  annotation={{annotation}} ></oj-reviewer-annotation-controls>
      </template>

      <div on-tap="{{toggleCollapsed}}" class=header>
          <div class=issue>{{annotation.body}}</div>
          <div class=count>{{annotation.responses.length}} replies</div>
      </div>

      <template if={{!collapsed}}>

        <div class='comments'>
          <template repeat="{{response in annotation.responses}}">
            <p class='comment'>{{response.body}}</p>
          </template>
        </div>

        <template if={{newCommentVisible}}>
          <paper-autogrow-textarea rows=2>
            <textarea id=replyTextArea class=niceTextArea value={{text}} placeholder="Add a reply..."> </textarea>
          </paper-autogrow-textarea>
          <div layout horizontal end-justified class='controls'>
            <paper-icon-button disabled?={{!text}} on-click={{submitComment}}  icon="add"></paper-icon-button>
            <paper-icon-button on-click={{dismissNewComment}} icon="close"></paper-icon-button>
          </div>
        </template>

        <template if={{!newCommentVisible}}>
          <div layout horizontal>
            <span flex></span>
            <core-icon on-click= {{showNewComment}} icon='reply'></core-icon>
          </div>
        </template>

      </template>

    </div>

    <core-ajax id="newCommentRequest"
              url="{{paper | addIssuePath}}"
              method="POST"
              contentType="application/json"
              handleAs=json
              on-core-response={{saved}}
              on-core-error={{error}}></core-ajax>

    <style>
      :host{
        width: 100%;
        position:absolute;
        color: white;
      }
      .container{
        padding: 10px;
        box-sizing: border-box;
        -webkit-transition: height 3s; /* For Safari 3.1 to 6.0 */
        transition: height 3s;
      }
      .header {
        margin: 16px 0 12px 8px;
      }
      .issue {
          font-weight: bold;
          cursor: pointer;
      }
      .collapsed .issue {
          width:         400px;
          white-space:   nowrap;
          overflow:      hidden;
          text-overflow: ellipsis;
      }
      .count {
          position: absolute;
          top:      24px;
          right:    12px;
      }
      .expanded .count {
          display: none;
      }
      .comment {
          box-sizing:border-box;
          padding: 10px 0 10px 10px;
      }

      oj-reviewer-annotation-controls {
          position: absolute;
          top:      0;
          right:    6px;
      }
      paper-autogrow-textarea {
          box-sizing:border-box;
          width: 100%;
      }
      textarea{
        box-sizing:border-box;
        width: 100%;
        padding: 8px;
        border: 1px solid #cccccc;
        line-height: 130%;
        font-size: 13px;
      }

      /* State Colors */
      .container{
          background-color: grey;
      }
      .comment {
          background-color: #909090;
      }
      .container.state-unresolved {
          background-color: #6b711c;
      }
      .state-unresolved .comment {
          background-color: #767c1e;
      }
      .container.state-resolved {
          background-color: #0D47A1;
      }
      .state-resolved .comment {
          background-color: #1565b3;
      }
      .container.state-disputed {
          background-color: #a42d25;
      }
      .state-disputed .comment {
          background-color: #c3362b;
      }

    </style>
  </template>

  <script>
    Polymer({
      newCommentVisible: false,
      collapsed: true,
      classes: function(annotation){
        return 'state-' + annotation.state + ' role-'+annotation.author.role;
      },
      dismissNewComment:function(){
        this.newCommentVisible = false;
      },
      showNewComment:function(){
        this.newCommentVisible = true;
        this.async( this.afterCommentVisible() );
      },
      afterCommentVisible: function() {
          var edit = this.$.container.querySelector('#replyTextArea');
          edit.scrollIntoView();
          edit.focus();
      },
{'fraction_non_alphanumeric': 0.14052181444191836, 'fraction_numerical': 0.016563819421890225, 'mean_word_length': 1.8618339529120198, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 111, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5445926', 'n_tokens_mistral': 2771, 'n_tokens_neox': 2598, 'n_words': 502}