Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-10-26 16:46:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: a slightly less ugly rewards panel

Browse Source
This commit is contained in:
psychobunny
2021-09-07 11:49:43 -04:00
parent a7855c4cc4
commit bf0c02a71e
4 changed files with 107 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/language/en-GB/admin/extend/rewards.json
View File

@@ -8,8 +8,6 @@
"delete": "Delete", "delete": "Delete",
"enable": "Enable", "enable": "Enable",
"disable": "Disable", "disable": "Disable",
"control-panel": "Rewards Control",
"new-reward": "New Reward",
"alert.delete-success": "Successfully deleted reward", "alert.delete-success": "Successfully deleted reward",
"alert.no-inputs-found": "Illegal reward - no inputs found!", "alert.no-inputs-found": "Illegal reward - no inputs found!",

30
public/less/admin/extend/rewards.less
View File

@@ -16,6 +16,36 @@
> li { > li {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
margin-bottom: 20px; margin-bottom: 20px;
&:last-child {
border-bottom: 0;
}
}
}
.rewards { width: 100%; }
.well {
border-radius: 2px;
border-width: 2px;
color: #333;
&.if-block {
border-color: @brand-primary;
}
&.this-block {
border-color: @brand-warning;
}
&.then-block {
border-color: @brand-success;
}
&.reward-block {
border-color: @brand-success;
background-color: lighten(@brand-success, 15%);
color: #fff;
a, select, input { color: #fff; }
select > option { color: #333; }
width: 100%;
min-height: 110px;
} }
} }
} }

4
public/src/admin/extend/rewards.js
View File

@@ -95,13 +95,13 @@ define('admin/extend/rewards', [], function () {
html += '<label for="' + input.name + '">' + input.label + '<br />'; html += '<label for="' + input.name + '">' + input.label + '<br />';
switch (input.type) { switch (input.type) {
case 'select': case 'select':
html += '<select name="' + input.name + '">'; html += '<select class="form-control" name="' + input.name + '">';
input.values.forEach(function (value) { input.values.forEach(function (value) {
html += '<option value="' + value.value + '">' + value.name + '</option>'; html += '<option value="' + value.value + '">' + value.name + '</option>';
}); });
break; break;
case 'text': case 'text':
html += '<input type="text" name="' + input.name + '" />'; html += '<input type="text" class="form-control" name="' + input.name + '" />';
break; break;
} }
html += '</label><br />'; html += '</label><br />';

144
src/views/admin/extend/rewards.tpl
View File

@@ -1,76 +1,82 @@
<div id="rewards" class="row">
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-heading">[[admin/extend/rewards:rewards]]</div>
<div class="panel-body">
<ul id="active">
{{{ each active }}}
<li data-rid="{active.rid}" data-id="{active.id}">
<form class="main inline-block">
<div class="well inline-block">
<label for="condition">[[admin/extend/rewards:condition-if-users]]</label><br />
<select name="condition" data-selected="{active.condition}">
{{{ each conditions }}}
<option value="{conditions.condition}">{conditions.name}</option>
{{{ end }}}
</select>
</div>
<div class="well inline-block">
<label for="condition">[[admin/extend/rewards:condition-is]]</label><br />
<select name="conditional" data-selected="{active.conditional}">
{{{ each conditionals }}}
<option value="{conditionals.conditional}">{conditionals.name}</option>
{{{ end }}}
</select>
<input type="text" name="value" value="{active.value}" />
</div>
<div class="well inline-block">
<label for="condition">[[admin/extend/rewards:condition-then]]</label><br />
<select name="rid" data-selected="{active.rid}">
<!-- BEGIN ../../rewards -->
<option value="{rewards.rid}">{rewards.name}</option>
<!-- END ../../rewards -->
</select>
</div>
</form>
<form class="rewards inline-block"> <div id="rewards">
<div class="inputs well inline-block"></div> <ul id="active">
</form> {{{ each active }}}
<div class="clearfix"></div> <li data-rid="{active.rid}" data-id="{active.id}">
<div class="row">
<div class="pull-right"> <div class="col-xs-12 col-sm-12 col-lg-8">
<div class="panel-body inline-block"> <form class="main inline-block">
<form class="main"> <div class="well inline-block if-block">
<label for="claimable">[[admin/extend/rewards:max-claims]]</label><br /> <label for="condition">[[admin/extend/rewards:condition-if-users]]</label><br />
<input type="text" name="claimable" value="{active.claimable}" placeholder="1" /> <select class="form-control" name="condition" data-selected="{active.condition}">
<small>[[admin/extend/rewards:zero-infinite]]</small> {{{ each conditions }}}
</form> <option value="{conditions.condition}">{conditions.name}</option>
</div> {{{ end }}}
<div class="panel-body inline-block"> </select>
<button class="btn btn-danger delete">[[admin/extend/rewards:delete]]</button> </div>
<!-- IF active.disabled --> <div class="well inline-block this-block">
<button class="btn btn-success toggle">[[admin/extend/rewards:enable]]</button> <label for="condition">[[admin/extend/rewards:condition-is]]</label><br />
<!-- ELSE --> <div class="row">
<button class="btn btn-warning toggle">[[admin/extend/rewards:disable]]</button> <div class="col-xs-6">
<!-- ENDIF active.disabled --> <select class="form-control" name="conditional" data-selected="{active.conditional}">
{{{ each conditionals }}}
<option value="{conditionals.conditional}">{conditionals.name}</option>
{{{ end }}}
</select>
</div>
<div class="col-xs-6">
<input class="form-control" type="text" name="value" value="{active.value}" />
</div>
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="well inline-block then-block">
</li> <label for="condition">[[admin/extend/rewards:condition-then]]</label><br />
{{{ end }}} <select class="form-control" name="rid" data-selected="{active.rid}">
</ul> <!-- BEGIN ../../rewards -->
<option value="{rewards.rid}">{rewards.name}</option>
<!-- END ../../rewards -->
</select>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-12 col-lg-4">
<form class="rewards inline-block">
<div class="inputs well inline-block reward-block"></div>
</form>
</div>
</div> </div>
</div>
</div>
<div class="col-lg-3 acp-sidebar"> <div class="pull-left">
<div class="panel panel-default"> <div class="panel-body inline-block">
<div class="panel-heading">[[admin/extend/rewards:control-panel]]</div> <form class="main">
<div class="panel-body"> <label for="claimable">[[admin/extend/rewards:max-claims]] <small>[[admin/extend/rewards:zero-infinite]]</small></label><br />
<button class="btn btn-success btn-md" id="new">[[admin/extend/rewards:new-reward]]</button> <input class="form-control" type="text" name="claimable" value="{active.claimable}" placeholder="1" />
<button class="btn btn-primary btn-md" id="save">[[global:save_changes]]</button> </form>
</div>
</div> </div>
</div>
</div> <div class="pull-right">
<div class="panel-body inline-block">
<button class="btn btn-danger delete">[[admin/extend/rewards:delete]]</button>
<!-- IF active.disabled -->
<button class="btn btn-success toggle">[[admin/extend/rewards:enable]]</button>
<!-- ELSE -->
<button class="btn btn-warning toggle">[[admin/extend/rewards:disable]]</button>
<!-- ENDIF active.disabled -->
</div>
</div>
<div class="clearfix"></div>
</li>
{{{ end }}}
</ul>
</div>
<div class="floating-button">
<button id="new" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" >
<i class="material-icons">add</i>
</button>
<button id="save" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored primary">
<i class="material-icons">save</i>
</button>
</div> </div>