Skip to content

Commit

Permalink
Added contrast to select options when used in Firefox and Edge + adde…
Browse files Browse the repository at this point in the history 
…d new cora-status element to approved icons on dashboard + removed scrollbar on left categories sidebar
  • Loading branch information
@elrumo
elrumo committed Jul 2, 2021
1 parent 44f78df commit 770957f
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 95 deletions.
48 changes: 25 additions & 23 deletions website/macos-big-sur-icons/src/components/EditIconDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,30 +53,32 @@
<label :id="'categoryUpdateLabel'+icon.id" class="coral-FieldLabel">
App category
</label>
<select
name="categoryUpdateField"
:id="'categoryUpdateField'+icon.id"
placeholder="Select category"
class="dropdown-select"
v-on:change="getValue($event, 'category')"
>
<option
value=""
disabled selected
>
Select category (required)
</option>
<option
v-for="category in getAppCategories"
:key="category.name+icon.id"
:id="category.id+icon.id"
:value="category.id"
:selected="isSameCategory('category', category)"
<div class="dropdown-select-chevron">
<select
name="categoryUpdateField"
:id="'categoryUpdateField'+icon.id"
placeholder="Select category"
class="dropdown-select"
v-on:change="getValue($event, 'category')"
>

{{ category.name }}
</option>
</select>
<option
value=""
disabled selected
>
Select category (required)
</option>
<option
v-for="category in getAppCategories"
:key="category.name+icon.id"
:id="category.id+icon.id"
:value="category.id"
:selected="isSameCategory('category', category)"
>

{{ category.name }}
</option>
</select>
</div>
</div>

<!-- Type of icon -->
Expand Down
26 changes: 14 additions & 12 deletions website/macos-big-sur-icons/src/components/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,18 +87,20 @@

<hr class="coral-Divider--s coral-Divider--vertical searchBar-divider m-0">

<select
id="selectOS"
class="dropdown-select searchbar-select"
v-on:change="changeOS"
>
<option value="macOS" selected="">
macOS
</option>
<option value="iOS">
iOS
</option>
</select>
<div class="dropdown-select-chevron">
<select
id="selectOS"
class="dropdown-select searchbar-select"
v-on:change="changeOS"
>
<option value="macOS" selected="">
macOS
</option>
<option value="iOS">
iOS
</option>
</select>
</div>

</div>
</div>
Expand Down
46 changes: 24 additions & 22 deletions website/macos-big-sur-icons/src/components/SubmissionDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,29 +109,31 @@
<label :id="'categoryUploadLabel'+icon.randId" class="coral-FieldLabel">
App category
</label>
<select
name="categoryUploadField"
:id="'categoryUploadField'+icon.randId"
placeholder="Select category"
class="dropdown-select"
v-on:change="getValue($event, icon.randId, 'category')"
>
<option
value=""
disabled selected
>
Select category (required)
</option>
<option
v-for="category in getAppCategories"
:key="category.name+icon.randId+Math.floor(Math.random() * 10000000 + 1)"
:id="icon.randId+category.id"
:value="category.id"
:selected="icon.category.includes(category.id)"
<div class="dropdown-select-chevron relative">
<select
name="categoryUploadField"
:id="'categoryUploadField'+icon.randId"
placeholder="Select category"
class="dropdown-select"
v-on:change="getValue($event, icon.randId, 'category')"
>
{{ category.name }}
</option>
</select>
<option
value=""
disabled selected
>
Select category (required)
</option>
<option
v-for="category in getAppCategories"
:key="category.name+icon.randId+Math.floor(Math.random() * 10000000 + 1)"
:id="icon.randId+category.id"
:value="category.id"
:selected="icon.category.includes(category.id)"
>
{{ category.name }}
</option>
</select>
</div>
</div>

<!-- Type of icon -->
Expand Down
65 changes: 51 additions & 14 deletions website/macos-big-sur-icons/src/components/app.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,15 +329,53 @@ option[value=""][disabled] {
}

