Attempt to restructure details pane Sass partials

Signed-off-by: Alex Coles <alex@alexbcoles.com>
10 years ago · 1929bdbf47
parent 35bec4012f
commit 1929bdbf47
16 changed files with 277 additions and 207 deletions
--- a/app/assets/stylesheets/content/_work_packages.sass
+++ b/app/assets/stylesheets/content/_work_packages.sass
@ -56,6 +56,8 @@
  width: 100%
  text-align: right

+// Legacy Form
+
 #work_package-form
  @extend %form-style
  .attributes
@ -143,113 +145,8 @@
  margin: 0
  line-height: 18px

-.panel-toggler
-  float: left
-  width: 100%
-  color: #777777
-
-  fieldset
-    border-top: 1px solid #ddd
-    border-left: 0px
-    border-right: 0px
-    border-bottom: 0px
-    cursor: pointer
-    width: 100%
-  legend
-    padding: 0 20px
-  span
-    background: #ffffff
-    padding: 0
-    font-size: 12px
-    font-size: 0.75rem
-  i
-    background: #ffffff
-    padding: 0 10px 0 0px
-
-#detail-panel-watchers
-  width: 100%
-  padding-top: 30px
-
-  ul
-    margin: 15px 0
-    padding: 0 0 15px 0
-    list-style-type: none
-
-    li
-      clear: both
-      height: 24px
-
-  .detail-panel-watchers-delete-watcher-icon
-    padding: 0 8px
-    font-size: 10px
-    color: $colors-red
-  fieldset
-    border: 0
-
-  #detail-panel-watchers-add-watcher
-    clear: left
-
-.detail-panel-attributes
-  float: left
-  margin: 15px 0 0 0
-  width: 100%
-
-  ul
-    list-style-type: none
-    +display(flex)
-    +flex-wrap(wrap)
-    margin: 10px 0 0 0
-    padding: 0
-
-    li
-      margin: 0 0 25px 0
-      padding: 0
-      +flex(1 0 33%)
-      max-width: 33%
-
-.detail-panel-attributes-toggler
-  float: left
-  margin: 10px 0 0 0
-  width: 100%
-  text-align: center
-  border-bottom: 1px solid #ddd
-
-.work-package-attributes--label
-  font-weight: bold
-  margin: 0 0 7px 0
-  padding: 0 4px 0 0
-
-.work-package-attributes--value-container
-  padding: 0 4px 0 0
-  display: block
-
-.work-package-attributes--value
-  &.-dynamic,
-  &.-version,
-  &.-category,
-  &.-text,
-    +ellipsis
-
-
-.detail-panel-latest-activity
-  float: left
-  margin: 10px 0 0 0
-  line-height: 18px
-  width: 100%
-  h3
-    margin: 0 0 10px 0
-    padding: 0
-    font-size: 14px
-    font-size: 0.875rem
-    font-weight: bold
-  ul
-    margin: 0
-    padding: 0
-    list-style-type: none
-    li
-      margin: 0 0 20px 0
-      padding: 0

+// TODO: check if still required
 .work-package-details-tab
  img
    &.avatar
@ -269,34 +166,6 @@ span.date
  display: block
  font-size: 12px

-// TODO: remove or rename with more specific name
-span.comment
-  display: block
-  margin: 10px 0 0 46px
-  padding: 0 100px 0 0
-  color: #777777
-  font-style: italic
-
-.comments-number
-  padding: 0
-  float: right
-  text-align: right
-  display: block
-
-.comments-icons
-  padding: 0
-  text-align: right
-  display: block
-  i
-    padding: 5px 0 0 5px
-    display: inline-block
-
-.comment ul
-  list-style-type: disc !important
-  margin: 10px 0 0 12px !important
-  li
-    padding: 0 !important
-    margin: 0 !important

 .comments-form
  float: left
--- a/app/assets/stylesheets/content/_work_packages_details_pane_tables.sass
+++ b/app/assets/stylesheets/content/_work_packages_details_pane_tables.sass
@ -1,47 +0,0 @@
-/* Please use these styles for tables inside the details-pane */
-
-table.detail-pane-table
-  width: 100%
-  table-layout: fixed
-  border-collapse: collapse
-  thead
-    border-bottom: 1px solid #dddddd
-    font-weight: bold
-    text-transform: uppercase
-  tr
-    td
-      padding: 3px 8px 3px 0
-      text-overflow: ellipsis
-      white-space: nowrap
-      overflow: hidden
-
-.delete-item
-  cursor: pointer
-  float: right
-  height: 1em
-
-table.relations-table
-  tr
-    td
-      &:first-of-type
-        width: 50%
-      &:nth-child(2)
-        width: 15%
-      &:nth-child(3)
-        width: 25%
-      &:last-of-type
-        width: 10%
-
-table.attachments-table
-  tr
-    td
-      &:first-of-type
-        width: 20%
-      &:nth-child(2)
-        width: 10%
-      &:nth-child(3)
-        width: 20%
-      &:nth-child(4)
-        width: 15%
-      &:last-of-type
-        width: 25%
--- a/app/assets/stylesheets/content/work_package_details/_activities_tab.md
+++ b/app/assets/stylesheets/content/work_package_details/_activities_tab.md
@ -0,0 +1 @@
+# Work Packages - [Details Pane] - Activities
--- a/app/assets/stylesheets/content/work_package_details/_activities_tab.sass
+++ b/app/assets/stylesheets/content/work_package_details/_activities_tab.sass
@ -26,8 +26,45 @@
 * See doc/COPYRIGHT.rdoc for more details.  ++
 */

