octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-12-23 03:18:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

gui: Accordion titles as buttons

Browse Source 
GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3284
LGTM: calmh, AudriusButkevicius
This commit is contained in:
Daniel Harte 2016-06-08 15:55:44 +00:00 committed by Audrius Butkevicius
parent d2bb6e0c0a
commit 09b7348595
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
gui/default/assets/css/overrides.css
View File

@ -183,10 +183,14 @@ table.table-condensed td.no-overflow-ellipse {
margin-bottom: 0.25em; margin-bottom: 0.25em;
} }
.panel-heading { button.panel-heading {
display: block; display: block;
cursor: pointer;
position: relative; position: relative;
width: 100%;
text-align: left;
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
} }
.panel-heading .panel-title-text { .panel-heading .panel-title-text {

14
gui/default/index.html
View File

@ -258,7 +258,7 @@
<h3 translate>Folders</h3> <h3 translate>Folders</h3>
<div class="panel-group" id="folders"> <div class="panel-group" id="folders">
<div class="panel panel-default" ng-repeat="folder in folderList()"> <div class="panel panel-default" ng-repeat="folder in folderList()">
<a class="panel-heading" data-toggle="collapse" data-parent="#folders" href="#folder-{{$index}}"> <button class="btn panel-heading" data-toggle="collapse" data-parent="#folders" data-target="#folder-{{$index}}">
<div class="panel-progress" ng-show="folderStatus(folder) == 'syncing'" ng-attr-style="width: {{syncPercentage(folder.id)}}%"></div> <div class="panel-progress" ng-show="folderStatus(folder) == 'syncing'" ng-attr-style="width: {{syncPercentage(folder.id)}}%"></div>
<div class="panel-progress" ng-show="folderStatus(folder) == 'scanning' && scanProgress[folder.id] != undefined" ng-attr-style="width: {{scanPercentage(folder.id)}}%"></div> <div class="panel-progress" ng-show="folderStatus(folder) == 'scanning' && scanProgress[folder.id] != undefined" ng-attr-style="width: {{scanPercentage(folder.id)}}%"></div>
<h4 class="panel-title"> <h4 class="panel-title">
@ -287,7 +287,7 @@
<span tooltip data-original-title="{{folder.label.length != 0 ? folder.id : ''}}">{{folder.label.length != 0 ? folder.label : folder.id}}</span> <span tooltip data-original-title="{{folder.label.length != 0 ? folder.id : ''}}">{{folder.label.length != 0 ? folder.label : folder.id}}</span>
</div> </div>
</h4> </h4>
</a> </button>
<div id="folder-{{$index}}" class="panel-collapse collapse"> <div id="folder-{{$index}}" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
@ -440,12 +440,12 @@
<div class="col-md-6"> <div class="col-md-6">
<h3 translate>This Device</h3> <h3 translate>This Device</h3>
<div class="panel panel-default" ng-repeat="deviceCfg in [thisDevice()]"> <div class="panel panel-default" ng-repeat="deviceCfg in [thisDevice()]">
<a class="panel-heading" data-toggle="collapse" href="#device-this"> <button class="btn panel-heading" data-toggle="collapse" data-target="#device-this">
<h4 class="panel-title"> <h4 class="panel-title">
<identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon> <identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>
<div class="panel-title-text">{{deviceName(deviceCfg)}}</div> <div class="panel-title-text">{{deviceName(deviceCfg)}}</div>
</h4> </h4>
</a> </button>
<div id="device-this" class="panel-collapse collapse in"> <div id="device-this" class="panel-collapse collapse in">
<div class="panel-body"> <div class="panel-body">
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
@ -516,11 +516,10 @@
<h3 translate>Remote Devices</h3> <h3 translate>Remote Devices</h3>
<div class="panel-group" id="devices"> <div class="panel-group" id="devices">
<div class="panel panel-default" ng-repeat="deviceCfg in otherDevices()"> <div class="panel panel-default" ng-repeat="deviceCfg in otherDevices()">
<a class="panel-heading" data-toggle="collapse" data-parent="#devices" href="#device-{{$index}}"> <button class="btn panel-heading" data-toggle="collapse" data-parent="#devices" data-target="#device-{{$index}}">
<div class="panel-progress" ng-show="deviceStatus(deviceCfg) == 'syncing'" ng-attr-style="width: {{completion[deviceCfg.deviceID]._total | number:0}}%"></div> <div class="panel-progress" ng-show="deviceStatus(deviceCfg) == 'syncing'" ng-attr-style="width: {{completion[deviceCfg.deviceID]._total | number:0}}%"></div>
<h4 class="panel-title"> <h4 class="panel-title">
<identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon> <identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>
<span>{{deviceName(deviceCfg)}}</span>
<span ng-switch="deviceStatus(deviceCfg)" class="pull-right text-{{deviceClass(deviceCfg)}}"> <span ng-switch="deviceStatus(deviceCfg)" class="pull-right text-{{deviceClass(deviceCfg)}}">
<span ng-switch-when="insync"><span class="hidden-xs" translate>Up to Date</span><span class="visible-xs">&#9724;</span></span> <span ng-switch-when="insync"><span class="hidden-xs" translate>Up to Date</span><span class="visible-xs">&#9724;</span></span>
<span ng-switch-when="syncing"> <span ng-switch-when="syncing">
@ -530,8 +529,9 @@
<span ng-switch-when="disconnected"><span class="hidden-xs" translate>Disconnected</span><span class="visible-xs">&#9724;</span></span> <span ng-switch-when="disconnected"><span class="hidden-xs" translate>Disconnected</span><span class="visible-xs">&#9724;</span></span>
<span ng-switch-when="unused"><span class="hidden-xs" translate>Unused</span><span class="visible-xs">&#9724;</span></span> <span ng-switch-when="unused"><span class="hidden-xs" translate>Unused</span><span class="visible-xs">&#9724;</span></span>
</span> </span>
<span>{{deviceName(deviceCfg)}}</span>
</h4> </h4>
</a> </button>
<div id="device-{{$index}}" class="panel-collapse collapse"> <div id="device-{{$index}}" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">