.coral--dark .dropdown-select{
background-color: var(--coral-dark-card) !important;
border-color: var(--coral-dark-border);
color: var(--coral-light-border);
background-color: var(--coral-dark-card);
border-color: var(--coral-dark-border);
}

.main-search .dropdown-select-chevron{
position: inherit;
}

.dropdown-select-chevron{
position: relative;
}

.dropdown-select-chevron::after{
pointer-events: none;
content: "";
width: 20px;
height: 20px;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}

div * {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
::-webkit-scrollbar-track {
-webkit-box-shadow: none !important;
background-color: transparent;
}
::-webkit-scrollbar {
width: 3px !important;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
}
}

.coral--dark .dropdown-select-chevron::after{
background: url('../assets/icons/ChevronDown.svg') no-repeat 97% 50% !important;
}
.coral--light .dropdown-select{
background-color: rgb(255, 255, 255) !important;
border-color: rgb(225, 225, 225);
color: rgb(75, 75, 75);
.coral--light .dropdown-select-chevron::after{
// background-color: rgb(255, 255, 255) !important;
// border-color: rgb(225, 225, 225);
// color: rgb(75, 75, 75);
background: url('../assets/icons/ChevronDown-dark.svg') no-repeat 97% 50% !important;
}

Expand Down Expand Up @@ -1198,6 +1236,11 @@ coral-buttongroup button{
cursor: pointer !important;
}

// .coral--dark option{
// color: #4b4b4b;
// border-radius: 4px;
// }

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
Expand Down Expand Up @@ -1246,14 +1289,8 @@ coral-buttongroup button{

.loading-approval-wrapper{
position: absolute;
left: 50%;
transform: translate3d(-50%, -50%, 0px);
top: 50%;
width: 80%;
height: 80%;
z-index: 9;
/* backdrop-filter: blur(5px) saturate(0.5); */
backdrop-filter: blur(3px);
top: 0%;
left: 0%;
}

.hide{
Expand Down
52 changes: 28 additions & 24 deletions website/macos-big-sur-icons/src/views/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,6 @@
No icons to aprove
</h3>


<div class="m-t-40">
<!-- <input type="file" id="profilePhotoFileUpload" @change="uploadFile"> -->
<!-- <button is="coral-button" variant="cta" @click="migrateFiles">Migrate Files</button> -->
</div>

<!-- Edit user dialog -->
<coral-dialog id="editUserDialog">
<coral-dialog-header>{{ selectedUser.usersName }}</coral-dialog-header>
Expand Down Expand Up @@ -69,7 +63,7 @@
<div class="p-t-20 p-b-50 dashboard-wrapper">
<div v-for="user in icons" :key="user.usersName" class="p-b-30">

<h3 class="coral-Heading--M p-b-10 text-left">
<h3 class="coral-Heading--M p-b-10 text-left d-flex">
<a
:href="'mailto:'+user.email+'?subject=macOS icons submission'"
@click="copyText(user.usersName)"
Expand All @@ -78,6 +72,10 @@
</a>
<img @click="showDialog('editUserDialog', user)" class="dashboard-edit-user" :src="coralIcons.edit" alt="">
<img @click="sendEmail(user)" class="dashboard-edit-user p-l-15" :src="coralIcons.email" alt="">

<coral-status v-if="user.emailSent == 'requested'" variant="info"></coral-status>
<coral-status v-if="user.emailSent == 'sent'" variant="success"></coral-status>

</h3>

<div class="icon-list-area">
Expand All @@ -87,9 +85,9 @@
<coral-status v-if="icon.isReupload && !icon.isAuthor" variant="warning"></coral-status>

<div class="card-img-wrapper" style="max-width: 120px;">

<div v-if="icon.isReview" class="loading-approval-wrapper">
<div class="loading-approval">
</div>
<coral-status v-if="icon.isReview" variant="success"></coral-status>
</div>

<a :href="icon.imgUrl" target="_blank">
Expand All @@ -115,7 +113,7 @@
</p>

<!-- App name -->
<h3 class="coral-font-color m-b-0">
<h3 class="coral-font-color m-b-0 m-t-0">
<input class="editable-input f-w-800 m-b-0" @change="editDoc(icon, $event, 'appName', false)" type="text" variant="quiet" :value="prettifyName(icon.appName)" is="coral-textfield" aria-label="text input">
</h3>

Expand All @@ -126,15 +124,8 @@
<p v-if="icon.credit !='' " class="coral-Body--XS p-b-0 opacity-50 m-b-0"><input class="editable-input small-text" @change="editDoc(icon, $event, 'credit')" type="text" variant="quiet" :value="icon.credit" is="coral-textfield" aria-label="text input"></p>
<p v-if="icon.credit =='' " class="coral-Body--XS p-b-0 opacity-50 m-b-0"><input class="editable-input small-text" @change="editDoc(icon, $event, 'credit')" type="text" variant="quiet" :value="'n/a'" is="coral-textfield" aria-label="text input"></p>

<div class="p-t-15">
<div class="p-t-15 p-b-15">
<button @click="approveIcon(icon)" class="coral-btn coral-btn-primary">Approve</button>

<!-- Contact -->
<div v-if="icon.email != 'user@email.com'" class="p-t-10">
<a class="coral-Link" :href="'mailto:'+icon.email+'?subject=macOS icons submission&body='+icon.usersName">
email
</a>
</div>
</div>

</div>
Expand All @@ -161,13 +152,14 @@ Parse.initialize("macOSicons");
Parse.serverURL = 'https://media.macosicons.com/parse'
const Icons = Parse.Object.extend("Icons2");
const User = Parse.Object.extend("User");
Parse.User.enableUnsafeCurrentUser() // Enable cache for user auth, to avoid having to always login
const currentUser = Parse.User.current(); // Check if user is currently logged in or not
let lastVisible
const docLimit = 50
const docLimit = 500
export default {
Expand Down Expand Up @@ -404,13 +396,17 @@ export default {
// delete icon.type
// delete icon.icons
parent.icons[icon.usersName].emailSent = "requested";
let payLoad = {
email: icon.email,
usersName: icon.usersName,
id: icon.user.objectId
}
Parse.Cloud.run("sendEmail", payLoad).then((result)=>{
parent.icons[icon.usersName].emailSent = "sent";
console.log(parent.icons[icon.usersName].emailSent);
parent.showToast({
id: "toastMessage",
message: "Email has been sent",
Expand All @@ -424,6 +420,7 @@ export default {
variant: "error"
})
});
},
getIconListLen(query){
Expand Down Expand Up @@ -537,8 +534,13 @@ export default {
async function getParseData(){
const query = new Parse.Query(Icons);
// const userQuery = new Parse.Query(User);
// userQuery.descending("modifiedAt");
query.equalTo("approved", false)
query.ascending("usersName");
query.descending("createdAt");
// query.ascending("usersName");
query.exists("highResPngFile");
query.limit(docLimit);
Expand Down Expand Up @@ -572,15 +574,15 @@ export default {
let email = docData.email
let creditUrl = docData.credit
let imgReference
if (usersName == "" || usersName == undefined ) {
// Set user if the user is undefined has no icons on the dashboard
if(parent.icons["Undefined"] == undefined ){
Vue.set(parent.icons, "Undefined", {
"usersName": "Undefined",
"email": email,
"icons":{},
"icons":{},
"emailSent": false,
"creditUrl": creditUrl
})
Vue.set(parent.icons["Undefined"].icons, appName, docData)
Expand All @@ -594,11 +596,13 @@ export default {
}else{
// Set user if the user has no icons on the dashboard
if(parent.icons[usersName] == undefined ){
Vue.set(parent.icons, usersName, {
"usersName": usersName,
"email": email,
"icons":{},
"emailSent": false,
"creditUrl": creditUrl,
"user": user
})
Expand Down

1 comment on commit 770957f

@vercel
Copy link

@vercel vercel bot commented on 770957f Jul 2, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.