-.panel-toggler
-  a
-    color: inherit
-    &:hover
-      text-decoration: inherit
+.activity-comment
+  textarea
+    width: 100%
+    height: 6em
+    -webkit-box-sizing: border-box
+    -moz-box-sizing: border-box
+    box-sizing: border-box
+    -webkit-border-radius: 3px
+    -moz-border-radius: 3px
+    border-radius: 3px
+  .button
+    float: right
+    margin-right: 0px
+
+// TODO: remove or rename with more specific name
+span.comment
+  display: block
+  margin: 10px 0 0 46px
+  padding: 0 100px 0 0
+  color: #777777
+  font-style: italic
+
+.comments-number
+  padding: 0
+  float: right
+  text-align: right
+  display: block
+
+.comments-icons
+  padding: 0
+  text-align: right
+  display: block
+  i
+    padding: 5px 0 0 5px
+    display: inline-block
+
+.comment ul
+  list-style-type: disc !important
+  margin: 10px 0 0 12px !important
+  li
+    padding: 0 !important
+    margin: 0 !important
--- a/app/assets/stylesheets/content/work_package_details/_attachments_tab.md
+++ b/app/assets/stylesheets/content/work_package_details/_attachments_tab.md
@ -0,0 +1 @@
+# Work Packages - [Details Pane] - Attachments
--- a/app/assets/stylesheets/content/work_package_details/_attachments_tab.sass
+++ b/app/assets/stylesheets/content/work_package_details/_attachments_tab.sass
--- a/app/assets/stylesheets/content/work_package_details/_overview_tab.md
+++ b/app/assets/stylesheets/content/work_package_details/_overview_tab.md
@ -1,4 +1,4 @@
-# Work Packages Detail Overview
+# Work Packages - [Details Pane] - Overview

 ## Attributes

--- a/app/assets/stylesheets/content/work_package_details/_overview_tab.sass
+++ b/app/assets/stylesheets/content/work_package_details/_overview_tab.sass
@ -0,0 +1,116 @@
+/*-- copyright
+ * OpenProject is a project management system.
+ * Copyright (C) 2012-2014 the OpenProject Foundation (OPF)
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License version 3.
+ *
+ * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+ * Copyright (C) 2006-2013 Jean-Philippe Lang
+ * Copyright (C) 2010-2013 the ChiliProject Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * See doc/COPYRIGHT.rdoc for more details.  ++
+ */
+
+.detail-panel-attributes
+  float: left
+  margin: 15px 0 0 0
+  width: 100%
+
+  ul
+    list-style-type: none
+    +display(flex)
+    +flex-wrap(wrap)
+    margin: 10px 0 0 0
+    padding: 0
+
+    li
+      margin: 0 0 25px 0
+      padding: 0
+      +flex(1 0 33%)
+      max-width: 33%
+
+.detail-panel-attributes-toggler
+  float: left
+  margin: 10px 0 0 0
+  width: 100%
+  text-align: center
+  border-bottom: 1px solid #ddd
+
+.work-package-attributes--label
+  font-weight: bold
+  margin: 0 0 7px 0
+  padding: 0 4px 0 0
+
+.work-package-attributes--value-container
+  padding: 0 4px 0 0
+  display: block
+
+.work-package-attributes--value
+  &.-dynamic,
+  &.-version,
+  &.-category,
+  &.-text,
+    +ellipsis
+
+
+.detail-panel-latest-activity
+  float: left
+  margin: 10px 0 0 0
+  line-height: 18px
+  width: 100%
+  h3
+    margin: 0 0 10px 0
+    padding: 0
+    font-size: 14px
+    font-size: 0.875rem
+    font-weight: bold
+  ul
+    margin: 0
+    padding: 0
+    list-style-type: none
+    li
+      margin: 0 0 20px 0
+      padding: 0
+
+
+.panel-toggler
+  float: left
+  width: 100%
+  color: #777777
+
+  fieldset
+    border-top: 1px solid #ddd
+    border-left: 0px
+    border-right: 0px
+    border-bottom: 0px
+    cursor: pointer
+    width: 100%
+  legend
+    padding: 0 20px
+  span
+    background: #ffffff
+    padding: 0
+    font-size: 12px
+    font-size: 0.75rem
+  i
+    background: #ffffff
+    padding: 0 10px 0 0px
+  a
+    color: inherit
+    &:hover
+      text-decoration: inherit
--- a/app/assets/stylesheets/content/work_package_details/_relations_tab.md
+++ b/app/assets/stylesheets/content/work_package_details/_relations_tab.md
@ -0,0 +1 @@
+# Work Packages - [Details Pane] - Relations
--- a/app/assets/stylesheets/content/work_package_details/_relations_tab.sass
+++ b/app/assets/stylesheets/content/work_package_details/_relations_tab.sass
--- a/app/assets/stylesheets/content/_work_packages_details_pane_tables.md
+++ b/app/assets/stylesheets/content/_work_packages_details_pane_tables.md
--- a/app/assets/stylesheets/content/work_package_details/_tables.sass
+++ b/app/assets/stylesheets/content/work_package_details/_tables.sass
@ -0,0 +1,73 @@
+/*-- copyright
+ * OpenProject is a project management system.
+ * Copyright (C) 2012-2014 the OpenProject Foundation (OPF)
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License version 3.
+ *
+ * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+ * Copyright (C) 2006-2013 Jean-Philippe Lang
+ * Copyright (C) 2010-2013 the ChiliProject Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * See doc/COPYRIGHT.rdoc for more details.  ++
+ */
+
+table.detail-pane-table
+  width: 100%
+  table-layout: fixed
+  border-collapse: collapse
+  thead
+    border-bottom: 1px solid #dddddd
+    font-weight: bold
+    text-transform: uppercase
+  tr
+    td
+      padding: 3px 8px 3px 0
+      text-overflow: ellipsis
+      white-space: nowrap
+      overflow: hidden
+
+.delete-item
+  cursor: pointer
+  float: right
+  height: 1em
+
+table.relations-table
+  tr
+    td
+      &:first-of-type
+        width: 50%
+      &:nth-child(2)
+        width: 15%
+      &:nth-child(3)
+        width: 25%
+      &:last-of-type
+        width: 10%
+
+table.attachments-table
+  tr
+    td
+      &:first-of-type
+        width: 20%
+      &:nth-child(2)
+        width: 10%
+      &:nth-child(3)
+        width: 20%
+      &:nth-child(4)
+        width: 15%
+      &:last-of-type
+        width: 25%
--- a/app/assets/stylesheets/content/work_package_details/_watchers_tab.md
+++ b/app/assets/stylesheets/content/work_package_details/_watchers_tab.md
@ -0,0 +1 @@
+# Work Packages - [Details Pane] - Watchers
--- a/app/assets/stylesheets/content/work_package_details/_watchers_tab.sass
+++ b/app/assets/stylesheets/content/work_package_details/_watchers_tab.sass
@ -26,16 +26,25 @@
 * See doc/COPYRIGHT.rdoc for more details.  ++
 */

