proposal-box.html 9.32 KB
<div class="proposal-box" ng-class="[{'focus': (vm.focus || (vm.STATE === vm.VOTE_STATUS.LOADING) )}, vm.category.slug]">
  <div ng-show="(vm.STATE === vm.VOTE_STATUS.SUCCESS) || (vm.STATE === vm.VOTE_STATUS.ERROR)">
    <div class="proposal-message-panel">
      <div class="row">
        <div class="row-height">
          <div class="col-sm-12 col-height col-middle">
            <div class="inside inside-full-height">
              <div class="content text-center show-message">
                <div class="row">
                  <div class="col-xs-12">
                    <div class="message-icon color-fg-white" ng-class="{'success': (vm.STATE === vm.VOTE_STATUS.SUCCESS), 'error': vm.STATE === vm.VOTE_STATUS.ERROR}">
                      <span ng-if="vm.STATE === vm.VOTE_STATUS.SUCCESS" class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                      <span ng-if="vm.STATE === vm.VOTE_STATUS.ERROR" class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-xs-12">
                    <div class="feedback" ng-if="vm.STATE === vm.VOTE_STATUS.SUCCESS">
                      <p class="feedback--title">Obrigado por apoiar<br/>esta proposta!</p>

                      <!-- actions -->
                      <div class="row feedback--message">
                        <div class="col-xs-6 feedback--share">
                          <div class="row">
                            <span>Compartilhe<br/>esta proposta</span>
                          </div>
                          <div class="row">
                            <button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento">
                              <span class="icon icon-social-share" aria-hidden="true"></span>
                            </button>
                            <social-share
                              url="vm.getSocialUrl()"
                              text="vm.getSocialText()"
                              image="vm.getSocialImage()"
                              class="dropdown-menu dropdown-menu-right ng-isolate-scope"></social-share>
                            </div>
                        </div>
                        <div class="col-xs-6 feedback--next">
                          <div class="row">
                            <span>Próxima<br/>proposta</span>
                          </div>
                          <div class="row">
                            <button class="btn btn-link" aria-label="Ir para próxima proposta" ng-click="vm.skip()">
                              <div class="icon-circle play">
                                <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                              </div>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="feedback" ng-if="vm.STATE === vm.VOTE_STATUS.ERROR">
                      <p class="feedback--title">Erro!</p>
                      <p class="feedback--message" ng-if="vm.messageCode === 401">
                        Não autorizado. Insira um novo captcha.
                        <br>
                        <button type="button" class="btn btn-link" ng-click="vm.captchaTryAgain()">Gerar novo captcha</button>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div ng-show="vm.showCaptchaForm">
    <div class="proposal-message-panel">
      <div class="row">
        <div class="row-height">
          <div class="col-sm-12 col-height col-middle">
            <div class="inside inside-full-height">
              <div class="content text-center">
                <div ng-show="vm.sendingCaptcha">
                  <p>Enviando captcha...</p>
                </div>
                <div ng-hide="vm.sendingCaptcha">
                  <div class="row feedback-message" ng-show="vm.sendingCaptchaError">
                    <div class="col-sm-12">
                      <div class="feedback--title alert alert-danger">Erro!</div>
                      <div class="feedback--message" ng-if="!vm.message">
                        <p ng-bind-html="vm.sendingCaptchaError.message"></p>
                      </div>
                      <div>
                        <button type="reset" class="btn btn-link" ng-click="vm.captchaTryAgain()">Tentar novamente</button>
                        <button type="reset" class="btn btn-link" ng-click="vm.showCaptchaForm = false">Voltar</button>
                      </div>
                    </div>
                  </div>
                  <div ng-hide="vm.sendingCaptchaError">
                    <form name="captchaForm" ng-submit="vm.submitCaptcha($event, captchaForm)">
                      <div class="form-group">
                        <div id="serpro_captcha" class="captcha"></div>
                        <div class="captcha">Digite os caracteres acima:</div>
                        <div class="captcha">
                          <input type="text" name="captcha_text" id="captcha_text" aria-label="Escreva os caracteres do captcha aqui" ng-model="vm._captcha_text" ng-minlength="" ng-maxlength="" required>
                          <validation-messages field="captchaForm.captcha_text"></validation-messages>
                        </div>
                      </div>
                      <div class="form-group">
                        <button  type="submit" class="btn btn-lg btn-block btn-submit">Enviar</button>
                      </div>
                      <div class="form-group">
                        <button type="reset" class="btn btn-link" ng-click="vm.showCaptchaForm = false">Voltar</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div ng-show="vm.STATE === vm.VOTE_STATUS.LOADING">
    <div class="proposal-message-panel">
      <div class="row">
        <div class="row-height">
          <div class="col-sm-12 col-height col-middle">
            <div class="inside inside-full-height">
              <div class="content text-center">
                <div ng-show="!vm.errorOnSkip">
                  <p>Carregando...</p>
                </div>
                <div ng-show="vm.errorOnSkip">
                  <p>Erro ao carregar nova proposta proposta.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="proposal-box--top">
    <div class="proposal-box--theme color-theme-bg-complementar-2">{{vm.category.name}}</div>
    <div class="proposal-box--program color-theme-bg">{{vm.topic.title}}</div>
  </div>
  <div class="proposal-box--middle">
    <div class="proposal-box--content">
      <div class="proposal-box--content-inner">{{vm.proposal.abstract}}</div>
    </div>
    <div ng-hide="vm.showVote" class="proposal-box--join">
      <button class="btn btn-link color-theme-common-fg" ng-click="vm.showContent(vm.topic.slug)">
        Participe
      </button>
    </div>
    <div ng-show="vm.showVote" class="proposal-box--actions text-center">
      <div class="row">
        <div class="col-xs-4">
          <div class="action vote_for" ng-click="vm.vote(vm.VOTE_OPTIONS.UP)">
            <div class="icon-circle">
              <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
            </div>
            <div class="action-label">Apoio</div>
          </div>
        </div>
        <div class="col-xs-4">
          <div class="action skip" ng-click="vm.skip()">
            <div class="icon-circle">
              <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
            </div>
            <div class="action-label">Pular</div>
          </div>
        </div>
        <div class="col-xs-4">
          <div class="action vote_against" ng-click="vm.vote(vm.VOTE_OPTIONS.DOWN)">
            <div class="icon-circle">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </div>
            <div class="action-label">Não Apoio</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="proposal-box--bottom text-center">
    <div class="proposal-box--share">
      <span>COMPARTILHE ESTA <b>PROPOSTA</b></span>
      <div class="dropdown">
        <button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>
        <social-share class="dropdown-menu dropdown-menu-right"></social-share>
      </div>
    </div>
    <div class="proposal-box--ranking">
      <div class="proposal-box--ranking-inner">
        <span class="icon icon-small icon-ranking" aria-hidden="true"></span>
        <span>Colocação nos resultados:</span>
        <span>{{vm.proposal.ranking_position}}º</span>
      </div>
    </div>
  </div>
</div>