Skip to content

Commit

Permalink
Merge pull request #1566 from ecency/feature/voting-2.0
Browse files Browse the repository at this point in the history 
Feature/voting 2.0
  • Loading branch information
@feruzm
feruzm authored Mar 4, 2024
2 parents ba26028 + a6b0871 commit d60da92
Show file tree
Hide file tree
Showing 11 changed files with 190 additions and 653 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@
"react-highcharts": "^16.1.0",
"react-img-webp": "^2.0.2",
"react-in-viewport": "^1.0.0-alpha.30",
"react-input-slider": "^6.0.1",
"react-popper": "^2.2.5",
"react-redux": "^7.2.0",
"react-resize-detector": "^7.1.2",
Expand Down
2 changes: 1 addition & 1 deletion src/common/components/decks/_deck.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@
margin: 0;
}

.btn, .entry-votes, .entry-vote-btn, .comments, .entry-payout {
.btn, .entry-votes, .entry-vote-btn, .comments, .entry-payout, .entry-reblog-btn {
color: $secondary;

@include padding(0);
Expand Down
27 changes: 26 additions & 1 deletion src/common/components/decks/columns/helpers/_helpers.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@
display: grid;
align-items: center;
grid-template-areas:
"slider slider slider slider slider"
"btn-up slider slider slider btn-down"
"btn-up price space percentage btn-down";
grid-template-columns: min-content min-content 1fr min-content min-content;
grid-gap: 0 1rem;

.btn-up-vote {
grid-area: btn-up;
Expand All @@ -28,21 +29,45 @@

.slider {
grid-area: slider;

> div {
@apply w-full bg-gray-300 dark:bg-dark-default;

> div:first-child {
@apply bg-blue-dark-sky;
}
}
}

.estimated {
grid-area: price;
text-align: left;
}

.percentage {
grid-area: percentage;
text-align: right;
}

.estimated, .percentage {
@apply text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap;
}

.space {
grid-area: space;
}
}

.voting-controls-down {
.slider {
> div {
> div:first-child {
@apply bg-red;
}
}
}
}

@media screen and (max-width: 560px) {
width: calc(100vw - 67px - 24px);
left: -12px;
Expand Down
231 changes: 0 additions & 231 deletions src/common/components/entry-vote-btn/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,50 +13,6 @@
}
}

.voting-controls {
display: flex;
align-items: center;

.estimated,
.percentage {
white-space: nowrap;
width: 60px;

@media (max-width: ($sm-break - 1px)) {
font-size: 13px;
}
}

.btn-vote {
flex-shrink: 0;
}

.btn-up-vote,
.estimated,
.slider,
.percentage {
margin-right: 8px;
}

.estimated,
.slider,
.percentage {
display: flex;
// align-items: center;
flex-direction: column;
justify-content: flex-end;
}

.slider {
flex-grow: 1;
margin-right: 0px !important;

input[type="range"] {
width: 100%;
}
}
}

.vote-modal {
.modal-content {
border: none;
Expand All @@ -65,193 +21,6 @@
}
}

// Custom range input styles

.voting-controls-up,
.voting-controls-down {
&.disable {
pointer-events: none;
opacity: 0.5;
}

.btn-vote {
@include btn-vote;
}

input[type="range"] {
width: 100%;
margin: 5.5px 0;
@apply bg-transparent;
-webkit-appearance: none;
}

input[type="range"]:focus {
outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
border: 0;
border-radius: 20px;
width: 100%;
height: 9px;
cursor: pointer;

@include themify(day) {
@apply bg-light-400;
}

@include themify(night) {
@apply bg-gunmetal;
}
}

input[type="range"]::-webkit-slider-thumb {
margin-top: -5.5px;
width: 20px;
height: 20px;
border-radius: 20px;
cursor: pointer;
-webkit-appearance: none;

@include themify(day) {
border: 2px solid;
@apply border-white;
}

@include themify(night) {
border: 2px solid;
@apply border-silver;
}
}

input[type="range"]:focus::-webkit-slider-runnable-track {
@include themify(day) {
@apply bg-light-400;
}

@include themify(night) {
@apply bg-gunmetal;
}
}

input[type="range"]::-moz-range-track {
border: 0;
border-radius: 20px;
width: 100%;
height: 9px;
cursor: pointer;

@include themify(day) {
@apply bg-light-400;
}

@include themify(night) {
@apply bg-gunmetal;
}
}

input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 20px;
cursor: pointer;

@include themify(day) {
border: 2px solid;
@apply border-white;
}

@include themify(night) {
border: 2px solid;
@apply border-silver;
}
}

input[type="range"]::-ms-track {
@apply bg-transparent;
@apply border-transparent;
@apply text-transparent;
border-width: 6.4px 0;
width: 100%;
height: 9px;
cursor: pointer;
}

input[type="range"]::-ms-fill-lower {
border: 0;
border-radius: 40px;

@include themify(day) {
@apply bg-light-400;
}

@include themify(night) {
@apply bg-gunmetal;
}
}

input[type="range"]::-ms-fill-upper {
border: 0;
border-radius: 40px;

@include themify(day) {
@apply bg-light-400;
}

@include themify(night) {
@apply bg-gunmetal;
}
}

input[type="range"]::-ms-thumb {
width: 20px;
height: 20px;
border-radius: 20px;
cursor: pointer;
margin-top: 0px;

@include themify(day) {
border: 2px solid;
@apply border-white;
}

@include themify(night) {
border: 2px solid;
@apply border-silver;
}

/*Needed to keep the Edge thumb centred*/
}
}

