PHUIPropertyListView

Summary: This builds out and implements PHUIPropertyListView (container) and PHUIPropertyListItemView (section) as well as adding tabs. Test Plan: Tested each page I edited with the exception of Releeph and Phortune, though those changes look ok to me diff wise. Updated examples page with tabs. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7283
2013-10-11 07:53:56 -07:00
parent f8d963a77e
commit 97c690fc0f
54 changed files with 581 additions and 417 deletions
--- a/webroot/rsrc/css/layout/phabricator-property-list-view.css
+++ b/webroot/rsrc/css/layout/phabricator-property-list-view.css
@@ -1,151 +0,0 @@
-/**
- * @provides phabricator-property-list-view-css
- */
-
-.phabricator-property-list-view {
-  background-color: #fff;
-}
-
-.phabricator-property-list-view .keyboard-shortcuts-available {
-  float: right;
-  height: 16px;
-  margin: 12px 10px -28px 0px;
-  padding: 0px 20px 0px 0px;
-  vertical-align: middle;
-  color: {$greytext};
-  text-align: right;
-  font-size: 11px;
-  background:
-    url('/rsrc/image/icon/fatcow/key_question.png') right center no-repeat;
-}
-
-.device .keyboard-shortcuts-available {
-  display: none;
-}
-
-.phabricator-property-list-container +
-  .phabricator-property-list-section-header {
-  border-color: {$lightgreyborder};
-  border-style: solid;
-  border-width: 1px 0 0;
-}
-
-.device-desktop .phabricator-property-list-container {
-  padding: 12px 0 12px 0;
-  width: 100%;
-}
-
-.device .phabricator-property-list-container {
-  padding: 12px 0 4px 0;
-}
-
-.phabricator-property-list-key {
-  color: {$bluetext};
-  font-weight: bold;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.device-desktop .phabricator-property-list-key {
-  width: 18%;
-  margin-left: 1%;
-  text-align: right;
-  float: left;
-  clear: left;
-  margin-bottom: 4px;
-}
-
-.device .phabricator-property-list-key {
-  padding-left: 8px;
-}
-
-.phabricator-property-list-value {
-  color: {$darkgreytext};
-  overflow: hidden;
-  line-height: 17px;
-}
-
-.device-desktop .phabricator-property-list-value {
-  width: 78%;
-  margin-left: 1%;
-  float: left;
-  margin-bottom: 4px;
-}
-
-.device .phabricator-property-list-value {
-  padding-left: 16px;
-  margin-bottom: 8px;
-}
-
-.phabricator-property-list-section-header {
-  color: {$bluetext};
-  padding: 12px 16px 0px;
-  text-transform: uppercase;
-  font-weight: 700;
-}
-
-.phabricator-property-list-section-header + .phabricator-property-list-text-content {
-  border-top: none;
-}
-
-.phabricator-property-list-text-content {
-  padding: 12px 16px;
-  background: #fff;
-  overflow: hidden;
-  border-top: 1px solid {$lightblueborder};
-}
-
-/* In the common case where we immediately follow a header, move back up 30px
-   so we snuggle next to the header. */
-.device-desktop .phui-header-view
-  + .phabricator-action-list-view {
-  margin-top: -30px;
-}
-
-.device-desktop .phui-header-view
-  + .phabricator-action-list-view
-  + .phabricator-property-list-view {
-  margin-top: 0px;
-}
-
-
-.phabricator-property-list-image {
-  margin: auto;
-  max-width: 95%;
-}
-
-.phabricator-property-list-audio {
-  display: block;
-  margin: 16px auto;
-  width: 50%;
-  min-width: 240px;
-}
-
-/* When tags appear in property lists, give them a little more vertical
-   spacing. */
-.phabricator-property-list-view .phabricator-tag-view {
-  margin: 2px 0;
-}
-
-.phabricator-property-list-properties-wrap {
-  float: left;
-  width: 78%;
-}
-
-.device .phabricator-property-list-properties-wrap {
-  width: auto;
-  border: none;
-}
-
-.phabricator-property-list-actions {
-  width: 20%;
-  float: right;
-  margin-right: 12px;
-  border-left: 1px solid {$thinblueborder};
-}
-
-.device .phabricator-property-list-actions {
-  float: none;
-  width: auto;
-  margin: -12px 0 12px 0;
-}