tonyair
/
silverstripe-cms
mirror of https://github.com/silverstripe/silverstripe-cms
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

BUG URLSegment field styling fixes #2193 

Squashed commit of the following:

commit 6ee00358f70e26ef5faf622b8f23fc4419698ed5
Author: Maxime Rainville <maxime@silverstripe.com>
Date:   Wed Jul 11 13:22:07 2018 +1200

    Remove debug statement.

commit 8e80300244a19e84d638ffd151b236b846c35b77
Author: Luke Edwards <luke@silverstripe.com>
Date:   Wed Jul 11 10:55:04 2018 +1200

    Only remove actions for readonly rather than only display link

commit 1d3693432bb1ca403d3eefc648cfddb8372b82bd
Author: Luke Edwards <luke@silverstripe.com>
Date:   Wed Jul 11 09:12:21 2018 +1200

    Stop button wrapping when 'Cancel' is longer in another language

commit 5495992b22a0546aaa87e5ea1b2fa9c79f6e119d
Author: Luke Edwards <luke@silverstripe.com>
Date:   Tue Jul 10 16:02:27 2018 +1200

    Use link as the readonly representation of the URLSegment

commit 5737e152424281dbea480872900d735cc43f5fd3
Author: Luke Edwards <luke@silverstripe.com>
Date:   Mon Jun 18 11:07:34 2018 +1200

    Improve readonly styling of URLSegement field

commit 272da9361452843fbb368bfc67e13e6d9540faf2
Author: Luke Edwards <luke@silverstripe.com>
Date:   Mon Jun 18 10:18:33 2018 +1200

    Use input-addon style for URLSegment field
This commit is contained in:
Maxime Rainville 2018-07-11 13:33:27 +12:00 committed by Maxime Rainville
parent 2d9432789b
commit c23473103e
4 changed files with 45 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/dist/styles/bundle.css vendored
View File

@ -1 +1 @@
#cms-page-history-versions tr.loading{color:#999}#cms-page-history-versions tr.loading td:hover{cursor:none}#cms-page-history-versions td:hover{cursor:pointer}.CMSPageHistoryController{overflow:hidden}.CMSPageHistoryController ins{background-color:#dfd;padding:2px;text-decoration:none}.CMSPageHistoryController del{background-color:#fdd;padding:2px;color:#f44}.CMSPageHistoryController .htmleditorfield.readonly img{max-width:100%;height:auto}.CMSPageHistoryController .cms-content-tools.collapsed{overflow:hidden}#cms-content-listview .cms-tree-expand-trigger,#cms-content-treeview .cms-tree-expand-trigger{display:none}.cms-content-tools #cms-content-treeview .cms-content-toolbar{border-bottom:none;-webkit-box-shadow:none;box-shadow:none;margin-bottom:0}.cms-content-tools #cms-content-treeview .cms-tree-expand-trigger{display:block;float:left;margin:0 0 2px}.cms-content-tools #cms-content-treeview .cms-tree-expand-trigger span.ui-button-text{padding-right:8px}.cms-content-tools #cms-content-treeview .cms-tree .badge{display:none}.cms-content-tools #cms-content-treeview .cms-tree .jstree-clicked>.text>.badge,.cms-content-tools #cms-content-treeview .cms-tree a:hover>.text>.badge{display:inline-block}.cms-list .cms-list__item-breadcrumbs{margin-left:21px;margin-bottom:0;font-size:.9em;word-break:break-word}.cms-content-toolbar .view-controls{margin-top:0}.cms-content-toolbar .view-controls .page-view-link{display:inline-block;margin-right:-5px}.cms-content-toolbar .view-controls.view-controls--listview .font-icon-list,.cms-content-toolbar .view-controls.view-controls--treeview .font-icon-tree{display:none}.field.urlsegment.loading .form__field-label{background-image:url(data:image/gif;base64,R0lGODlhEAAQAPQAAP///wpakvj6+z9+qYivyg9dlC5yotfk7KvG2R9om3umxGubveXt8py80sjZ5k+IsFyRtgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==);background-repeat:no-repeat;background-position:100%;padding-right:20px}.field.urlsegment .URL-link{padding-top:8px;display:inline-block}.field.urlsegment input.text{width:250px;float:left}.field.urlsegment .cancel,.field.urlsegment .edit,.field.urlsegment .update,.field.urlsegment input.text{margin-right:8px}.field.urlsegment .help{margin-left:0}.field.urlsegment .edit-holder{display:none}.field.urlsegment .edit-holder .form__field-description{clear:both}.form__field-update-url{border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px}#Form_EditForm #Title .update{margin-left:7px}
#cms-page-history-versions tr.loading{color:#999}#cms-page-history-versions tr.loading td:hover{cursor:none}#cms-page-history-versions td:hover{cursor:pointer}.CMSPageHistoryController{overflow:hidden}.CMSPageHistoryController ins{background-color:#dfd;padding:2px;text-decoration:none}.CMSPageHistoryController del{background-color:#fdd;padding:2px;color:#f44}.CMSPageHistoryController .htmleditorfield.readonly img{max-width:100%;height:auto}.CMSPageHistoryController .cms-content-tools.collapsed{overflow:hidden}#cms-content-listview .cms-tree-expand-trigger,#cms-content-treeview .cms-tree-expand-trigger{display:none}.cms-content-tools #cms-content-treeview .cms-content-toolbar{border-bottom:none;-webkit-box-shadow:none;box-shadow:none;margin-bottom:0}.cms-content-tools #cms-content-treeview .cms-tree-expand-trigger{display:block;float:left;margin:0 0 2px}.cms-content-tools #cms-content-treeview .cms-tree-expand-trigger span.ui-button-text{padding-right:8px}.cms-content-tools #cms-content-treeview .cms-tree .badge{display:none}.cms-content-tools #cms-content-treeview .cms-tree .jstree-clicked>.text>.badge,.cms-content-tools #cms-content-treeview .cms-tree a:hover>.text>.badge{display:inline-block}.cms-list .cms-list__item-breadcrumbs{margin-left:21px;margin-bottom:0;font-size:.9em;word-break:break-word}.cms-content-toolbar .view-controls{margin-top:0}.cms-content-toolbar .view-controls .page-view-link{display:inline-block;margin-right:-5px}.cms-content-toolbar .view-controls.view-controls--listview .font-icon-list,.cms-content-toolbar .view-controls.view-controls--treeview .font-icon-tree{display:none}.field.urlsegment .input-group{width:auto;-webkit-flex-wrap:nowrap;flex-wrap:nowrap}.field.urlsegment.loading .form__field-label{background-image:url(data:image/gif;base64,R0lGODlhEAAQAPQAAP///wpakvj6+z9+qYivyg9dlC5yotfk7KvG2R9om3umxGubveXt8py80sjZ5k+IsFyRtgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==);background-repeat:no-repeat;background-position:100%;padding-right:20px}.field.urlsegment .URL-link{padding-top:8px;display:inline-block}.field.urlsegment input.text{-webkit-box-flex:0;-webkit-flex:0 1 250px;flex:0 1 250px}.field.urlsegment .input-group-append{z-index:2}.field.urlsegment .input-group-append:last-of-type{z-index:1}.field.urlsegment .input-group-append .btn{margin-top:0;padding-top:.5385rem;padding-bottom:.5385rem}.field.urlsegment .help{margin-left:0}.field.urlsegment .edit-holder{display:none}.field.urlsegment .edit-holder .form__field-description{clear:both}.form__field-update-url{border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px}

