This is an automated email from the git hooks/post-receive script. New commit to branch develop in repository coselmar. See http://git.codelutin.com/coselmar.git commit 4ba67f4c418eb8c1dc23d92761492a318203498e Author: Léo Kaufmann <kaufmann@codelutin.com> Date: Thu Feb 4 11:04:01 2016 +0100 Uniformisation des boutons et amélioration de la saisie des mot clés sur l'édition d'un projet --- coselmar-ui/src/main/webapp/css/coselmar.css | 69 ++++++++++++-- .../main/webapp/views/documents/editDocument.html | 22 +++-- .../views/documents/modalDocumentSearch.html | 8 +- .../main/webapp/views/questions/editquestion.html | 101 ++++++++++++--------- .../views/questions/modalQuestionSearch.html | 9 +- .../src/main/webapp/views/questions/toolsPart.html | 2 +- .../src/main/webapp/views/users/searchPart.html | 8 +- 7 files changed, 153 insertions(+), 66 deletions(-) diff --git a/coselmar-ui/src/main/webapp/css/coselmar.css b/coselmar-ui/src/main/webapp/css/coselmar.css index 88b2a05..8a08bf2 100644 --- a/coselmar-ui/src/main/webapp/css/coselmar.css +++ b/coselmar-ui/src/main/webapp/css/coselmar.css @@ -191,7 +191,8 @@ h2 { padding-right: 8px; } -.btn-action { +.btn-action, +.btn-action-header { background-color: transparent; transition: all 0.4s ease-in-out 0s; border: 1px solid #39a0a8; @@ -199,11 +200,25 @@ h2 { margin-left: 15px; } +.btn-action-header { + color: #777 !important; + border-color: #777; +} + +.btn-action-header:hover { + color: #FFF !important; +} + .btn-action:active, .btn-action:visited { color: #39a0a8 !important; } -.btn-action:hover { +.btn-action-header:active, +.btn-action-header:visited { + color: #777 !important; +} +.btn-action:hover, +.btn-action-header:hover { background-color: #39a0a8 !important; color: #FFF !important; } @@ -313,21 +328,32 @@ pagination-tool > .ng-scope .pager .fa:hover { border-top: 1px solid #EEE; } +.control-label { + white-space: nowrap; +} + /* Tableaux -------------------------------------------------- */ -.table tbody tr td.cell-with-btn-icon { +table.table-bordered thead tr th { + border-left: 1px solid #e9e9e9; +} +.table tr .cell-with-btn-icon { white-space: nowrap; } -.table tbody tr td.cell-with-btn-icon a.btn-icon { - padding-top: 3px; - padding-bottom: 3px; +.table tr .cell-with-btn-icon a.btn-icon { + padding-top: 4px; + padding-bottom: 4px; margin-left: 5px; } -.table tbody tr td.cell-with-btn-icon a.btn-icon span.fa { +.table tr .cell-with-btn-icon a.btn-icon .fa { padding-right: 0; } +table.table-bordered thead tr th.cell-with-btn-icon a.btn-icon { + background: rgba(255,255,255,0.6); +} + /* Document & question view -------------------------------------------------- */ @@ -338,6 +364,7 @@ dl > dt { dl > dd { padding: 3px 8px; + text-align: justify; } .aside { @@ -382,6 +409,32 @@ dl > dd { margin: 3px; padding: 3px 7px; } + +.tag-input { + padding: 0; + height: auto; +} +.tag-input input[type="text"] { + border: 0; + display: inline-block; + width: auto; + background: transparent; + margin-top: 1px; + box-shadow: none; +} +.tag-input input[type="text"]:focus { + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) inset; +} + +.tag-input .tag-input-add { + display: inline; + border-radius: 20px; + padding: 6px 8px; +} +.tag-input .tag-input-add .fa-plus { + padding: 0; +} + .tag { background-color: #F5F5F5; border: 1px solid #DDD; @@ -390,6 +443,7 @@ dl > dd { } .tag .close { padding-left: 5px; + vertical-align: middle; } .search-zone { @@ -579,6 +633,7 @@ input[type="file"] { height: auto; } +.modal h1, .modal h2 { padding-left: 15px; } diff --git a/coselmar-ui/src/main/webapp/views/documents/editDocument.html b/coselmar-ui/src/main/webapp/views/documents/editDocument.html index 80ca12b..2b14a6d 100644 --- a/coselmar-ui/src/main/webapp/views/documents/editDocument.html +++ b/coselmar-ui/src/main/webapp/views/documents/editDocument.html @@ -137,17 +137,19 @@ <div> <label class="col-md-2 control-label">{{ 'document.metadata.file' | translate }}</label> - <div class="col-md-3" ng-if="document.fileName" > - <input type="text" class="form-control" name="fileName" - data-ng-model="document.fileName" disabled="disabled"/> - - </div> - <!-- if file, display way to remove it --> - <div class="col-md-1 text-right" ng-if="document.fileName" > - <button type="button" class="btn btn-danger fa fa-remove" - title="{{ 'document.button.removeFile' | translate}}" - ng-click="removeFile();"/> + <div class="col-md-4" ng-if="document.fileName" > + <div class="input-group"> + <input type="text" class="form-control" name="fileName" + data-ng-model="document.fileName" disabled="disabled"/> + <span class="input-group-btn"> + <button type="button" class="btn btn-danger" + title="{{ 'document.button.removeFile' | translate}}" + ng-click="removeFile();"> + <i class="fa fa-remove"></i> + </button> + </span> + </div> </div> <!-- if no file, display input file to add new one --> diff --git a/coselmar-ui/src/main/webapp/views/documents/modalDocumentSearch.html b/coselmar-ui/src/main/webapp/views/documents/modalDocumentSearch.html index b0f9be8..f6ecb69 100644 --- a/coselmar-ui/src/main/webapp/views/documents/modalDocumentSearch.html +++ b/coselmar-ui/src/main/webapp/views/documents/modalDocumentSearch.html @@ -60,8 +60,12 @@ <td><span ng-repeat="keyword in document.keywords">{{keyword}} ,</span></td> <td>{{document.ownerName}}</td> <td>{{document.depositDate | date:'mediumDate'}}</td> - <td> - <a class="btn fa fa-plus" title="Add Document" ng-click="select(document)"/></td> + <td class="cell-with-btn-icon text-right"> + <a class="btn btn-action btn-icon" title="Add document" + ng-click="select(document)"> + <span class="fa fa-plus"></span> + </a> + </td> </tr> </table> <p ng-if="documents && documents.length == 0" translate="common.search.noResult" class="info"/> diff --git a/coselmar-ui/src/main/webapp/views/questions/editquestion.html b/coselmar-ui/src/main/webapp/views/questions/editquestion.html index 8bb4497..93e008e 100644 --- a/coselmar-ui/src/main/webapp/views/questions/editquestion.html +++ b/coselmar-ui/src/main/webapp/views/questions/editquestion.html @@ -121,31 +121,30 @@ <span class="fa fa-info-circle" tooltip-placement="bottom" uib-tooltip="{{ 'question.message.info.themes' | translate }}"></span> </label> - <div class="col-md-2" > - <input type="text" class="form-control" name="themes" - placeholder="Validate with add" - data-ng-model="toAddTheme" list="existingThemes" /> + <div class="col-md-10"> + <div class="form-control tag-input"> + <span ng-repeat="theme in question.themes" class="tag" aria-hidden="true"> + {{theme}} + <button type="button" class="close" title="remove" ng-click="removeTheme(theme);"> + × + </button> + </span> - <p ng-show="(question.themes.length < 1 && !questionForm.themes.$pristine) || themesError == true" - class="help-block">{{ 'question.message.requiredThemes' | translate }}</p> - </div> - <datalist id="existingThemes"> - <option data-ng-repeat="theme in existing.themes" value="{{theme}}"> - </datalist> + <input type="text" class="form-control" name="themes" + placeholder="Add a tag" + data-ng-model="toAddTheme" list="existingThemes" /> + <button type="button" class="btn btn-primary tag-input-add" value="add" ng-click="addTheme(toAddTheme); toAddTheme=''"><span class="fa fa-plus"></span></button> - <div class="col-md-1"> - <button type="button" class="btn btn-primary" value="add" ng-click="addTheme(toAddTheme); toAddTheme=''">{{ 'common.button.add' | translate }}</button> + <datalist id="existingThemes"> + <option data-ng-repeat="theme in existing.themes" value="{{theme}}"> + </datalist> + </div> </div> - - <div class="col-md-7"> - <span ng-repeat="theme in question.themes" class="tag" aria-hidden="true"> - {{theme}} - <button type="button" class="close" title="remove" ng-click="removeTheme(theme);"> - × - </button> - </span> - </div> + <div class="col-md-2" > + <p ng-show="(question.themes.length < 1 && !questionForm.themes.$pristine) || themesError == true" + class="help-block">{{ 'question.message.requiredThemes' | translate }}</p> + </div> </div> @@ -166,9 +165,11 @@ <th>{{ 'question.metadata.submissionDate' | translate }}</th> <th>{{ 'question.metadata.themes' | translate }}</th> <th>{{ 'question.metadata.status' | translate }}</th> - <th> - <a class="btn fa fa-search" title="Search parent question" - ng-click="modalSearchParents()" /> + <th class="cell-with-btn-icon text-right"> + <a class="btn btn-action-header btn-icon" title="Search parent question" + ng-click="modalSearchParents()"> + <span class="fa fa-search"></span> + </a> </th> </tr> </thead> @@ -182,9 +183,13 @@ <td>{{parent.submissionDate | date:'mediumDate'}}</td> <td><span ng-repeat="theme in parent.themes">{{theme}}, </span></td> <td><span class="status-{{parent.status|lowercase}}"></span>{{parent.status | translate}}</td> - <td><a class="btn fa fa-minus" title="Remove parent question" + <td class="cell-with-btn-icon text-right"> + <a class="btn btn-action btn-icon" title="Remove parent question" ng-click="removeParent(parent)" - ng-if="context.currentUser.role == 'SUPERVISOR'"/></td> + ng-if="context.currentUser.role == 'SUPERVISOR'"> + <i class="fa fa-minus"></i> + </a> + </td> </tr> </tbody> </table> @@ -210,11 +215,15 @@ <th>{{ 'document.metadata.keywords' | translate }}</th> <th>{{ 'document.metadata.depositor' | translate }}</th> <th>{{ 'document.metadata.depositDate' | translate }}</th> - <th> - <a class="btn fa fa-search" title="Search document" - ng-click="modalSearchDocuments(question.relatedDocuments)" /> - <a class="btn fa fa-plus" title="Add new Document" - ng-click="modalCreateDocument(question.relatedDocuments)"/> + <th class="cell-with-btn-icon text-right"> + <a class="btn btn-action-header btn-icon" title="Search document" + ng-click="modalSearchDocuments(question.relatedDocuments)"> + <span class="fa fa-search"></span> + </a> + <a class="btn btn-action-header btn-icon" title="Add new document" + ng-click="modalCreateDocument(question.relatedDocuments)"> + <span class="fa fa-plus"></span> + </a> </th> </tr> </thead> @@ -225,9 +234,13 @@ <td><span ng-repeat="keyword in document.keywords">{{keyword}}, </span></td> <td>{{document.ownerName}}</td> <td>{{document.depositDate | date:'mediumDate'}}</td> - <td><a class="btn fa fa-minus" title="Remove document" + <td class="cell-with-btn-icon text-right"> + <a class="btn btn-action btn-icon" title="Remove document" ng-click="removeDocument(document, question.relatedDocuments)" - ng-if="context.currentUser.role == 'SUPERVISOR'"/></td> + ng-if="context.currentUser.role == 'SUPERVISOR'"> + <span class="fa fa-minus"></span> + </a> + </td> </tr> </tbody> </table> @@ -375,9 +388,11 @@ <tr> <th>{{ 'link.metadata.name' | translate }}</th> <th>{{ 'link.metadata.url' | translate }}</th> - <th> - <a class="btn fa fa-plus" title="Add new link" - ng-click="modalEditLink()"/> + <th class="cell-with-btn-icon text-right"> + <a class="btn btn-action-header btn-icon" title="Add new link" + ng-click="modalEditLink()"> + <span class="fa fa-plus"></span> + </a> </th> </tr> </thead> @@ -385,11 +400,15 @@ <tr ng-repeat="link in question.links"> <td>{{link.name}}</a></td> <td>{{link.url}}</td> - <td> - <a class="btn fa fa-minus" title="Remove link" - ng-click="removeLink(link)"/> - <a class="btn fa fa-pencil" title="Edit link" - ng-click="modalEditLink(link)"/> + <td class="cell-with-btn-icon text-right"> + <a class="btn btn-action btn-icon" title="Edit link" + ng-click="modalEditLink(link)"> + <span class="fa fa-pencil"></span> + </a> + <a class="btn btn-action btn-icon" title="Remove link" + ng-click="removeLink(link)"> + <span class="fa fa-minus"></span> + </a> </td> </tr> </tbody> diff --git a/coselmar-ui/src/main/webapp/views/questions/modalQuestionSearch.html b/coselmar-ui/src/main/webapp/views/questions/modalQuestionSearch.html index 6dd62f2..c7efa78 100644 --- a/coselmar-ui/src/main/webapp/views/questions/modalQuestionSearch.html +++ b/coselmar-ui/src/main/webapp/views/questions/modalQuestionSearch.html @@ -60,9 +60,12 @@ <td>{{question.submissionDate | date:'mediumDate'}}</td> <td><span ng-repeat="theme in question.themes">{{theme}} ,</span></td> <td><span class="status-{{question.status|lowercase}}"></span>{{question.status | translate}}</td> - <td> - <a class="btn fa fa-plus" title="Add question as parent" - ng-click="select(question)"/></td> + <td class="cell-with-btn-icon text-right"> + <a class="btn btn-action btn-icon" title="Add question as parent" + ng-click="select(question)"> + <span class="fa fa-plus"></span> + </a> + </td> </tr> </table> <p ng-if="questions && questions.length == 0" translate="common.search.noResult" class="info"/> diff --git a/coselmar-ui/src/main/webapp/views/questions/toolsPart.html b/coselmar-ui/src/main/webapp/views/questions/toolsPart.html index 589979f..32304df 100644 --- a/coselmar-ui/src/main/webapp/views/questions/toolsPart.html +++ b/coselmar-ui/src/main/webapp/views/questions/toolsPart.html @@ -38,7 +38,7 @@ <div class="input-group"> <input type="text" class="form-control" placeholder="keyword1,keyword2,..." ng-model="searchOptions.fullTextSearch" ng-list /> <span class="input-group-btn"> - <button type="submit" class="btn btn-primary glyphicon glyphicon-search"></button> + <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button> </span> </div> </div> diff --git a/coselmar-ui/src/main/webapp/views/users/searchPart.html b/coselmar-ui/src/main/webapp/views/users/searchPart.html index 6f2b6b4..fcaf325 100644 --- a/coselmar-ui/src/main/webapp/views/users/searchPart.html +++ b/coselmar-ui/src/main/webapp/views/users/searchPart.html @@ -37,8 +37,12 @@ <form class="form-inline pull-right search-zone" name="userOptions" role="userOptions" ng-submit="searchUsers()" ng-show="!advanced"> <div class="form-group"> {{ 'common.button.searchField' | translate }} - <input type="search" class="form-control" placeholder="Search an user" ng-model="example.fullTextSearch" ng-list/> - <button type="submit" class="btn btn-primary glyphicon glyphicon-search"></button> + <div class="input-group"> + <input type="search" class="form-control" placeholder="Search an user" ng-model="example.fullTextSearch" ng-list/> + <span class="input-group-btn"> + <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button> + </span> + </div> </div> <div class="form-group"> <input type="checkbox" ng-model="example.showDisable" /> -- To stop receiving notification emails like this one, please contact codelutin.com SCM administrator <admin+scm@codelutin.com>.