houston-core 0.5.0.beta1

data/app/assets/stylesheets/application/testing_report.scss

@@ -0,0 +1,279 @@
+
+.nomargin { margin: 0 -20px; }
+
+#testing_report {
+  .avatar { border-radius: 0; }
+}
+
+.testing-report-table {
+  margin-bottom: 4em;
+
+  th {
+    font-weight: bold;
+    text-align: left;
+    height: 7.5em;
+
+    &.ticket-participants {
+      padding: 0 0 8px 0;
+
+      &::after {
+        display: inline-block;
+        width: 28px;
+        text-align: center;
+      }
+    }
+  }
+
+  td { vertical-align: top; }
+
+  tbody {
+    tr.passing td {
+      background-color: rgba(26, 223, 18, 0.18);
+      color: rgb(70, 156, 44);
+      color: rgba(70, 156, 44, 0.66);
+
+      &.ticket-due-date { text-decoration: line-through; }
+      .label-inverse { background-color: rgb(70, 156, 44); }
+    }
+    tr.failing td {
+      background-color: rgba(223, 92, 18, 0.18);
+
+      &.ticket-summary { color: #B50000; }
+      .label-inverse { background-color: #B50000; }
+    }
+    tr.expanded td {
+      &.ticket-due-date { text-decoration: none; }
+    }
+    tr.deleting { opacity: 0.2 !important; }
+  }
+
+  .ticket-project { white-space: nowrap; font-weight: bold; }
+  .ticket-due-date { white-space: nowrap; }
+  td.ticket-due-date { color: #B50000; font-size: 0.8333em; }
+  .ticket-participants {
+    width: 28px;
+    max-width: 28px;
+    padding: 4px 0;
+
+    &.current-tester { font-weight: bold; }
+  }
+}
+
+.tester-verdicts { overflow: hidden; }
+
+.tester-avatar,
+.committer-avatar {
+  display: block;
+  margin: 1px;
+
+  img {
+    background-color: white;
+    border: 2px solid black;
+  }
+}
+
+.ticket-verdict {
+  display: block;
+  margin: 1px;
+
+  img {
+    background-color: white;
+    margin: 2px;
+    opacity: 0.15;
+  }
+
+  &.current-tester img { opacity: 0.60; }
+
+  &[data-verdict="passing"] img { opacity: 1.0; margin: 0; border: solid 2px #55c832; }
+  &[data-verdict="comment"] img { opacity: 1.0; margin: 0; border: solid 2px #777777; }
+  &[data-verdict="badticket"] img { opacity: 1.0; margin: 0; border: solid 2px #FFF51D; }
+  &[data-verdict="failing"] img { opacity: 1.0; margin: 0; border: solid 2px #ff3030; }
+}
+
+.testing-notes {
+  display: block;
+  max-width: 600px;
+  margin-bottom: 2em;
+
+  &.collapse { display: none; }
+
+  .commit, .testing-note, .ticket-description {
+    display: block;
+    position: relative;
+    padding: 15px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    border-width: 2px;
+    border-style: solid;
+    clear: both;
+
+    .testing-note-timestamp { line-height: 1em; color: #333; display: block; font-size: 0.88em; }
+  }
+
+  .ticket-description {
+    background: #e9e9e9;
+    border-color: #777777;
+    margin: 0.5em 0;
+    word-wrap: break-word;
+    color: #333;
+
+    hr { border-top-color: #ccc; }
+  }
+
+  .commit, .testing-note {
+    margin: 0.5em 60px 0.5em 40px;
+
+    .tester-avatar,
+    .committer-avatar {
+      float: left;
+      position: relative;
+      left: -57px;
+      margin-right: -40px;
+      background-color: white;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      border-style: solid;
+      display: block;
+      width: 0;
+
+      top: 19px;
+      bottom: auto;
+      border-top-color: transparent;
+      border-bottom-color: transparent;
+
+      left: -12px;
+      right: auto;
+      border-width: 8px 12px 8px 0;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      border-style: solid;
+      display: block;
+      width: 0;
+
+      top: 21px;
+      bottom: auto;
+      border-top-color: transparent;
+      border-bottom-color: transparent;
+
+      left: -7px;
+      right: auto;
+      border-width: 6px 9px 6px 0;
+    }
+  }
+
+  .commit {
+    background: #e9e9e9;
+    border-color: #222;
+
+    &::before {
+      border-left-color: #222;
+      border-right-color: #222;
+    }
+
+    &::after {
+      border-left-color: #e9e9e9;
+      border-right-color: #e9e9e9;
+    }
+  }
+
+  .testing-note {
+    background-color: white;
+
+    &::after {
+      border-left-color: white;
+      border-right-color: white;
+    }
+
+    &.by-tester {
+      margin: 0.5em 40px 0.5em 60px;
+
+      &::before {
+        left: auto;
+        right: -12px;
+        border-width: 8px 0 8px 12px;
+      }
+
+      &::after {
+        left: auto;
+        right: -7px;
+        border-width: 6px 0 6px 9px;
+        border-color: transparent white;
+      }
+
+      .tester-avatar {
+        float: right;
+        position: relative;
+        left: 60px;
+        margin-right: auto;
+        background-color: white;
+      }
+    }
+
+    textarea {
+      width: 80%;
+      height: 80px;
+    }
+
+    &.works { img { border-color: #0a0; } color: #0a0; }
+    &.fails { img { border-color: #c11; } color: #c11; }
+    &.badticket { img { border-color: #F5ED28; } color: #F5ED28; .tester-comment, form { color: #333; } }
+    &.none { img { border-color: #777777; } color: #777777; }
+  }
+}
+
+
+.testing-note {
+
+  // no style when verdict is 'none'
+}
+
+.testing-note-form {
+  margin-bottom: 0;
+  label {
+    display: inline-block;
+
+    input {
+      display: inline;
+      margin: 0;
+    }
+  }
+  p { margin: 0; }
+}
+
+.reopen-button { color: #888; }
+.close-button { color: #888; &.btn-success { color: white; } }
+
+.table td.ticket-testingPriority {
+  padding: 0;
+  .fa-arrow-up   { padding: 12px 2px 12px 8px; display: inline-block; }
+  .fa-arrow-down { padding: 12px 8px 12px 2px; display: inline-block; }
+}
+
+.table thead td {
+  vertical-align: bottom;
+  border-bottom: 4px solid transparent;
+}
+
+td.ticket-testingPriority { white-space: nowrap; }
+
+
+.ticket-priority-low .ticket-testingPriority .fa-arrow-down { color: #239ce7 !important; }
+.ticket-priority-high .ticket-testingPriority .fa-arrow-up { color: #e74c23 !important; }
+thead .ticket-testingPriority { color: #ccc; }
+tbody .ticket-testingPriority {
+  i, a { color: rgba(0, 0, 0, 0.04); }
+  a:hover {
+    text-decoration: none;
+    cursor: pointer;
+
+    &.fa-arrow-down { color: rgba(35, 156, 231, 0.6); }
+    &.fa-arrow-up { color: rgba(231, 76, 35, 0.6); }
+  }
+}

data/app/assets/stylesheets/application/ticket.scss

@@ -0,0 +1,156 @@
+@mixin badge-style($color) {
+  background-color: $color;
+  -moz-box-shadow: 0 0 0.22em $color;
+  -webkit-box-shadow: 0 0 0.22em $color;
+  box-shadow: 0 0 0.22em $color;
+}
+
+.ticket-view {
+  max-width: 960px;
+  margin: 0 auto;
+  
+  .ticket-header {
+    position: relative;
+    
+    > h2 {
+      margin: 0 0 0 104px;
+    }
+    
+    &::after {
+      content: '.';
+      clear: both;
+      color: transparent;
+      display: block;
+      height: 1em;
+    }
+    
+    .ticket-tracker-link {
+      position: absolute;
+      right: 1.5em;
+      bottom: 0.5em;
+    }
+  }
+
+  .ticket-number {
+    display: block;
+    font-size: 0.9em;
+    text-align: right;
+    font-weight: 400;
+    font-weight: 200;
+    color: #ccc;
+    
+    position: absolute;
+    width: 96px;
+    left: 0;
+    top: -1px;
+  }
+  
+  .ticket-state-position {
+    position: absolute;
+    width: 96px;
+    text-align: right;
+    top: 35px;
+  }
+  
+  .ticket-state {
+    color: white;
+    padding: 2px 6px;
+    display: inline-block;
+
+    border-radius: 0.25em;
+    -webkit-border-radius: 0.25em;
+    -moz-border-radius: 0.25em;
+
+    &::before {
+      font-family: FontAwesome;
+    }
+
+    &.open {
+      background: #5DB64C; // grass
+      &::before { content: '\f10c'; }
+      &::after { content: ' Open'; }
+    } 
+    &.closed {
+      background: #E24E32; // tomato
+      &::before { content: '\f05e'; }
+      &::after { content: ' Closed'; }
+    }
+    
+    &.hover {
+      cursor: pointer;
+      
+      &.open {
+        background: #999;
+        &::before { content: '\f05e'; }
+        &::after { content: ' Closed'; }
+      } 
+      &.closed {
+        background: #999;
+        &::before { content: '\f10c'; }
+        &::after { content: ' Open'; }
+      }
+    }
+  }
+  
+  
+  .ticket-summary {
+    display: block;
+    font-weight: 200;
+    font-size: 1em;
+    line-height: 1.136em;
+    position: relative;
+    left: -6px;
+
+    // To style the plaintext like the input
+    .show { padding: 4px 7px; }
+
+    input {
+      margin: 0 0 2px 0;
+      font-size: 1em;
+      height: 1em;
+      font-weight: 200;
+      width: 100%;
+    }
+  }
+  .ticket-reporter {
+    margin: 0 0 0 104px;
+    padding: 0 0 0 2px;
+    line-height: 16px; // height of avatar
+    white-space: nowrap;
+  }
+  .ticket-opened {
+    color: #bfbfbf;
+    font-weight: 500;
+  }
+
+  hr { margin: 0 0 1em; }
+
+  .ticket-description {
+    .show { min-height: 1em; }
+    &.hover .show { background: #ffd; }
+
+    textarea {
+      box-sizing: border-box;
+      width: 100%;
+      min-height: 10em;
+    }
+  }
+
+  .task-frame {
+    h4 {
+      font-weight: 500;
+      margin: 0 0 1em 0;
+    }
+  }
+
+  .buttons { text-align: right; }
+
+  .editable {
+    .edit { display: none; }
+
+    &.in-edit {
+      .show { display: none; }
+      .edit { display: block; }
+    }
+  }
+}

data/app/assets/stylesheets/application/ticket_modal.scss

@@ -0,0 +1,173 @@
+body.noscroll {
+  overflow: hidden;
+}
+
+.modal.ticket-modal {
+  margin: 0;
+  width: auto;
+  top: 4%;
+  left: 4%;
+  right: 4%;
+  bottom: 4%;
+  
+  .modal-header {
+    line-height: 1em;
+    font-weight: 400;
+    color: #D1D1D1;
+    padding: 6px 15px;
+    text-align: center;
+    
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 8;
+  }
+  
+  button.close {
+    z-index: 9999;
+    position: absolute;
+    top: -9px;
+    right: 4px;
+    padding: 7px;
+  }
+  
+  .modal-body {
+    max-height: none;
+    max-width: none;
+    box-sizing: border-box;
+    height: 100%;
+    padding: 36px 0 0 0;
+    margin: 0;
+  }
+  
+  .ticket-body {
+    position: absolute;
+    top: 110px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  
+  .uploader,
+  .buttons { margin-bottom: 0; }
+  
+  .ticket-header {
+    z-index: 5;
+    background: white;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  
+  .ticket-summary .show {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .primary-frame {
+    box-sizing: border-box;
+    padding: 0 0 0 66px;
+    border-top: 1px solid #e4e4e4;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    
+    .show {
+      padding: 15px;
+      box-sizing: border-box;
+      min-height: 100%;
+      border-bottom-right-radius: 6px;
+    }
+    
+    textarea {
+      padding: 15px;
+      border: none;
+      border-radius: 0;
+      margin: 0;
+    }
+    
+    .buttons {
+      padding: 15px;
+      background: #e4e4e4;
+      border-bottom-right-radius: 6px;
+    }
+    
+    hr { margin: 2em -15px; }
+  }
+  
+  .task-frame {
+    display: none;
+  }
+  
+  .ticket-audit-frame {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 66px;
+    overflow: hidden;
+    transition: width 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
+    border-top: 1px solid #e4e4e4;
+    border-right: 1px solid #e4e4e4;
+    border-bottom-left-radius: 6px;
+    background: white;
+    z-index: 4;
+    padding-right: 0;
+    
+    &:hover {
+      width: 320px;
+      padding-right: 16px;
+      overflow-y: auto;
+      box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15);
+    }
+    
+    .ticket-audit-timeline { width: 320px; }
+  }
+  
+  .ticket-body.show-task-frame {
+    .primary-frame {
+      width: 60%;
+    }
+    
+    .task-frame {
+      box-sizing: border-box;
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 40%;
+      padding: 15px;
+      border-left: 1px solid #e4e4e4;
+      border-top: 1px solid #e4e4e4;
+    }
+  }
+}
+
+@media (max-width:533px) {
+  .modal.ticket-modal {
+    left: 32px;
+    right: 32px;
+  }
+}
+
+@media (min-width:1024px) {
+  .modal.ticket-modal {
+    margin-left: -480px;
+    left: 50%;
+    right: auto;
+    max-width: 960px;
+    width: 960px;
+  }
+}
+
+@media (max-height:1000px) {
+  .modal.ticket-modal {
+    top: 40px;
+    bottom: 40px;
+  }
+}