2
client/src/styles/bundle.scss
View File

@ -3,5 +3,7 @@
// DO NOT ADD stylesheet rules to this file directly!
// Note: By prefixing files with an underscore, they won't create individual CSS files.
@import "variables";
@import "legacy/CMSMain";
@import "legacy/ReportAdmin";

29
client/src/styles/legacy/_CMSMain.scss
View File

@ -139,6 +139,10 @@
* URLSegment field
* ----------------------------------------------------------------- */
.field.urlsegment {
.input-group {
width: auto;
flex-wrap: nowrap;
}
&.loading .form__field-label {
background-image: url(../../images/loading.gif);
@ -153,13 +157,22 @@
}
input.text {
width: 250px; // ensure there's enough room for buttons
float: left;
}
flex: 0 1 250px;
}
input.text, .cancel, .update, .edit {
margin-right: 8px;
}
.input-group-append {
z-index: 2;
&:last-of-type {
z-index: 1;
}
.btn {
margin-top: 0;
padding-top: $input-padding-y;
padding-bottom: $input-padding-y;
}
}
.help {
margin-left: 0;
@ -179,7 +192,3 @@
margin-right: 0px;
margin-left: -1px;
}
#Form_EditForm #Title .update {
margin-left: 7px;
}

39
templates/SilverStripe/CMS/Forms/SiteTreeURLSegmentField.ss
View File

@ -1,20 +1,27 @@
<div class="preview-holder">
<a class="URL-link" href="$URL" target="_blank">
$URL
</a>
<% if not $IsReadonly %>
<button role="button" type="button" class="btn btn-outline-secondary btn-sm edit">
<%t SilverStripe\CMS\Forms\SiteTreeURLSegmentField.Edit 'Edit' %>
</button>
<% end_if %>
<a class="URL-link" href="$URL" target="_blank">
$URL
</a>
<% if not $IsReadonly %>
<button role="button" type="button" class="btn btn-outline-secondary btn-sm edit">
<%t SilverStripe\CMS\Forms\SiteTreeURLSegmentField.Edit 'Edit' %>
</button>
<% end_if %>
</div>
<div class="edit-holder">
<input $AttributesHTML />
<button role="button" data-icon="accept" type="button" class="btn btn-primary btn-sm update">
<%t SilverStripe\CMS\Forms\SiteTreeURLSegmentField.OK 'OK' %>
</button>
<button role="button" data-icon="cancel" type="button" class="btn btn-outline-secondary btn-sm cancel">
<%t SilverStripe\CMS\Forms\SiteTreeURLSegmentField.Cancel 'Cancel' %>
</button>
<% if $HelpText %><p class="form__field-description">$HelpText</p><% end_if %>
<div class="input-group">
<input $AttributesHTML />
<div class="input-group-append">
<button role="button" data-icon="accept" type="button" class="btn btn-primary update">
<%t SilverStripe\CMS\Forms\SiteTreeURLSegmentField.OK 'OK' %>
</button>
</div>
<div class="input-group-append">
<button role="button" data-icon="cancel" type="button" class="btn btn-outline-secondary btn-sm input-group-append cancel">
<%t SilverStripe\CMS\Forms\SiteTreeURLSegmentField.Cancel 'Cancel' %>
</button>
</div>
</div>
<% if $HelpText %><p class="form__field-description">$HelpText</p><% end_if %>
</div>