craftingguide/website
1
0
Fork 0
Code Pull Requests Actions Activity

Add "remove" button to inventory view

Browse Source
This commit is contained in:
Andrew Miner
2015-01-31 20:53:09 -08:00
parent e0c642e787
commit 8d7fd5d25c
9 changed files with 637 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/templates/inventory.scss
-4
View File
@@ -95,9 +95,5 @@ All rights reserved.
td.action {
width: 4em;
button {
width: 4em;
}
}
}
src/css/templates/stack.scss
+22
View File
@@ -24,4 +24,26 @@ All rights reserved.
display: inline;
font-size: $font-size-normal;
}
.action {
text-align: right;
button.remove {
opacity: 0;
position: relative; width: 1.8em; height: 1.8em;
background: url('/images/remove.png') no-repeat center;
border: 0;
outline: none;
&:hover {
background: url('/images/remove-hover.png') no-repeat center;
}
}
}
&:hover {
button.remove {
opacity: 1;
}
}
}
src/design/remove.graffle
+589
View File
@@ -0,0 +1,589 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>ApplicationVersion</key>
<array>
<string>com.omnigroup.OmniGraffle.MacAppStore</string>
<string>139.18</string>
</array>
<key>CreationDate</key>
<string>2015-02-01 04:20:02 +0000</string>
<key>Creator</key>
<string>Andrew Miner</string>
<key>GraphDocumentVersion</key>
<integer>8</integer>
<key>GuidesLocked</key>
<string>NO</string>
<key>GuidesVisible</key>
<string>YES</string>
<key>ImageCounter</key>
<integer>1</integer>
<key>LinksVisible</key>
<string>NO</string>
<key>MagnetsVisible</key>
<string>NO</string>
<key>MasterSheets</key>
<array/>
<key>ModificationDate</key>
<string>2015-02-01 04:35:56 +0000</string>
<key>Modifier</key>
<string>Andrew Miner</string>
<key>NotesVisible</key>
<string>NO</string>
<key>OriginVisible</key>
<string>NO</string>
<key>PageBreaks</key>
<string>NO</string>
<key>PrintInfo</key>
<dict>
<key>NSBottomMargin</key>
<array>
<string>float</string>
<string>41</string>
</array>
<key>NSHorizonalPagination</key>
<array>
<string>coded</string>
<string>BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG</string>
</array>
<key>NSLeftMargin</key>
<array>
<string>float</string>
<string>18</string>
</array>
<key>NSPaperSize</key>
<array>
<string>size</string>
<string>{611.99998474121094, 792}</string>
</array>
<key>NSPrintReverseOrientation</key>
<array>
<string>int</string>
<string>0</string>
</array>
<key>NSRightMargin</key>
<array>
<string>float</string>
<string>18</string>
</array>
<key>NSTopMargin</key>
<array>
<string>float</string>
<string>18</string>
</array>
</dict>
<key>ReadOnly</key>
<string>NO</string>
<key>Sheets</key>
<array>
<dict>
<key>ActiveLayerIndex</key>
<integer>0</integer>
<key>AutoAdjust</key>
<false/>
<key>BackgroundGraphic</key>
<dict>
<key>Bounds</key>
<string>{{0, 0}, {100, 100}}</string>
<key>Class</key>
<string>SolidGraphic</string>
<key>ID</key>
<integer>2</integer>
<key>Style</key>
<dict>
<key>shadow</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>stroke</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
</dict>
</dict>
<key>BaseZoom</key>
<integer>0</integer>
<key>CanvasOrigin</key>
<string>{0, 0}</string>
<key>CanvasSize</key>
<string>{100, 100}</string>
<key>ColumnAlign</key>
<integer>1</integer>
<key>ColumnSpacing</key>
<real>36</real>
<key>DisplayScale</key>
<string>1 pt = 1 px</string>
<key>GraphicsList</key>
<array>
<dict>
<key>Bounds</key>
<string>{{20.000000769986293, 41.000000769986251}, {60, 18}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>ID</key>
<integer>7</integer>
<key>Magnets</key>
<array>
<string>{-0.59628479784302701, -1.1925696134567261}</string>
<string>{1.9868215517249155e-08, -1.3333333730697632}</string>
<string>{0.59628487781105122, -1.1925696134567261}</string>
<string>{1.1925696134567261, -0.59628480672836304}</string>
<string>{1.3333333730697632, 1.5894572413799324e-07}</string>
<string>{1.1925696134567261, 0.59628473564567486}</string>
<string>{0.59628465308492196, 1.1925697326660156}</string>
<string>{0, 1.3333333730697632}</string>
<string>{-0.5962849488937394, 1.1925696134567261}</string>
<string>{-1.1925697326660156, 0.5962844398368361}</string>
<string>{-1.3333333730697632, -6.3578289655197295e-07}</string>
<string>{-1.1925696134567261, -0.59628480672836304}</string>
</array>
<key>Rotation</key>
<real>45</real>
<key>Shape</key>
<string>Rectangle</string>
<key>Style</key>
<dict>
<key>shadow</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>stroke</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
</dict>
</dict>
<dict>
<key>Bounds</key>
<string>{{20, 41}, {60, 18}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>ID</key>
<integer>6</integer>
<key>Magnets</key>
<array>
<string>{-0.59628479784302701, -1.1925696134567261}</string>
<string>{1.9868215517249155e-08, -1.3333333730697632}</string>
<string>{0.59628487781105122, -1.1925696134567261}</string>
<string>{1.1925696134567261, -0.59628480672836304}</string>
<string>{1.3333333730697632, 1.5894572413799324e-07}</string>
<string>{1.1925696134567261, 0.59628473564567486}</string>
<string>{0.59628465308492196, 1.1925697326660156}</string>
<string>{0, 1.3333333730697632}</string>
<string>{-0.5962849488937394, 1.1925696134567261}</string>
<string>{-1.1925697326660156, 0.5962844398368361}</string>
<string>{-1.3333333730697632, -6.3578289655197295e-07}</string>
<string>{-1.1925696134567261, -0.59628480672836304}</string>
</array>
<key>Rotation</key>
<real>315</real>
<key>Shape</key>
<string>Rectangle</string>
<key>Style</key>
<dict>
<key>shadow</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>stroke</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
</dict>
</dict>
<dict>
<key>Bounds</key>
<string>{{5, 5}, {90, 90}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>ID</key>
<integer>3</integer>
<key>Magnets</key>
<array>
<string>{-0.59628479784302701, -1.1925696134567261}</string>
<string>{1.9868215517249155e-08, -1.3333333730697632}</string>
<string>{0.59628487781105122, -1.1925696134567261}</string>
<string>{1.1925696134567261, -0.59628480672836304}</string>
<string>{1.3333333730697632, 1.5894572413799324e-07}</string>
<string>{1.1925696134567261, 0.59628473564567486}</string>
<string>{0.59628465308492196, 1.1925697326660156}</string>
<string>{0, 1.3333333730697632}</string>
<string>{-0.5962849488937394, 1.1925696134567261}</string>
<string>{-1.1925697326660156, 0.5962844398368361}</string>
<string>{-1.3333333730697632, -6.3578289655197295e-07}</string>
<string>{-1.1925696134567261, -0.59628480672836304}</string>
</array>
<key>Shape</key>
<string>Circle</string>
<key>Style</key>
<dict>
<key>fill</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0.152527</string>
<key>g</key>
<string>0.118533</string>
<key>r</key>
<string>0.744739</string>
</dict>
</dict>
<key>shadow</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>stroke</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
</dict>
</dict>
</array>
<key>GridInfo</key>
<dict>
<key>GridSpacing</key>
<real>2</real>
<key>MajorGridSpacing</key>
<integer>5</integer>
<key>ShowsGrid</key>
<string>YES</string>
</dict>
<key>HPages</key>
<integer>1</integer>
<key>KeepToScale</key>
<false/>
<key>Layers</key>
<array>
<dict>
<key>Lock</key>
<string>NO</string>
<key>Name</key>
<string>Layer 1</string>
<key>Print</key>
<string>YES</string>
<key>View</key>
<string>YES</string>
</dict>
</array>
<key>LayoutInfo</key>
<dict>
<key>Animate</key>
<string>NO</string>
<key>circoMinDist</key>
<real>18</real>
<key>circoSeparation</key>
<real>0.0</real>
<key>layoutEngine</key>
<string>dot</string>
<key>neatoSeparation</key>
<real>0.0</real>
<key>twopiSeparation</key>
<real>0.0</real>
</dict>
<key>Orientation</key>
<integer>2</integer>
<key>PrintOnePage</key>
<false/>
<key>RowAlign</key>
<integer>1</integer>
<key>RowSpacing</key>
<real>36</real>
<key>SheetTitle</key>
<string>Canvas 1</string>
<key>UniqueID</key>
<integer>1</integer>
<key>VPages</key>
<integer>1</integer>
</dict>
<dict>
<key>ActiveLayerIndex</key>
<integer>0</integer>
<key>AutoAdjust</key>
<false/>
<key>BackgroundGraphic</key>
<dict>
<key>Bounds</key>
<string>{{0, 0}, {100, 100}}</string>
<key>Class</key>
<string>SolidGraphic</string>
<key>ID</key>
<integer>2</integer>
<key>Style</key>
<dict>
<key>shadow</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>stroke</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
</dict>
</dict>
<key>BaseZoom</key>
<integer>0</integer>
<key>CanvasOrigin</key>
<string>{0, 0}</string>
<key>CanvasSize</key>
<string>{100, 100}</string>
<key>ColumnAlign</key>
<integer>1</integer>
<key>ColumnSpacing</key>
<real>36</real>
<key>DisplayScale</key>
<string>1 pt = 1 px</string>
<key>GraphicsList</key>
<array>
<dict>
<key>Bounds</key>
<string>{{20.000000769986293, 41.000000769986251}, {60, 18}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>ID</key>
<integer>7</integer>
<key>Magnets</key>
<array>
<string>{-0.59628479784302701, -1.1925696134567261}</string>
<string>{1.9868215517249155e-08, -1.3333333730697632}</string>
<string>{0.59628487781105122, -1.1925696134567261}</string>
<string>{1.1925696134567261, -0.59628480672836304}</string>
<string>{1.3333333730697632, 1.5894572413799324e-07}</string>
<string>{1.1925696134567261, 0.59628473564567486}</string>
<string>{0.59628465308492196, 1.1925697326660156}</string>
<string>{0, 1.3333333730697632}</string>
<string>{-0.5962849488937394, 1.1925696134567261}</string>
<string>{-1.1925697326660156, 0.5962844398368361}</string>
<string>{-1.3333333730697632, -6.3578289655197295e-07}</string>
<string>{-1.1925696134567261, -0.59628480672836304}</string>
</array>
<key>Rotation</key>
<real>45</real>
<key>Shape</key>
<string>Rectangle</string>
<key>Style</key>
<dict>
<key>shadow</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>stroke</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
</dict>
</dict>
<dict>
<key>Bounds</key>
<string>{{20, 41}, {60, 18}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>ID</key>
<integer>6</integer>
<key>Magnets</key>
<array>
<string>{-0.59628479784302701, -1.1925696134567261}</string>
<string>{1.9868215517249155e-08, -1.3333333730697632}</string>
<string>{0.59628487781105122, -1.1925696134567261}</string>
<string>{1.1925696134567261, -0.59628480672836304}</string>
<string>{1.3333333730697632, 1.5894572413799324e-07}</string>
<string>{1.1925696134567261, 0.59628473564567486}</string>
<string>{0.59628465308492196, 1.1925697326660156}</string>
<string>{0, 1.3333333730697632}</string>
<string>{-0.5962849488937394, 1.1925696134567261}</string>
<string>{-1.1925697326660156, 0.5962844398368361}</string>
<string>{-1.3333333730697632, -6.3578289655197295e-07}</string>
<string>{-1.1925696134567261, -0.59628480672836304}</string>
</array>
<key>Rotation</key>
<real>315</real>
<key>Shape</key>
<string>Rectangle</string>
<key>Style</key>
<dict>
<key>shadow</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>stroke</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
</dict>
</dict>
<dict>
<key>Bounds</key>
<string>{{5, 5}, {90, 90}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>ID</key>
<integer>3</integer>
<key>Magnets</key>
<array>
<string>{-0.59628479784302701, -1.1925696134567261}</string>
<string>{1.9868215517249155e-08, -1.3333333730697632}</string>
<string>{0.59628487781105122, -1.1925696134567261}</string>
<string>{1.1925696134567261, -0.59628480672836304}</string>
<string>{1.3333333730697632, 1.5894572413799324e-07}</string>
<string>{1.1925696134567261, 0.59628473564567486}</string>
<string>{0.59628465308492196, 1.1925697326660156}</string>
<string>{0, 1.3333333730697632}</string>
<string>{-0.5962849488937394, 1.1925696134567261}</string>
<string>{-1.1925697326660156, 0.5962844398368361}</string>
<string>{-1.3333333730697632, -6.3578289655197295e-07}</string>
<string>{-1.1925696134567261, -0.59628480672836304}</string>
</array>
<key>Shape</key>
<string>Circle</string>
<key>Style</key>
<dict>
<key>fill</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0.356563</string>
<key>g</key>
<string>0.300364</string>
<key>r</key>
<string>0.987799</string>
</dict>
</dict>
<key>shadow</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>stroke</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0.152527</string>
<key>g</key>
<string>0.118533</string>
<key>r</key>
<string>0.744739</string>
</dict>
</dict>
</dict>
</dict>
</array>
<key>GridInfo</key>
<dict>
<key>GridSpacing</key>
<real>2</real>
<key>MajorGridSpacing</key>
<integer>5</integer>
<key>ShowsGrid</key>
<string>YES</string>
</dict>
<key>HPages</key>
<integer>1</integer>
<key>KeepToScale</key>
<false/>
<key>Layers</key>
<array>
<dict>
<key>Lock</key>
<string>NO</string>
<key>Name</key>
<string>Layer 1</string>
<key>Print</key>
<string>YES</string>
<key>View</key>
<string>YES</string>
</dict>
</array>
<key>LayoutInfo</key>
<dict>
<key>Animate</key>
<string>NO</string>
<key>circoMinDist</key>
<real>18</real>
<key>circoSeparation</key>
<real>0.0</real>
<key>layoutEngine</key>
<string>dot</string>
<key>neatoSeparation</key>
<real>0.0</real>
<key>twopiSeparation</key>
<real>0.0</real>
</dict>
<key>Orientation</key>
<integer>2</integer>
<key>PrintOnePage</key>
<false/>
<key>RowAlign</key>
<integer>1</integer>
<key>RowSpacing</key>
<real>36</real>
<key>SheetTitle</key>
<string>Canvas 2</string>
<key>UniqueID</key>
<integer>2</integer>
<key>VPages</key>
<integer>1</integer>
</dict>
</array>
<key>SmartAlignmentGuidesActive</key>
<string>YES</string>
<key>SmartDistanceGuidesActive</key>
<string>YES</string>
<key>UseEntirePage</key>
<false/>
<key>WindowInfo</key>
<dict>
<key>CurrentSheet</key>
<integer>1</integer>
<key>ExpandedCanvases</key>
<array/>
<key>Frame</key>
<string>{{427, 0}, {2133, 1417}}</string>
<key>ListView</key>
<true/>
<key>OutlineWidth</key>
<integer>142</integer>
<key>RightSidebar</key>
<false/>
<key>ShowRuler</key>
<true/>
<key>Sidebar</key>
<true/>
<key>SidebarWidth</key>
<integer>120</integer>
<key>VisibleRegion</key>
<string>{{-74, -29}, {249.75, 159.375}}</string>
<key>Zoom</key>
<real>8</real>
<key>ZoomValues</key>
<array>
<array>
<string>Canvas 1</string>
<real>8</real>
<real>1.9099999666213989</real>
</array>
<array>
<string>Canvas 2</string>
<real>8</real>
<real>1</real>
</array>
</array>
</dict>
</dict>
</plist>
src/images/remove-hover.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 921 B

src/images/remove.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 853 B

src/scripts/controllers/inventory_controller.coffee
+2 -1
View File
@@ -120,7 +120,6 @@ module.exports = class InventoryController extends BaseController
super
refresh: ->
display = if @editable then 'block' else 'none'
@$editPanel.css display:(if @editable then 'table-row' else 'none')
@$toolbar.css display:(if @editable then 'block' else 'none')
@$scrollbox.css bottom:(if @editable then @$toolbar.height() else '0')
@@ -135,6 +134,7 @@ module.exports = class InventoryController extends BaseController
@_stackControllers = []
@model.each (stack)=>
options =
editable: @editable
imageLoader: @imageLoader
model: stack
modPack: @modPack
@@ -167,6 +167,7 @@ module.exports = class InventoryController extends BaseController
# Private Methods ##############################################################################
_removeStack: (stack)->
@model.remove stack.slug, stack.quantity
_updateNameAutocomplete: ->
onChanged = => @onNameFieldChanged()
src/scripts/controllers/stack_controller.coffee
+22 -3
View File
@@ -15,25 +15,44 @@ module.exports = class StackController extends BaseController
constructor: (options={})->
if not options.model? then throw new Error 'options.model is required'
if not options.modPack? then throw new Error 'options.modPack is required'
options.imageLoader ?= new ImageLoader defaultUrl:'/images/unknown.png'
options.templateName = 'stack'
options.imageLoader ?= new ImageLoader defaultUrl:'/images/unknown.png'
options.editable ?= false
options.onRemove ?= (stack)-> # do nothing
options.templateName = 'stack'
super options
@editable = options.editable
@modPack = options.modPack
@onRemove = options.onRemove
@_imageLoader = options.imageLoader
# Event Methods ################################################################################
onRemoveClicked: ->
@onRemove @model
# BaseController Overrides #####################################################################
onDidRender: ->
@$image = @$('.icon img')
@$nameField = @$('.name p')
@$quantityField = @$('.quantity p')
@$removeButton = @$('button.remove')
super
refresh: ->
display = @modPack.findItemDisplay @model.slug
@_imageLoader.load display.iconUrl, @$image
@$nameField.html display.itemName
@$quantityField.html @model.quantity
@_imageLoader.load display.iconUrl, @$image
@$removeButton.css display:(if @editable then 'inherit' else 'none')
super
# Backbone.View Overrides ######################################################################
events: ->
return _.extend super,
'click button.remove': 'onRemoveClicked'
src/scripts/models/item_page.coffee
-1
View File
@@ -31,7 +31,6 @@ module.exports = class ItemPage extends BaseModel
# Private Methods ##############################################################################
_consumeParams: ->
logger.debug "consuming params: #{util.inspect(@params)}"
return unless @params?
@plan.want.clear()
src/templates/stack.jade
+2 -1
View File
@@ -9,4 +9,5 @@ tr.view__stack
td.quantity: p
td.icon: img(src='')
td.name: p
td.action &nbsp;
td.action
button.remove &nbsp;