Skip to content

Commit

Permalink
Added scrollbar to StyleList (closes #47)
Browse files Browse the repository at this point in the history
  • Loading branch information
Rinze authored and Rinze committed Oct 19, 2015
1 parent 877611c commit 78ecfaf
Showing 1 changed file with 67 additions and 65 deletions.
132 changes: 67 additions & 65 deletions csComp/directives/StyleList/StyleList.tpl.html
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,86 @@
<div>
<h4 class="leftpanel-header" translate="STYLES"></h4>
<div ng-show="vm.$layerService.noStyles" translate="STYLE_INFO"></div>
<div data-ng-repeat="group in vm.$layerService.project.groups" style="margin-left: 5px;clear:left;float:left">
<div ng-show="group.styles.length">
<div style="float:left;margin-left: -10px; margin-top: 5px" data-toggle="collapse" data-target="#stylegroup_{{group.id}}"><i class="fa fa-chevron-down togglebutton toggle-arrow-down"></i><i class="fa fa-chevron-up togglebutton toggle-arrow-up"></i></div>
<div class="group-title">{{group.title}}</div>
<div class="scrolling" style="overflow-y: auto; overflow-x: hidden" resize resize-y="95">
<div data-ng-repeat="group in vm.$layerService.project.groups" style="margin-left: 5px;clear:left;float:left">
<div ng-show="group.styles.length">
<div style="float:left;margin-left: -10px; margin-top: 5px" data-toggle="collapse" data-target="#stylegroup_{{group.id}}"><i class="fa fa-chevron-down togglebutton toggle-arrow-down"></i><i class="fa fa-chevron-up togglebutton toggle-arrow-up"></i></div>
<div class="group-title">{{group.title}}</div>

<div id="stylegroup_{{group.id}}" class="collapse in">
<div data-ng-repeat="style in group.styles">
<div class="checkbox checkbox-primary" style="margin-left:20px;float:left">
<input type="checkbox" id="cbstyle{{style.id}}" ng-model="style.enabled" data-ng-change="vm.$layerService.updateStyle(style);">
<label class="style-title" for="cbstyle{{style.id}}" style="width:175px">{{style.title}}</label>
</div>
<div id="stylegroup_{{group.id}}" class="collapse in">
<div data-ng-repeat="style in group.styles">
<div class="checkbox checkbox-primary" style="margin-left:20px;float:left">
<input type="checkbox" id="cbstyle{{style.id}}" ng-model="style.enabled" data-ng-change="vm.$layerService.updateStyle(style);">
<label class="style-title" for="cbstyle{{style.id}}" style="width:175px">{{style.title}}</label>
</div>

<div style="float:right;margin-top:10px; width: 50px">
<div data-ng-show="style.canSelectColor" style="float:left">
<div class="dropdown">
<div class="style-settings" data-toggle="dropdown">
<style>
</style>
<!--<img src="includes/images/fillcolor.png" style="width: 32px; height:32px" />-->
<div id="colors" style="border-radius: 50%;width: 20px;height:20px;border-style:solid;border-color: black;border-width: 1px;" ng-style="{'background-image': 'linear-gradient(to right,'+style.colors[0]+','+style.colors[1]+')'}">
<div style="float:right;margin-top:10px; width: 50px">
<div data-ng-show="style.canSelectColor" style="float:left">
<div class="dropdown">
<div class="style-settings" data-toggle="dropdown">
<style>
</style>
<!--<img src="includes/images/fillcolor.png" style="width: 32px; height:32px" />-->
<div id="colors" style="border-radius: 50%;width: 20px;height:20px;border-style:solid;border-color: black;border-width: 1px;" ng-style="{'background-image': 'linear-gradient(to right,'+style.colors[0]+','+style.colors[1]+')'}">
</div>
<b class="caret"></b>
</div>
<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="(key,val) in style.colorScales" style="margin:3px;cursor: pointer">
<span ng-click="vm.$layerService.updatePropertyStyle(key,val,$parent);
$parent.style.colors = val;
vm.$layerService.updateStyle($parent.style)">{{key}}</span>
</li>
</ul>
</div>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="(key,val) in style.colorScales" style="margin:3px;cursor: pointer">
<span ng-click="vm.$layerService.updatePropertyStyle(key,val,$parent);
$parent.style.colors = val;
vm.$layerService.updateStyle($parent.style)">{{key}}</span>
</li>
</ul>
</div>
</div>

<div style="float:right">
<div class="dropdown">
<div class="style-settings" data-toggle="dropdown">
<div class="style-aspect style-{{style.visualAspect}}"></div><b class="caret"></b>
<div style="float:right">
<div class="dropdown">
<div class="style-settings" data-toggle="dropdown">
<div class="style-aspect style-{{style.visualAspect}}"></div><b class="caret"></b>
</div>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="title in style.availableAspects" style="margin:3px;cursor: pointer">
<i class="style-aspect style-{{title}}" style="float:left" />
<span ng-click="$parent.style.visualAspect = title;vm.$layerService.updateStyle($parent.style)">
<img class="fa fa-search" style="margin-right: 8px" /> {{title}} </span>
</li>
<li class="divider"></li>
<li style="margin:3px;cursor: pointer"><i class="fa fa-remove" style="margin-right: 8px; float:left" />
<span ng-click="vm.$layerService.removeStyle(style)">Verwijder</span>
</li>
</ul>
</div>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="title in style.availableAspects" style="margin:3px;cursor: pointer">
<i class="style-aspect style-{{title}}" style="float:left" />
<span ng-click="$parent.style.visualAspect = title;vm.$layerService.updateStyle($parent.style)">
<img class="fa fa-search" style="margin-right: 8px" /> {{title}} </span>
</div>
</div>
<div data-ng-if="style.activeLegend && style.enabled" style="float:left;clear:left">
<div data-ng-if="style.activeLegend.legendKind === 'discrete' || style.activeLegend.legendKind === 'discreteStrings' ">
<div class="legend-description">{{style.activeLegend.description}}</div>
<ul class="legend-entry-list" style="position:relative">
<li data-ng-repeat="le in style.activeLegend.legendEntries | reverse" class="legend-entry-item-d">
<div class="legend-color-square" style="float: left; background: {{le.color}}"></div>
<div class="legend-label-d" style="float: left">{{le.label}}</div>
<div>&nbsp;</div>
<!-- die &nbsp; is echt nodig... -->
</li>
<li class="divider"></li>
<li style="margin:3px;cursor: pointer"><i class="fa fa-remove" style="margin-right: 8px; float:left" />
<span ng-click="vm.$layerService.removeStyle(style)">Verwijder</span>
</ul>
</div>
<div data-ng-if="style.activeLegend.legendKind === 'interpolated'">
<div class="legend-description">{{style.activeLegend.description}}</div>
<ul class="legend-entry-list" style="position:relative">
<li data-ng-repeat="(key, le) in style.activeLegend.legendEntries | reverse" class="legend-entry-item-i">
<div ng-if="key < style.activeLegend.legendEntries.length-1"
class="legend-color-gradient-rect"
ng-style="vm.getStyle(style.activeLegend, le, key)"></div>
<div class="legend-label-i">{{le.label}}</div>
<!-- die &nbsp; is echt nodig... -->
<div>&nbsp;</div>
</li>
</ul>
</div>
</div>
</div>
<div data-ng-if="style.activeLegend && style.enabled" style="float:left;clear:left">
<div data-ng-if="style.activeLegend.legendKind === 'discrete' || style.activeLegend.legendKind === 'discreteStrings' ">
<div class="legend-description">{{style.activeLegend.description}}</div>
<ul class="legend-entry-list">
<li data-ng-repeat="le in style.activeLegend.legendEntries | reverse" class="legend-entry-item-d">
<div class="legend-color-square" style="float: left; background: {{le.color}}"></div>
<div class="legend-label-d" style="float: left">{{le.label}}</div>
<div>&nbsp;</div>
<!-- die &nbsp; is echt nodig... -->
</li>
</ul>
</div>
<div data-ng-if="style.activeLegend.legendKind === 'interpolated'">
<div class="legend-description">{{style.activeLegend.description}}</div>
<ul class="legend-entry-list">
<li data-ng-repeat="(key, le) in style.activeLegend.legendEntries | reverse" class="legend-entry-item-i">
<div ng-if="key < style.activeLegend.legendEntries.length-1"
class="legend-color-gradient-rect"
ng-style="vm.getStyle(style.activeLegend, le, key)"></div>
<div class="legend-label-i">{{le.label}}</div>
<!-- die &nbsp; is echt nodig... -->
<div>&nbsp;</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 78ecfaf

Please sign in to comment.