-.activity-comment
-  textarea
-    width: 100%
-    height: 6em
-    -webkit-box-sizing: border-box
-    -moz-box-sizing: border-box
-    box-sizing: border-box
-    -webkit-border-radius: 3px
-    -moz-border-radius: 3px
-    border-radius: 3px
-  .button
-    float: right
-    margin-right: 0px
+#detail-panel-watchers
+  width: 100%
+  padding-top: 30px
+
+  ul
+    margin: 15px 0
+    padding: 0 0 15px 0
+    list-style-type: none
+
+    li
+      clear: both
+      height: 24px
+
+  .detail-panel-watchers-delete-watcher-icon
+    padding: 0 8px
+    font-size: 10px
+    color: $colors-red
+  fieldset
+    border: 0
+
+  #detail-panel-watchers-add-watcher
+    clear: left
--- a/app/assets/stylesheets/default.css.sass
+++ b/app/assets/stylesheets/default.css.sass
@ -57,12 +57,15 @@
@import content/watchers
@import content/work_packages
@import content/work_packages_filters
-@import content/work_packages_relations
@import content/work_packages_table
-@import content/work_packages_details_activities
-@import content/work_packages_details_attachments
-@import content/work_packages_details_pane_tables
-@import content/work_packages_details_overview
+
+@import content/work_package_details/tables
+@import content/work_package_details/activities_tab
+@import content/work_package_details/attachments_tab
+@import content/work_package_details/overview_tab
+@import content/work_package_details/relations_tab
+@import content/work_package_details/watchers_tab
+
@import content/expandable_group_content
@import content/control_colors
@import content/components_add_comments_default
--- a/app/assets/stylesheets/default_simple.css.sass
+++ b/app/assets/stylesheets/default_simple.css.sass
@ -57,8 +57,14 @@
@import content/work_packages
@import content/work_packages_filters
@import content/work_packages_table
-@import content/work_packages_details_pane_tables
-@import content/work_packages_details_overview
+
+@import content/work_package_details/tables
+@import content/work_package_details/activities_tab
+@import content/work_package_details/attachments_tab
+@import content/work_package_details/overview_tab
+@import content/work_package_details/relations_tab
+@import content/work_package_details/watchers_tab
+
@import content/expandable_group_content
@import content/control_colors
@import content/components_add_comments_default
				`@ -0,0 +1 @@`
				`# Work Packages - [Details Pane] - Activities`
				`@ -0,0 +1 @@`
				`# Work Packages - [Details Pane] - Attachments`
				`@ -0,0 +1 @@`
				`# Work Packages - [Details Pane] - Relations`