Martchus
/
syncthing
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

gui: Improve layout of accordion titles 

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3172
This commit is contained in:
Daniel Harte 2016-05-30 08:18:09 +00:00 committed by Jakob Borg
parent 7373d2eb3c
commit 46fa5a374b
4 changed files with 68 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
gui/dark/assets/css/theme.css
View File

@ -77,6 +77,10 @@ li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
background-color: #222 !important;
}
.panel-progress {
background: #3498db;
}
.panel-footer {
background-color: #111 !important;
border-width: 0 !important;
@ -94,6 +98,11 @@ li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
fill: #aaa !important;
}
.panel-heading:hover, .panel-heading:focus {
text-decoration: none;
}
/* buttons */
.btn {
border-radius: 3px !important;

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

@ -33,29 +33,6 @@ ul+h5 {
display: block;
}
.panel-title {
position: relative;
text-overflow: ellipsis;
overflow: hidden;
}
a.panel-heading:hover {
text-decoration: none;
}
identicon {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
line-height: 1;
margin-right: 5px;
}
.identicon {
width: 1em;
height: 1em;
}
.checkbox {
margin-top: 0px;
}
@ -73,13 +50,8 @@ identicon {
word-wrap:break-word;
}
.panel-heading .fa, .modal-header .fa {
margin-right: 10px;
}
.panel-heading {
position: relative;
overflow: hidden;
.modal-header .fa {
margin-right: 15px;
}
.text-monospace {
@ -183,6 +155,44 @@ table.table-condensed td.no-overflow-ellipse {
margin-left: 60px;
}
/**
* Accordion Title bars
*/
.panel-icon{
float:left;
margin-right: 15px;
}
.panel-heading {
display: block;
cursor: pointer;
position: relative;
}
.panel-heading .panel-title-text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.panel-heading .panel-status {
margin-left:15px;
}
identicon {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
line-height: 1;
}
.identicon {
width: 1em;
height: 1em;
}
/**
* Progress bars with centered text
*/

6
gui/default/assets/css/theme.css
View File

@ -18,4 +18,8 @@
.li-column {
background-color: rgb(236, 240, 241);
border-radius: 3px;
}
}
.panel-heading:hover, .panel-heading:focus {
text-decoration: none;
}

24
gui/default/index.html
View File

@ -227,14 +227,14 @@
<h3 translate>Folders</h3>
<div class="panel-group" id="folders">
<div class="panel panel-default" ng-repeat="folder in folderList()">
<a class="panel-heading" data-toggle="collapse" data-parent="#folders" href="#folder-{{$index}}" style="cursor: pointer; display: block;">
<a class="panel-heading" data-toggle="collapse" data-parent="#folders" href="#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) == 'scanning' && scanProgress[folder.id] != undefined" ng-attr-style="width: {{scanPercentage(folder.id)}}%"></div>
<h4 class="panel-title">
<span class="fa hidden-xs fa-fw" ng-class="[folder.type == 'readonly' ? 'fa-lock' : 'fa-folder']"></span>
<span ng-show="folder.label.length == 0">{{folder.id}}</span>
<span tooltip data-original-title="{{folder.id}}" ng-show="folder.label.length != 0">{{folder.label}}</span>
<span class="pull-right text-{{folderClass(folder)}}" ng-switch="folderStatus(folder)">
<div class="panel-icon">
<span class="fa hidden-xs fa-fw" ng-class="[folder.type == 'readonly' ? 'fa-lock' : 'fa-folder']"></span>
</div>
<div class="panel-status pull-right text-{{folderClass(folder)}}" ng-switch="folderStatus(folder)">
<span ng-switch-when="unknown"><span class="hidden-xs" translate>Unknown</span><span class="visible-xs">&#9724;</span></span>
<span ng-switch-when="unshared"><span class="hidden-xs" translate>Unshared</span><span class="visible-xs">&#9724;</span></span>
<span ng-switch-when="stopped"><span class="hidden-xs" translate>Stopped</span><span class="visible-xs">&#9724;</span></span>
@ -251,7 +251,10 @@
({{syncPercentage(folder.id)}}%)
</span>
<span ng-switch-when="outofsync"><span class="hidden-xs" translate>Out of Sync</span><span class="visible-xs">&#9724;</span></span>
</span>
</div>
<div class="panel-title-text">
<span tooltip data-original-title="{{folder.label.length != 0 ? folder.id : ''}}">{{folder.label.length != 0 ? folder.label : folder.id}}</span>
</div>
</h4>
</a>
<div id="folder-{{$index}}" class="panel-collapse collapse">
@ -399,9 +402,10 @@
<div class="col-md-6">
<h3 translate>This Device</h3>
<div class="panel panel-default" ng-repeat="deviceCfg in [thisDevice()]">
<a class="panel-heading" data-toggle="collapse" href="#device-this" style="cursor: pointer; display: block;">
<a class="panel-heading" data-toggle="collapse" href="#device-this">
<h4 class="panel-title">
<identicon data-value="deviceCfg.deviceID"></identicon>&emsp;{{deviceName(deviceCfg)}}
<identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>
<div class="panel-title-text">{{deviceName(deviceCfg)}}</div>
</h4>
</a>
<div id="device-this" class="panel-collapse collapse in">
@ -474,10 +478,10 @@
<h3 translate>Remote Devices</h3>
<div class="panel-group" id="devices">
<div class="panel panel-default" ng-repeat="deviceCfg in otherDevices()">
<a class="panel-heading" data-toggle="collapse" data-parent="#devices" href="#device-{{$index}}" style="cursor: pointer; display: block;">
<a class="panel-heading" data-toggle="collapse" data-parent="#devices" href="#device-{{$index}}">
<div class="panel-progress" ng-show="deviceStatus(deviceCfg) == 'syncing'" ng-attr-style="width: {{completion[deviceCfg.deviceID]._total | number:0}}%"></div>
<h4 class="panel-title">
<identicon data-value="deviceCfg.deviceID"></identicon>&emsp;{{deviceName(deviceCfg)}}
<identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>{{deviceName(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="syncing">