.voting-controls-up {
input[type="range"]::-webkit-slider-thumb {
@apply bg-blue-dark-sky;
}

input[type="range"]::-moz-range-thumb {
@apply bg-blue-dark-sky;
}

input[type="range"]::-ms-thumb {
@apply bg-blue-dark-sky;
}
}

.voting-controls-down {
input[type="range"]::-webkit-slider-thumb {
@apply bg-red-040;
}

input[type="range"]::-moz-range-thumb {
@apply bg-red-040;
}

input[type="range"]::-ms-thumb {
@apply bg-red-040;
}
}

.tooltip-vote {
position: relative;
display: inline-block;
Expand Down
12 changes: 6 additions & 6 deletions src/common/components/entry-vote-btn/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import LoginRequired from "../login-required";
import { error } from "../feedback";
import { getAccountFull, getActiveVotes, votingPower } from "../../api/hive";
import { prepareVotes } from "../entry-votes";
import VotingSlider from "../entry-vote-slider";
import EntryTipBtn from "../entry-tip-btn";
import parseAsset from "../../helper/parse-asset";
import { formatError, vote } from "../../api/operations";
Expand All @@ -28,6 +27,7 @@ import { _t } from "../../i18n";
import "./_index.scss";
import { useMappedStore } from "../../store/use-mapped-store";
import { Button } from "@ui/button";
import Slider from "react-input-slider";

const setVoteValue = (
type: "up" | "down" | "downPrevious" | "upPrevious",
Expand Down Expand Up @@ -323,7 +323,7 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
</div>
<div className="space" />
<div className="slider slider-up">
<VotingSlider value={upSliderVal} setVoteValue={this.upSliderChanged} mode={mode} />
<Slider axis="x" x={upSliderVal} onChange={({ x }) => this.upSliderChanged(x)} />
</div>
<div className="percentage">{`${upSliderVal && upSliderVal.toFixed(1)}%`}</div>
<Button
Expand Down Expand Up @@ -373,10 +373,10 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
<FormattedCurrency {...this.props} value={this.estimate(downSliderVal)} fixAt={3} />
</div>
<div className="slider slider-down">
<VotingSlider
value={downSliderVal}
setVoteValue={this.downSliderChanged}
mode={mode}
<Slider
axis="x"
x={downSliderVal}
onChange={({ x }) => this.downSliderChanged(x)}
/>
</div>
<div className="space" />
Expand Down
Loading

0 comments on commit d60da92

Please sign in to comment.