Set item-list/item css classes to allow drag-drop.

fvtt-fria-ligan · May 27, 2022 · 7b02939 · 7b02939
1 parent f6a6317
commit 7b02939
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 122 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 1.2.0
+
+- Enable drag-drop for equipment, weapons, and armor on Belongings tab, allowing non-destructive drag-drop to other character or npc sheets.
+
 # 1.1.1
 
 - Fix various item and description discrepenacies identified by Kaybe.

diff --git a/css/deathinspace.css b/css/deathinspace.css
@@ -1313,107 +1313,44 @@
 .deathinspace.sheet.npc .data-wrapper .form-spacer {
   height: 20px;
 }
-.ability-check-dialog {
-  border: 2px solid var(--character-background-color);
-}
-.add-item-dialog {
+
+.attack-outcome-card {
   border: 2px solid var(--character-background-color);
 }
-.deathinspace.app.window-app .window-content {
-  background: url(../assets/images/ui/seamless_paper_texture.png) repeat;
+.attack-outcome-card .risky-outcome {
+  font-size: 12px;
+  text-transform: none;
 }
-
-.attack-dialog {
-  border: 2px solid var(--character-background-color);
-  color: var(--foreground-color);
+.roll-card {
+  border: 2px solid var(--highlight-background-color);
   font-family: var(--text-font);
-  margin: 0;
-  padding: 10px;
+  padding: 5px;
 }
-.attack-dialog .form-group {
-  margin-top: 10px;
+.roll-card .card-title {
+  font-weight: bold;
   margin-bottom: 10px;
-}
-.attack-dialog .form-group ul {
-  list-style-type: none;
-  margin-left: 0;
-  padding-left: 0;
-}
-.attack-dialog .form-group ul li input[type=radio] {
-  float: left;
-  margin-top: 5px;
-}
-.attack-dialog .form-group ul li label div {
-  display: block;
-  margin-left: 30px;
-}
-.attack-dialog .button-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-  margin-top: 10px;
-}
-.attack-dialog .button-row button {
-  border: none;
-  border-radius: 0;
-  background-color: var(--character-background-color);
-  color: white;
-  font-size: 18px;
   text-transform: uppercase;
-  width: 150px;
 }
-.attack-dialog .button-row button:active, .attack-dialog .button-row button:focus, .attack-dialog .button-row button:hover {
-  box-shadow: 0 0 5px var(--highlight-background-color);
-  text-shadow: 0 0 10px var(--highlight-background-color);
-}
-.deathinspace.app.window-app.dialog {
-  background: url(../assets/images/ui/seamless_paper_texture.png) repeat;
-}
-
-.custom-dialog {
-  color: var(--foreground-color);
-  font-family: var(--text-font);
-  margin: 0;
-  padding: 10px;
+.roll-card .roll-title {
+  text-align: center;
+  text-transform: uppercase;
 }
-.custom-dialog .form-group {
-  margin-top: 10px;
+.roll-card .roll-result {
+  border: 1px solid gray;
   margin-bottom: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+  text-align: center;
 }
-.custom-dialog .form-group ul {
-  list-style-type: none;
-  margin-left: 0;
-  padding-left: 0;
-}
-.custom-dialog .form-group ul li input[type=radio] {
-  float: left;
-  margin-top: 5px;
-}
-.custom-dialog .form-group ul li label div {
-  display: block;
-  margin-left: 30px;
-}
-.custom-dialog .form-group.disabled {
-  background-color: lightgray;
-}
-.custom-dialog .button-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-  margin-top: 10px;
+.roll-card .roll-result span {
+  font-size: 20px;
 }
-.custom-dialog .button-row button {
-  border: none;
-  border-radius: 0;
-  background-color: var(--character-background-color);
-  color: white;
-  font-size: 18px;
+.roll-card .outcome-text {
+  font-size: 22px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  text-align: center;
   text-transform: uppercase;
-  width: 150px;
-}
-.custom-dialog .button-row button:active, .custom-dialog .button-row button:focus, .custom-dialog .button-row button:hover {
-  box-shadow: 0 0 5px var(--highlight-background-color);
-  text-shadow: 0 0 10px var(--highlight-background-color);
 }
 .deathinspace.sheet.item {
   /* Notes tab */
@@ -1514,44 +1451,107 @@
 .deathinspace.sheet.item .data-wrapper .form-spacer {
   height: 20px;
 }
-
-.attack-outcome-card {
+.ability-check-dialog {
   border: 2px solid var(--character-background-color);
 }
-.attack-outcome-card .risky-outcome {
-  font-size: 12px;
-  text-transform: none;
+.add-item-dialog {
+  border: 2px solid var(--character-background-color);
 }
-.roll-card {
-  border: 2px solid var(--highlight-background-color);
+.deathinspace.app.window-app .window-content {
+  background: url(../assets/images/ui/seamless_paper_texture.png) repeat;
+}
+
+.attack-dialog {
+  border: 2px solid var(--character-background-color);
+  color: var(--foreground-color);
   font-family: var(--text-font);
-  padding: 5px;
+  margin: 0;
+  padding: 10px;
 }
-.roll-card .card-title {
-  font-weight: bold;
+.attack-dialog .form-group {
+  margin-top: 10px;
   margin-bottom: 10px;
-  text-transform: uppercase;
 }
-.roll-card .roll-title {
-  text-align: center;
+.attack-dialog .form-group ul {
+  list-style-type: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+.attack-dialog .form-group ul li input[type=radio] {
+  float: left;
+  margin-top: 5px;
+}
+.attack-dialog .form-group ul li label div {
+  display: block;
+  margin-left: 30px;
+}
+.attack-dialog .button-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  margin-top: 10px;
+}
+.attack-dialog .button-row button {
+  border: none;
+  border-radius: 0;
+  background-color: var(--character-background-color);
+  color: white;
+  font-size: 18px;
   text-transform: uppercase;
+  width: 150px;
 }
-.roll-card .roll-result {
-  border: 1px solid gray;
-  margin-bottom: 10px;
-  margin-left: 10px;
-  margin-right: 10px;
-  text-align: center;
+.attack-dialog .button-row button:active, .attack-dialog .button-row button:focus, .attack-dialog .button-row button:hover {
+  box-shadow: 0 0 5px var(--highlight-background-color);
+  text-shadow: 0 0 10px var(--highlight-background-color);
 }
-.roll-card .roll-result span {
-  font-size: 20px;
+.deathinspace.app.window-app.dialog {
+  background: url(../assets/images/ui/seamless_paper_texture.png) repeat;
 }
-.roll-card .outcome-text {
-  font-size: 22px;
-  font-weight: bold;
+
+.custom-dialog {
+  color: var(--foreground-color);
+  font-family: var(--text-font);
+  margin: 0;
+  padding: 10px;
+}
+.custom-dialog .form-group {
+  margin-top: 10px;
   margin-bottom: 10px;
-  text-align: center;
+}
+.custom-dialog .form-group ul {
+  list-style-type: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+.custom-dialog .form-group ul li input[type=radio] {
+  float: left;
+  margin-top: 5px;
+}
+.custom-dialog .form-group ul li label div {
+  display: block;
+  margin-left: 30px;
+}
+.custom-dialog .form-group.disabled {
+  background-color: lightgray;
+}
+.custom-dialog .button-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  margin-top: 10px;
+}
+.custom-dialog .button-row button {
+  border: none;
+  border-radius: 0;
+  background-color: var(--character-background-color);
+  color: white;
+  font-size: 18px;
   text-transform: uppercase;
+  width: 150px;
+}
+.custom-dialog .button-row button:active, .custom-dialog .button-row button:focus, .custom-dialog .button-row button:hover {
+  box-shadow: 0 0 5px var(--highlight-background-color);
+  text-shadow: 0 0 10px var(--highlight-background-color);
 }
 .deathinspace.sheet.actor .belongings-tab .item-controls {
   border-left: 1px dotted black;

diff --git a/source/templates/actor/includes/belongings.pug b/source/templates/actor/includes/belongings.pug
@@ -4,7 +4,7 @@
       i.fas.fa-plus
       | {{localize "DIS.Add"}}
 
-  .equipment 
+  .equipment.item-list 
     .equipment-header
       .equipment-name
         | {{localize "DIS.Equipment"}}
@@ -52,7 +52,7 @@
         a.item-control.item-delete
           i.fas.fa-trash  
     | {{/each}}
-  .weapons 
+  .weapons.item-list 
     | {{#each data.data.weapons as |item id|}}
     .weapon-header 
       .weapon-name 
@@ -100,7 +100,7 @@
         a.item-control.item-delete
           i.fas.fa-trash                          
     | {{/each}}
-  .armor 
+  .armor.item-list 
     | {{#each data.data.armor as |item id|}}
     .armor-header 
         .armor-name 

diff --git a/templates/actor/character-sheet.html b/templates/actor/character-sheet.html
@@ -218,7 +218,7 @@
     <div class="tab belongings-tab" data-group="primary" data-tab="belongings">
       <div class="belongings-wrapper"> 
         <div class="add-row"><a class="add-belonging" title="Add Belonging"><i class="fas fa-plus"></i>{{localize "DIS.Add"}}</a></div>
-        <div class="equipment"> 
+        <div class="equipment item-list"> 
           <div class="equipment-header">
             <div class="equipment-name">{{localize "DIS.Equipment"}}</div>
             <div class="equipment-condition">
@@ -253,7 +253,7 @@
             <div class="item-controls"><a class="item-control item-edit"><i class="fas fa-edit">                         </i></a><a class="item-control item-delete"><i class="fas fa-trash"> </i></a></div>
           </div>{{/each}}
         </div>
-        <div class="weapons">
+        <div class="weapons item-list">
            {{#each data.data.weapons as |item id|}}
           <div class="weapon-header"> 
             <div class="weapon-name">
@@ -295,7 +295,7 @@
             <div class="item-controls"><a class="item-control item-edit"><i class="fas fa-edit">                         </i></a><a class="item-control item-delete"><i class="fas fa-trash">                         </i></a></div>
           </div>{{/each}}
         </div>
-        <div class="armor">
+        <div class="armor item-list">
            {{#each data.data.armor as |item id|}}
           <div class="armor-header"> 
             <div class="armor-name">

diff --git a/templates/actor/npc-sheet.html b/templates/actor/npc-sheet.html
@@ -114,7 +114,7 @@
     <div class="tab belongings-tab" data-group="primary" data-tab="belongings">
       <div class="belongings-wrapper"> 
         <div class="add-row"><a class="add-belonging" title="Add Belonging"><i class="fas fa-plus"></i>{{localize "DIS.Add"}}</a></div>
-        <div class="equipment"> 
+        <div class="equipment item-list"> 
           <div class="equipment-header">
             <div class="equipment-name">{{localize "DIS.Equipment"}}</div>
             <div class="equipment-condition">
@@ -149,7 +149,7 @@
             <div class="item-controls"><a class="item-control item-edit"><i class="fas fa-edit">                         </i></a><a class="item-control item-delete"><i class="fas fa-trash"> </i></a></div>
           </div>{{/each}}
         </div>
-        <div class="weapons">
+        <div class="weapons item-list">
            {{#each data.data.weapons as |item id|}}
           <div class="weapon-header"> 
             <div class="weapon-name">
@@ -191,7 +191,7 @@
             <div class="item-controls"><a class="item-control item-edit"><i class="fas fa-edit">                         </i></a><a class="item-control item-delete"><i class="fas fa-trash">                         </i></a></div>
           </div>{{/each}}
         </div>
-        <div class="armor">
+        <div class="armor item-list">
            {{#each data.data.armor as |item id|}}
           <div class="armor-header"> 
             <div class="armor-name">